figma-implement-design

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

Gera regras personalizadas de sistema de design para a base de código do usuário. Use quando o usuário disser "criar regras de sistema de design", "gerar regras para meu projeto", "configurar regras de design", "personalizar diretrizes de sistema de design" ou quiser estabelecer convenções específicas do projeto para fluxos de trabalho do Figma para código. Requer conexão com o servidor MCP do Figma.

Criar um novo arquivo Figma em branco. Use quando o usuário quiser criar um novo design Figma ou arquivo FigJam, ou quando você precisar de um novo arquivo antes de chamar use_figma. Lida com a resolução do plano via whoami, se necessário. Uso — /figma-create-new-file [editorType] [fileName] (ex.: /figma-create-new-file figjam My Whiteboard)

Use esta skill junto com figma-use quando a tarefa envolver traduzir uma página de aplicativo, visualização ou layout de várias seções para o Figma. Gatilhos: 'escrever no Figma', 'criar no Figma a partir do código', 'enviar página para o Figma', 'pegar este app/página e construir no Figma', 'criar uma tela', 'construir uma landing page no Figma', 'atualizar a tela do Figma para corresponder ao código'. Esta é a skill de fluxo de trabalho preferida sempre que o usuário quiser construir ou atualizar uma página, tela ou visualização completa no Figma a partir de código ou descrição. Descobre componentes, variáveis e estilos do sistema de design via search_design_system, importa-os e monta telas incrementalmente seção por seção usando tokens do sistema de design em vez de valores fixos.

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.