Antes de começar
Quem pode usar esse recurso
O Figma Make está disponível para acessos Full em planos pagos.
Você pode experimentar o Figma Make em outros acessos e planos.
Para ajudar o Figma Make a criar um protótipo funcional ou aplicativo web que atenda melhor às suas necessidades e expectativas, você pode fornecer diretrizes no arquivo Guidelines.md. Isso inclui instruções sobre como você quer que o Figma Make se comporte em termos de programação e personalidade, e como usar opções como contexto de estilo.
Adicionar diretrizes
Para abrir o arquivo de diretrizes:
- No topo do Figma Make, clique em Código.
- No explorador de arquivos no lado esquerdo do editor de código, clique em diretrizes e depois em Guidelines.md.
Instruções, melhores práticas e exemplos de como usar o arquivo de diretrizes estão incluídos no próprio arquivo. Por conveniência, o conteúdo do arquivo está disponível na seção a seguir.
Conteúdo do arquivo Guidelines.md
Diretrizes do sistema
Use este arquivo para fornecer à IA as regras e diretrizes que você gostaria que ela seguisse.
Este modelo descreve alguns exemplos de itens que você pode adicionar. É possível adicionar suas próprias seções e formatá-las de acordo com suas necessidades
DICA: mais contexto nem sempre é melhor. Isso pode confundir o LLM. Tente adicionar as regras mais importantes de que você precisa
# Diretrizes gerais
Quaisquer regras gerais que você deseja que a IA siga.
Por exemplo:
* Use posicionamento absoluto somente quando necessário. Opte por layouts responsivos e bem estruturados que usam flexbox e grade por padrão.
* Refatore o código à medida que avança para manter o código limpo.
* Mantenha os tamanhos dos arquivos pequenos e coloque funções e componentes auxiliares em seus próprios arquivos.
--------------
# Diretrizes do Design System
Regras para que a IA faça as gerações parecerem com o Design System da sua empresa
Além disso, se você escolher um Design System para usar na caixa de prompt, pode consultar os componentes, tokens, variáveis e componentes do seu Design System.
Por exemplo:
* Use um tamanho de fonte base de 14px
* Os formatos de data devem sempre estar no formato “Jun 10”
* A barra de ferramentas inferior deve ter no máximo 4 itens
* Nunca use o botão de ação flutuante com a barra de ferramentas inferior
* As fichas devem sempre vir em conjuntos de 3 ou mais
* Não use um menu suspenso se houver 2 ou menos opções
Você também pode criar subseções e adicionar detalhes mais específicos
Por exemplo:
## Button
The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
users through the application. It provides visual feedback and clear affordances to enhance user experience.
### Uso
Os botões devem ser usados para ações importantes que os usuários precisam realizar, como envio de formulários, confirmação de escolhas,
ou início de processos. Eles comunicam interatividade e devem ter rótulos claros e orientados para a ação.
### Variantes
* Botão primário
* Finalidade: usado para a ação principal em uma seção ou página
* Estilo visual: negrito, preenchido com a cor principal da marca
* Uso: um botão primário por seção para guiar os usuários para a ação mais importante
* Botão secundário
* Finalidade: usado para ações alternativas ou de apoio
* Estilo visual: contornado com a cor principal, plano de fundo transparente
* Uso: Pode aparecer junto com um botão principal para ações menos importantes
* Botão terciário
* Finalidade: usado para as ações menos importantes
* Estilo visual: só texto, sem borda, usando a cor principal
* Uso: para ações que devem estar disponíveis, mas não devem ser enfatizadas