Skills de Figma

mcp-server-guide/skills/code-connect-components

Estabelece links bidirecionais entre componentes de design do Figma e implementações de código usando Code Connect. Requer conexão com o servidor MCP do Figma e componentes publicados nos planos Organization ou Enterprise. Identifica automaticamente componentes não mapeados nas seleções do Figma e, em seguida, varre seu codebase em busca de componentes de código correspondentes por nome, estrutura e props. Apresenta os componentes correspondentes para sua revisão antes de criar os mapeamentos, permitindo aceitação ou rejeição seletiva. Suporta múltiplos...

mcp-server-guide/skills/create-design-system-rules

Regras personalizadas de design system para implementação consistente de Figma para código em todo o seu projeto. Gera convenções específicas do projeto para organização de componentes, estilos, design tokens e manipulação de assets que orientam agentes de IA a produzir código consistente. Suporta três formatos de arquivo de regras: CLAUDE.md para Claude Code, AGENTS.md para Codex CLI e .cursor/rules/figma-design-system.mdc para Cursor. Requer conexão com o servidor MCP do Figma e análise do codebase para descobrir padrões existentes antes das regras...

mcp-server-guide/skills/figma-code-connect

Cria e mantém arquivos de template do Figma Code Connect que mapeiam componentes do Figma para trechos de código. Use quando o usuário mencionar Code Connect, componente do Figma…

mcp-server-guide/skills/figma-code-connect-components

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`.

mcp-server-guide/skills/figma-create-design-system-rules

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.

mcp-server-guide/skills/figma-create-new-file

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)

mcp-server-guide/skills/figma-design-to-code

Use esta habilidade ao implementar um design do Figma como código (design → código) — na direção de leitura DO Figma. Gatilhos: 'implemente este design do Figma', 'construa este…

mcp-server-guide/skills/figma-generate-design

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.

mcp-server-guide/skills/figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

mcp-server-guide/skills/figma-generate-library

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.

mcp-server-guide/skills/figma-implement-design

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/figma-implement-motion

Traduz movimentos e animações do Figma em código de aplicação pronto para produção. Use ao implementar animação/movimento a partir de um design do Figma — o usuário menciona…

mcp-server-guide/skills/figma-swiftui

Tradução SwiftUI ↔ Figma. Use sempre que o usuário mencionar Swift, SwiftUI, iOS, iPhone ou iPad — em QUALQUER direção — traduzindo um design do Figma para…

mcp-server-guide/skills/figma-use

**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.

mcp-server-guide/skills/figma-use-figjam

Esta habilidade ajuda agentes a usarem a ferramenta MCP use_figma do Figma no contexto do FigJam. Pode ser usada em conjunto com o figma-use, que possui contexto fundamental para usar o…

mcp-server-guide/skills/figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

mcp-server-guide/skills/figma-use-slides

Esta habilidade ajuda agentes a usarem a ferramenta MCP use_figma do Figma no contexto de Slides. Pode ser usada em conjunto com figma-use, que possui contexto fundamental para usar o…

mcp-server-guide/workflow-skills/generate-project-plan

Gere um quadro de plano de projeto FigJam a partir de um PRD e do contexto do código. Fluxo interativo: pesquisa → proposta de seções → pesquisa aprofundada por seção → por seção…

mcp-server-guide/skills/implement-design

Traduz designs do Figma em código pronto para produção com fidelidade visual pixel-perfect. Requer conexão com o servidor MCP do Figma e uma URL do Figma com chave de arquivo e ID de nó para extrair contexto de design, capturas de tela e assets. Fluxo de trabalho estruturado em sete etapas: analisar URL, buscar contexto de design, capturar referência visual, baixar assets, traduzir para as convenções do projeto, alcançar paridade 1:1 e validar contra o Figma. Prioriza a reutilização do design system em vez de duplicação; mapeia tokens do Figma para o design do projeto...

mcp-server-guide/workflow-skills/video-interaction-mapper

Esta habilidade deve ser usada quando o usuário solicitar a análise de uma gravação de tela de interface do usuário e mapear estados de interação no Figma. Acione para solicitações como "colocar vídeo…