O Figma é uma ferramenta de design colaborativo que ajuda os designers a criar e manter design systems. Ele oferece um ambiente centralizado onde recursos de design, componentes e diretrizes podem ser desenvolvidos, compartilhados e atualizados de forma colaborativa. O Figma agiliza o processo de design, prototipagem e garantia da consistência do design entre produtos e aplicativos dentro de uma organização.

O que é design system e como criar um?

Um design system é uma coleção de componentes reutilizáveis, diretrizes e recursos que ajudam a manter consistência e eficiência no processo de design. Ele serve como uma única fonte da verdade para designers, desenvolvedores e envolvidos. Aqui tem uma ótima introdução aos design systems. Criar um design system envolve a definição de estilos de tipografia, paletas de cores, sistemas de grade, iconografia e outros elementos visuais que se alinham à identidade da marca.

Quais são alguns exemplos de design system?

A Comunidade do Figma tem vários design systems abertos de grandes empresas como Airtable, Amplify e Atlassian.

Figma para design systems

Um design system para todos

Crie recursos e bibliotecas compartilhados que podem ser acessados por toda a equipe. O Figma permite a adoção do design system para maior consistência e eficiência.

Experimente grátis Solicite uma demo

Botões, formas, letras e caixa de delimitação em camadas sobre uma grade como parte de um design system

Equipes que confiam no Figma:

Design systems escaláveis

Colabore em conjunto em recursos reutilizáveis para criar um design system que permite consistência e inovação entre equipes e produtos.

Uma biblioteca de ícones, cores, estilos de fontes e espaçadores

Crie uma estrutura para inovação mais rápida

Padronize estilos, variáveis e componentes para que tudo, desde a cor até o espaçamento, escale perfeitamente seus produtos e marcas.

Compartilhe bibliotecas para maior consistência

Publique recursos nas bibliotecas da equipe para que os elementos de design aprovados mais recentes estejam sempre disponíveis para arrastar e soltar.

Escale seus design systems conforme seu produto cresce

Recursos avançados de design systems, como modos de variáveis, ajudam você a escalar casos de uso, temas e muito mais.

Experimente o Figma de graça

Explore os recursos do design system

Simplifique o processo de desenvolvimento de produtos com um design system alinhado entre design e código.

Imagens da visualização do modo claro e do modo escuro de um app para exportação

Implemente tokens de design

Use variáveis e modos para implementar tokens de design para o seu design system. Use tokens de cor para alternar entre os modos claro e escuro, ou tokens de tipografia para mudar as fontes entre marcas e mais.

Comece a usar variáveis