flntfnd/figma-design-system

Figma Design Systems

Como construo sistemas de design no Figma para iOS/iPadOS/macOS, Android e Web, sobre o servidor MCP oficial do Figma. Cada valor é uma variável. Estilos são para compostos construídos a partir de variáveis: estilos de texto, estilos de efeito, estilos de gradiente. Estilos de cor sólida são legados.

Chamadas de ferramentas MCP pertencem às habilidades de plugin que acompanham o plugin Figma (figma:figma-use, figma:figma-generate-library, figma:figma-generate-design, e similares). A Figma as mantém. Carregue-as junto a esta. Em mecânica, a habilidade de plugin vence. Em processo e completude, esta vence.

Referência Rápida

Tópico	Referência
Nomenclatura de tokens para toda habilidade: níveis, famílias, regra de conversão por plataforma, sintaxe de código; coleções de variáveis, modos, tipografia, espaçamento, raio	reference/token-architecture.md
Listas de componentes e estados, Auto Layout, propriedades, Slots, fiação obrigatória de estados interativos	reference/component-architecture.md
Construção de Liquid Glass no Figma: kit da Apple, parâmetros, tokens de vidro, limites de API	reference/liquid-glass.md
Aplicação de um estilo visual a um design existente (reestruturação, não troca de tokens)	reference/applying-styles.md
Ordens de operação para construção do zero e replicação de aplicativo, estrutura de arquivos, handoff Dev Mode, acessibilidade, anti-padrões	reference/workflows-and-handoff.md
As quatro portas em detalhe, como escalam com a tarefa, o conjunto mínimo de telas por plataforma	reference/gates.md
Fatos do Figma que mudam: portas de plano, limites, status beta, nomes de ferramentas MCP e habilidades, links de kits, datados	reference/platform-status.md

Portas

Quatro regras, minhas, verificadas no início da sessão e durante todo o processo. Elas falham silenciosamente e custam mais caro no handoff.

1. Canvas escuro primeiro. O canvas de cada página é #1E1E1E antes de qualquer conteúdo existir. Se estiver branco, pare e corrija.
2. Sem páginas ou frames vazios. Crie, preencha completamente, siga adiante. Uma plataforma não está completa sem o conjunto mínimo de telas.
3. Nomes de tokens correspondem exatamente ao código. Use os nomes já em produção. Não invente novos.
4. Claro e escuro, ambos. Toda cor semântica tem ambos os valores e toda tela é construída e revisada em ambos antes de estar completa.

Uma construção completa recebe todas as quatro na íntegra. Uma pequena edição em um arquivo existente apenas não pode piorar o arquivo, e qualquer coisa já quebrada é relatada, não corrigida silenciosamente. reference/gates.md tem as razões, as regras de escala e o conjunto mínimo de telas.

No Figma:

Canvas escuro:

figma.currentPage.backgrounds = [{
  type: 'SOLID',
  color: { r: 0.118, g: 0.118, b: 0.118 },  // #1E1E1E
  opacity: 1
}];

figma.currentPage é uma página. Repita por página usando a regra de troca de página em figma:figma-use, e defina em cada nova página ao criá-la. Manualmente: clique direito no canvas vazio → Cor de fundo. Tire uma captura de tela e confira.

Sem páginas vazias. Crie uma página na mesma etapa em que a preenche. Se uma página 🎨 Tokens existir, as coleções de variáveis estão nela antes da página 🎛 Components ser tocada.

Nomes de tokens. O caminho da variável e a sintaxe de código de cada variável seguem reference/token-architecture.md. Onde o código já nomeia um token, esse nome vence.

Claro e escuro. Modos Claro e Escuro na coleção de Cores Semânticas. Revise cada tela com seu quadro superior definido para cada um.

Faixas

Esta habilidade tem processo Figma e nomes de tokens. Valores e regras de plataforma vêm da habilidade que os possui.

Necessidade	Proprietário
As quatro portas e o conjunto mínimo de telas	Esta habilidade (reference/gates.md)
Valores de paleta e qual primitivo cada papel semântico referencia	color-system
Tamanhos de tipo Apple, cores do sistema, regra e visual Liquid Glass, versões de SO	apple-platform
Papéis de cor Material, escala de forma, classes de tamanho de janela, versões de biblioteca	android-platform
Tokens Web em CSS, breakpoints em código	web-platform
Nomes e valores de tokens de movimento	motion-design
O catálogo de estilos	visual-styles

Início de Sessão

1. Carregue figma:figma-use e a habilidade de plugin para o trabalho: figma-generate-library para tokens e componentes, figma-generate-design para telas, figma-design-to-code antes de ler um design para implementação.
2. Abra uma sessão. create_session com a chave do arquivo e uma tarefa de uma linha, antes de qualquer outra ferramenta de arquivo, incluindo trabalho somente leitura. Novo arquivo: create_new_file primeiro, depois create_session.
3. Leia antes de escrever. Um arquivo existente tem páginas, coleções e convenções. Encontre-os antes de adicionar.
4. Verifique as portas, escalonadas para a tarefa.

Estilo de Design

Confirme o estilo visual com a habilidade visual-styles antes de construir quaisquer tokens ou componentes. Sem estilo especificado, a linguagem de design da própria plataforma é o padrão. Níveis de token, estrutura de componentes, Auto Layout e fiação de estados permanecem os mesmos entre estilos. Apenas valores e especificidades estruturais mudam. reference/applying-styles.md tem como um estilo é aplicado no Figma.

Filosofia

O sistema de design é um contrato entre design e código. Tokens definidos no Figma são os mesmos tokens usados em SwiftUI, Compose e CSS. Nomes, valores e hierarquia correspondem em todos os três. Um sistema de design construído sem engenharia como público é uma folha de adesivos.

Projete tudo. Toda tela, todo estado, todo caso extremo. Vazio, carregando, erro, conteúdo parcial, estouro, texto longo, texto curto, desabilitado. Um design que cobre apenas o caminho feliz é um mood board. A engenharia inventará os estados faltantes no código, e eles estarão errados.

Pixel perfeito significa exatamente isso. Vincule tudo a variáveis, meça tudo. Um componente que tem 17px de largura porque "parece certo" não é pixel perfeito.

Dois Modos de Trabalho

Construindo do zero. Primeiro o sistema de design, depois os componentes, as telas por último. Tokens são definidos antes de qualquer componente ser tocado.

Replicando um aplicativo existente. Audite primeiro, extraia o sistema implícito, formalize-o, depois reconstrua componentes sobre os tokens formalizados. Nunca pule a auditoria.

Ambos estão passo a passo em reference/workflows-and-handoff.md.