Skills
.Work. You
Rest

code-to-canvas

Community

Sync code to Figma as editable layers.

Design & Creative#automation#figma#mcp#bidirectional-sync#component-mapping#design-code#code-to-canvas
Authorwolram
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Envia código implementado de volta ao Figma como layers editaveis, fechando o ciclo entre desenvolvimento e design ao manter o design e o código alinhados durante iteracoes de componentes.

Core Features & Use Cases

  • Sincronização bidirecional entre código e design: componentes implementados são enviados ao Figma como layers editaveis para designers refinarem rapidamente.
  • Mapeamento Code Connect: mantém referencias cruzadas entre código (web/ios/android) e frames no Figma para reuso eficiente.
  • Fluxo de validação e atualizacao de mapas: atualiza ou cria mapeamentos quando componentes são alterados, garantindo traceabilidade.

Quick Start

Sincronize um componente específico enviando o código implementado para o Figma como layers editaveis.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: code-to-canvas
Download link: https://github.com/wolram/skills/archive/main.zip#code-to-canvas

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.