Antes de começar
Quem pode usar esse recurso
Disponível no Figma Design
Disponível em planos pagos
Requer permissão para editar
Com o First Draft, você pode transformar ideias em wireframes ou designs editáveis em poucos minutos. Essa ferramenta ajuda você a explorar uma ampla gama de possibilidades, além de reduzir o esforço necessário para criar as primeiras explorações do zero.
Como funciona
Como base para gerar designs, o Figma AI usa as bibliotecas de wireframing e design criadas pelo Figma.
Cada biblioteca tem um conjunto de blocos básicos, ou pilhas de componentes, que são usados para montar o design com base na descrição fornecida por você.
As bibliotecas são excelentes na geração de designs que correspondem a padrões de design comuns em sites e aplicativos móveis. Mas talvez não sejam ideais para gerar conceitos não relacionados a essas estruturas de design.
Os prompts a seguir costumam gerar bons resultados:
- Uma página de checkout para uma loja que vende churrasqueiras
- Um aplicativo de entrega de alimentos para animais de estimação
- Um site de marketing para uma consultoria de estratégia de conteúdo
O Figma AI pode ter dificuldades com estes prompts, pois eles não usam padrões de design comuns em sites ou aplicativos móveis:
- Layout de livro para um romance
- Convite para uma festa de aniversário
- Um panfleto em forma de peixe
Depois de gerar um design, você pode fazer alterações nele usando outro prompt ou com uma coleção de controles de estilo.
Dica: não é possível gerar designs usando seu próprio design system, mas esperamos disponibilizar essa funcionalidade em breve.
Criar um First Draft
- Clique em Ações na barra de ferramentas.
- Selecione First Draft.
- Se necessário, clique em Biblioteca para criar um wireframe ou design básico de um site ou aplicativo móvel. Se você não escolher uma biblioteca, o Figma AI selecionará a mais adequada para o prompt.
- Digite um prompt, como: 'Uma página de preços para uma startup de ferramentas para desenvolvedores' ou clique em uma das sugestões disponíveis.
- Clique em Criar.
- Visualize diferentes temas clicando nas capas abaixo do prompt.
- Se gostar do design, feche o menu de ações. Se quiser fazer mais ajustes, clique em Fazer alterações.
Fazer alterações no design
Observação: depois de fechar Ações, você não poderá fazer alterações no design usando as bibliotecas do First Draft. Em vez disso, você pode continuar editando o design modificando suas propriedades, assim como em qualquer outro design.
Você tem duas opções para modificar o design ao clicar em Fazer alterações:
- Usar um prompt para descrever suas alterações
- Usar os controles de estilo para personalizar a cor, a tipografia, o espaçamento e o raio da borda
Você pode alternar entre as opções ao fazer alterações em um único design.
Dica: Quer comparar ideias diferentes? Duplique o quadro selecionado usando Control D no Windows ou Command D no MacOS e, em seguida, continue fazendo alterações.
Usar um prompt para personalizar o design
Usando um prompt, você pode modificar o tema, o conteúdo ou a estrutura do seu design. Aqui estão alguns exemplos:
Tema
- Use um tema de melancia
- Experimente um esquema de cores diferente
- Deixe o visual mais vibrante
Conteúdo
- Mude o ícone de configurações para uma engrenagem
- Troque o tema de audiolivros para podcasts
- Altere os nomes dos clientes na seção de depoimentos de clientes
Estrutura
- Em Maiores Sucessos, adicione uma nova seção chamada Tendências da Alemanha
- Mova a seção Em destaque para baixo da barra de navegação
Dica: selecione uma ou mais partes do design para aplicar o prompt somente aos elementos selecionados.
Usar controles de estilo para personalizar o tema
Ao usar os controles de estilo para ajustar o tema, você tem o comando sobre a cor, o raio da borda, o espaçamento e a tipografia do design.
Cor
Clique em ou para alternar entre o modo claro e o modo escuro. Você também pode aplicar uma nova cor ao tema escolhendo uma das cores predefinidas ou clicando no círculo cromático para escolher sua própria cor.
Raio de borda
Arraste o controle deslizante para aumentar ou diminuir o raio de borda de objetos qualificados.
Espaçamento
Arraste o controle deslizante para aumentar ou diminuir o espaçamento entre os itens.
Tipografia
Clique em título, corpo ou rótulo para selecionar um grupo de elementos de texto a serem alterados. Em seguida, clique em uma nova fonte para visualizá-la no design.
Dica: algo não está funcionando como esperado? Confira nosso guia Solução de problemas nas ferramentas de IA no Figma Design →