Skills de Figma

Establish bidirectional links between Figma design components and code implementations using Code Connect. Requires Figma MCP server connection and published components on Organization or Enterprise plans Automatically identifies unmapped components in Figma selections, then scans your codebase for matching code components by name, structure, and props Presents matched components to you for review before creating mappings, allowing selective acceptance or rejection Supports multiple...

Custom design system rules for consistent Figma-to-code implementation across your project. Generates project-specific conventions for component organization, styling, design tokens, and asset handling that guide AI agents to produce consistent code Supports three rule file formats: CLAUDE.md for Claude Code, AGENTS.md for Codex CLI, and .cursor/rules/figma-design-system.mdc for Cursor Requires Figma MCP server connection and codebase analysis to discover existing patterns before rule...

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…

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 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…

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.

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

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.

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

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…

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…

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

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…

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

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…

Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section…

Translates Figma designs into production-ready code with pixel-perfect visual fidelity. Requires Figma MCP server connection and a Figma URL with file key and node ID to extract design context, screenshots, and assets Seven-step structured workflow: parse URL, fetch design context, capture visual reference, download assets, translate to project conventions, achieve 1:1 parity, and validate against Figma Prioritizes design system reuse over duplication; maps Figma tokens to project design...

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…

Esta habilidade deve ser usada quando o usuário pedir para analisar uma gravação de tela de UI e mapear estados de interação no Figma. Acione para solicitações como "colocar vídeo…