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 criar protótipos funcionais e aplicativos web que tenham uma aparência consistente, você pode aproveitar o contexto de estilo de uma biblioteca Figma existente no Figma Make. Nesse caso, o Figma Make extrairá o CSS de estilo dessa biblioteca.
Existem duas etapas para usar o contexto de estilo de uma biblioteca no Figma Make:
- Exporte uma biblioteca do Figma Design.
- Selecione a biblioteca em um arquivo do Figma Make. Depois, você pode personalizar ainda mais o seu arquivo do Figma Make, editando os estilos exportados e adicionando diretrizes para ajudar a enfocar a forma como o Figma Make usa os estilos extraídos.
Passo 1: exporte uma biblioteca do Figma Design para usar como contexto de estilo no Figma Make
Antes de começar
Quem pode usar esse recurso
Disponível em todos os planos pagos
Requer um acesso Full com acesso de edição ao arquivo-fonte da biblioteca
No Figma Design, selecione uma biblioteca para usar como contexto de estilo para seus arquivos do Figma Make. Somente pessoas com acesso de edição à biblioteca podem exportá-la para o Figma Make. Este passo só precisa ser realizado uma vez antes que você e outras pessoas possam começar a usá-la no Figma Make.
- No arquivo do Figma Design que contém a biblioteca que você deseja exportar para o Figma Make, selecione a aba Recursos na barra lateral esquerda.
- Clique em Bibliotecas.
- Na seção Este arquivo, encontre o arquivo atual e clique em Publicar para abrir o modal de publicação da biblioteca.
- Se você ainda não publicou a biblioteca em uma equipe, área de trabalho ou organização, clique em Publicar na parte inferior do modal. Somente bibliotecas publicadas podem ser exportadas para o Figma Make. Esse processo pode levar alguns minutos.
-
Clique em Exportar para o Make.
O processo de exportação pode levar alguns minutos para ser concluído. Durante esse processo, o Figma monta e exporta um arquivo CSS para referência no Figma Make.
- Quando o processo de exportação estiver concluído, clique em Acessar o Figma Make.
Depois de extrair suas Bibliotecas e selecioná-las em seu arquivo do Figma Make, acesse a visualização de código. A partir daí, abra a pasta estilos e clique em globals.css para explorar os estilos gerados. Normalmente, você verá os estilos agrupados em quatro categorias:
- Paletas de cores
- Tipografia (fonte e hierarquia)
- Variáveis
- Bordas e raio dos cantos
Vale lembrar que o CSS extraído é uma versão simplificada da sua biblioteca completa. Ele não captura todos os detalhes do design. Para garantir a consistência e a clareza, recomendamos adicionar mais contexto e regras no seu arquivo guidelines.md.
No momento, o Figma Make não aceita a extração completa de tokens de design. Em vez disso, ele extrai um subconjunto de suas variáveis e as utiliza para gerar um arquivo CSS global com valores brutos. Isso significa que a sintaxe das variáveis não será preservada exatamente como definida. Em vez de um mapeamento exato, você terá uma visualização simplificada de suas variáveis refletidas em um único arquivo .css . Isso ajuda a garantir que o código gerado esteja alinhado com seus estilos fundamentais.
Se você tiver regras ou parâmetros adicionais para variáveis, especialmente aqueles relacionados a estados, recomendamos documentá-los em seu arquivo guidelines.md para manter a consistência em todo o sistema.
Você pode usar uma biblioteca por vez. Se sua organização gerencia seu design system em várias bibliotecas, é recomendável selecionar a biblioteca que contém seus componentes principais e a maioria dos estilos fundamentais. Embora a exportação para o Figma Make não extraia os componentes em si, essa biblioteca provavelmente fará referência a cores e tipografia, que serão usadas como contexto, dentro de suas propriedades.
Não, você só precisa exportar a biblioteca para o Figma Make uma vez. Qualquer pessoa dentro da sua organização que tenha acesso de visualizador a essa biblioteca também poderá usá-la em seus arquivos do Figma Make.
Sim. Se alguém editar uma biblioteca de design e quiser usar a versão atualizada no Figma Make, você precisará exportar a biblioteca novamente. A biblioteca reexportada será atualizada apenas para futuros arquivos do Figma Make e não atualizará retroativamente nenhum arquivo do Figma Make gerado antes da atualização.
Passo 2: Referenciar uma biblioteca em um arquivo Figma Make
Com o contexto de estilo da sua biblioteca adicionado ao Figma Make, você e outras pessoas da sua equipe ou organização podem usá-lo para criar protótipos funcionais estilizados e aplicativos web. Qualquer pessoa da equipe ou organização com acesso de visualizador à biblioteca pode ver e usar essa biblioteca em seu arquivo do Figma Make.
- Em um arquivo do Figma Make, clique em Selecionar uma biblioteca.
- Escolha qual biblioteca você gostaria de usar.
Comece a fazer prompts imediatamente ou personalize a forma como o Figma Make usa ainda mais os estilos da sua biblioteca editando os estilos da biblioteca ou adicionando diretrizes. Depois que você escolher uma biblioteca e começar a usar prompts, todo o conteúdo gerado nesse arquivo usará esses estilos.
Dica: referenciar uma biblioteca do Figma Design fornece ao Figma Make um contexto de estilo para usar enquanto você explora ideias e gera protótipos funcionais e aplicativos web. Para aumentar a especificidade, experimente:
Editar os estilos de uma biblioteca
Quando uma biblioteca do Figma Design é exportada para o Figma Make, um arquivo CSS das propriedades da biblioteca é criado automaticamente. Você pode personalizar o CSS para ajustar seu Figma Make conforme necessário. As alterações no CSS afetam apenas este arquivo do Figma Make.
- Clique em .
- Escolha Editar estilos para atualizar as propriedades de CSS desta biblioteca.
Adicionar diretrizes para geração
As diretrizes permitem que você forneça regras ou instruções ao Figma Make sobre como o contexto do estilo é usado. As diretrizes se aplicam apenas ao que você fizer nesse arquivo e não afetam outros arquivos que possam fazer referência à biblioteca, nem a biblioteca em si.
- Clique em .
- Escolha Editar diretrizes para adicionar diretrizes a este arquivo do Figma Make.
O arquivo guidelines.md é um arquivo de texto livre, então você pode adicionar qualquer diretriz específica que quiser que o Figma Make siga.
Dica: O arquivo guidelines.md está disponível para uso com ou sem uma biblioteca selecionada, para que você possa dar forma a qualquer arquivo do Figma Make conforme necessário.
visualizador de uma pessoa for removido da biblioteca?
Se alguém tinha acesso de visualizador a uma biblioteca anteriormente, mas o acesso tiver sido revogado, essa pessoa não poderá mais ver ou usar essa biblioteca no Figma Make. No entanto, todos os arquivos anteriores do Figma Make que ela possa ter criado com essa biblioteca continuará disponível para ela, e o nome da biblioteca aparecerá como "Desconhecido".
Não. Qualquer atualização nos estilos de CSS ou nas diretrizes afetará apenas o respectivo arquivo do Figma Make.
Perguntas frequentes
Não, uma biblioteca do Figma Design não pode ser removida no momento depois de ter sido usada para solicitar no Figma Make.
Depois de começar a geração enquanto faz referência a uma biblioteca, ela não pode ser removida. Para usar uma biblioteca diferente ou parar de usar uma biblioteca específica, crie um novo arquivo do Figma Make e comece a gerar.