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…

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.

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

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)

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.

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.

Use esta habilidade 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 para…

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

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.

Construir ou atualizar um sistema de design de nível profissional no Figma a partir de uma base de código. Use quando o usuário quiser criar variáveis/tokens, construir bibliotecas de componentes, configurar…

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 designs do Figma em código de aplicação pronto para produção com fidelidade visual de 1:1. Use ao implementar código de UI a partir de arquivos Figma, quando o usuário mencionar…

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

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first.…

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

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…

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