Design system pronto para o agente

O agente do Figma lê a descrição de cada componente antes de desenhar ou avaliar. O que está escrito vira regra. O que falta vira pergunta, e a pergunta segura o handoff.

Onde escrever

1 de 4 · no conjunto

Descreva o conjunto

O conjunto guarda o que vale para todas as variantes. Escreva uma linha por regra, com o nome da regra no começo da linha.

  1. Abra o arquivo da biblioteca e selecione o conjunto, pela borda roxa que envolve as variantes. Não selecione uma variante só.

  2. No painel Design, à direita, clique em Component configuration, o ícone ao lado do nome do conjunto.

    Topo do painel Design com o conjunto Card de pedido selecionado: o nome, quatro ícones, a prévia da descrição e as propriedades State e Detalhes.
    Component configuration é o ícone de ajustes, o terceiro ao lado do nome.

  3. Escreva no campo Description a partir do modelo. Troque o que está depois de cada nome de regra pelo comportamento do seu componente, e clique fora do painel para salvar.

    Painel Component configuration do Figma com o conjunto Card de pedido. O campo Description tem seis linhas, uma por regra: Card clicável de um pedido, Área de toque, Leitura, Estados, Zoom e Cor. Embaixo, o campo Link, vazio.
    O campo aceita formatação: negrito, título, listas, link e código.
    Modelo para copiar 
    Papel: card clicável, botão, link ou campo.
Área de toque: o que se toca, e o tamanho.
Leitura: o que o leitor de tela lê, em ordem.
Estados: as variantes de estado que existem.
Zoom: a coleção, os modos e o que muda em cada um.
Cor: as variáveis de texto e de fundo.
    Evite
    Card de pedido.

    O agente não sabe se o card é tocável nem o que ele lê. Então ele pergunta, e o handoff espera a resposta.

2 de 4 · na variante

Descreva a variante só no que muda

A variante herda o que o conjunto diz. Escreva nela só a diferença. Se nada muda, deixe o campo vazio.

  1. Selecione a variante dentro do conjunto.

  2. Em Component configuration, abra a aba Selected variant e escreva o que esta variante faz de diferente.

    Painel Component configuration com a aba Selected variant ativa. A descrição diz: Detalhes=True, o botão Detalhes é a ação do card, a área de toque continua sendo o card inteiro, e Detalhes entra no fim do nome lido.
    A aba Component set, ao lado, abre a descrição do conjunto.

  3. Confira o que quem usa vai ver. A descrição aparece embaixo do nome da instância, no painel Design, e é ali que o agente também lê.

    Painel Design com uma instância de Card de pedido selecionada. Embaixo do nome, a prévia da descrição da variante, e as propriedades State e Detalhes.
    Ali aparece o começo da descrição, e o texto inteiro abre na janela de documentação.

3 de 4 · nas variáveis

Ligue o componente às variáveis e diga os modos

Zoom, tema e densidade costumam ser modos de variáveis. Se a descrição não cita o modo, o agente não sabe que precisa olhar o componente nele.

  1. Ligue o tamanho do texto a uma variável, numa coleção com um modo para cada nível de zoom do seu design system. O WCAG pede que o texto chegue a 200% sem perder conteúdo nem função.

    Janela de variáveis do Figma com a coleção Tipografia. A variável texto/corpo vale 16 no modo Padrão e 32 no modo 200%.
    Cada modo é uma coluna, e cada variável guarda um valor por modo.

  2. Selecione uma tela com o componente e troque o modo em Appearance, no painel Design.

    Seção Appearance do painel Design, com o modo da coleção Tipografia em 200%.
    O modo vale para a tela inteira e para tudo dentro dela.

  3. Olhe o componente em cada modo, decida o que ele faz e escreva isso na linha Zoom do conjunto.

    O card no modo Padrão e no 200%. No 200%, o botão Detalhes fica ao lado do texto, e a palavra separação quebra no meio.
    Antes.
    O mesmo card depois do ajuste. No 200%, o botão Detalhes desce para baixo do texto, e nenhuma palavra quebra.
    Depois.
    Prefira 
    Zoom: variável texto/corpo, coleção Tipografia, modos Padrão e 200%. No 200%, o botão Detalhes desce para baixo do texto e o card cresce em altura. Nenhum texto quebra no meio da palavra.
    Evite
    Suporta zoom.

    Não diz a coleção, nem os modos, nem o que muda. O agente não tem o que conferir.

4 de 4 · nas guidelines

Regras de vários componentes vão para as guidelines

Uma regra que vale para mais de um componente não se repete em cada descrição. Ela vai uma vez para as guidelines de acessibilidade da biblioteca.

  1. Escreva as regras num arquivo Markdown, uma por linha.

    Exemplo para copiar 
    Card com uma ação dentro é uma parada só. O nome lido termina com a ação.
Ícone sozinho é botão, e o nome dele está na descrição do componente.
Todo texto usa as variáveis da coleção Tipografia e cresce até o modo 200% sem corte.

  2. Na biblioteca, envie o arquivo em Library, depois Manage guidelines. O recurso está em beta e pede plano Professional, Organization ou Enterprise.

Depois

Confira com o agente

O handoff mostra onde ainda falta descrição.

  1. Selecione o componente e peça ao agente:

    Pedido 
    /da11y prepare o handoff deste componente

  2. Na página DA11Y — handoff, cada descrição que falta vira um card, com o texto sugerido e o lugar onde ele entra.

  3. O agente não grava no design system. Você revisa o texto e cola no lugar que o card indica.