Skip to main content
Sua marca está em uma pasta do Drive, em um arquivo do Figma ou em um design de que você já gosta. Transforme isso em um design system salvo no seu workspace: cores por função, uma escala tipográfica, tokens e alguns componentes de exemplo. O trabalho novo já começa alinhado à marca, e você pode reconstruir os apps existentes sob o mesmo sistema. Aplicar um sistema a um app que você já publicou é uma reconstrução de verdade, não uma troca de folha de estilos.

​
Ideal para

  • Designers de produto que precisam de uma única fonte de verdade antes de projetar as próximas cinco páginas.
  • Fundadores cujos apps foram se afastando uns dos outros e precisam deixar todos com o mesmo visual.

​
Conectores

​
Antes de começar

Reúna tudo o que define sua marca, onde quer que esteja hoje: arquivos da marca, um design de que você já gosta, seu site ou um arquivo do Figma. Conecte o Drive se seu logotipo, cores ou tipografia estiverem armazenados lá. Tenha em mãos uma URL do Figma, uma URL de site ou um DESIGN.md existente, se você tiver um.

​
Dê o prompt ao agente

​
O que esperar

O Agent transforma a fonte que você forneceu em um guia de estilo vivo: suas cores com uma função para cada uma, uma escala tipográfica, os tokens que o restante do sistema referencia, dois ou três componentes de exemplo e os recursos de marca que você forneceu. Revise e selecione Save design system para mantê-lo no seu workspace. A partir daí, o trabalho novo é gerado alinhado à marca desde o primeiro frame. Para colocar um app que você já criou sob o sistema, selecione o destino e aplique o sistema.

​
Adapte ao seu caso

​
Solução de problemas

Aponte para uma fonte em vez de descrevê-la. Uma pasta de marca no Drive, uma URL do Figma, um site publicado ou um DESIGN.md funcionam como entrada.
Aplicar um sistema a um trabalho existente gera novamente a camada de estilo em vez de trocar uma folha de estilos. O aviso de tempo e créditos antes de começar é normal.
As edições seguintes devem continuar usando o sistema. Quando notar o desvio, avise no chat e cite a tela.
Salve-o primeiro. Um guia de estilo não salvo permanece no projeto em que foi gerado.

​
Relacionados

Projetar uma landing page

Coloque o sistema salvo para trabalhar em uma página de lista de espera ou de lançamento.

Redesenhar seu site existente

Extraia o sistema do site que você já tem.