Consistência é a chave - Como construir um sistema de design Figma

É do conhecimento comum entre os designers que um bom sistema de design pode ter um enorme impacto na qualidade dos produtos que enviamos e no ritmo em que podemos desenvolvê-los. Como o caso para a criação de um sistema de design abrangente ficou claro muitas vezes, com empresas como Google, GitHub, IBM e outras usando-os para criar produtos melhores em um ritmo maior, a questão mudou de "Por que devemos ter um design sistema?" para “Como podemos criar um ótimo sistema de design?”

Então, o que exatamente é um sistema de design? Will Fanguy o define como “uma coleção de componentes reutilizáveis, guiados por padrões claros, que podem ser montados para construir qualquer número de aplicativos”. Um sistema de design pode incluir não apenas uma biblioteca de componentes de interface do usuário e uma biblioteca de padrões, mas um guia de estilo, práticas recomendadas, código e muito mais. Assim como o projeto de um arquiteto para um edifício, um sistema de design também serve como a “única fonte de verdade” para a equipe de produto durante a construção de produtos, além de ajudar a manter a consistência.

O GitHub chegou ao ponto de compartilhar sua biblioteca de componentes Figma - um ótimo exemplo de um sistema de design baseado em Figma. Ferramentas mais extensas como Storybook e Component-Driven Development também são recursos extremamente úteis para implementar e documentar um sistema de design.

Um sistema de design mantém a consistência do design e deve ser útil para todos os envolvidos na criação de um produto. É um kit de ferramentas que ajuda os designers a criar novas telas, fluxos e protótipos mais rapidamente. Um bom sistema de design ajuda os desenvolvedores a entender a lógica por trás das decisões de design e ajuda a criar um produto mais coeso. Ele acelera o processo de design e permite aos designers mais tempo para experimentação.

Para os designers que trabalham com o Figma, vamos ver como a criação de uma biblioteca de componentes no Figma pode ser uma parte fundamental de um sistema de design abrangente.

O poder de uma biblioteca de componentes

Às vezes, pode ser contraproducente investir na criação de um sistema de design muito cedo. Nos estágios iniciais do projeto de um produto, o processo ainda é fluido. Por exemplo, se duas barras de navegação primárias estiverem sendo experimentadas, adicionar ambas a uma biblioteca de componentes não faria sentido, pois confundiria todos na equipe. É melhor esperar até que o design do produto esteja resolvido – de preferência testado e finalizado.

Se um produto é maduro e não possui uma biblioteca de componentes existente, o sistema de design já deve ser determinado pela implementação atual. Mas ainda não está codificado. Nesse ponto, seria vantajoso definir os padrões comuns de UX e destilar o produto em um conjunto de componentes que são usados ​​regularmente em todo o produto. Além disso, é ideal que a biblioteca de componentes seja mantida em um local central facilmente acessível a todos.

Um sistema de design é principalmente um kit de ferramentas

Tentar usar um sistema de design como um kit de ferramentas é um grande teste decisivo para sua eficácia. Se vários designers o usam regularmente para acelerar seu processo, ele está fazendo um bom trabalho. Se os desenvolvedores puderem fazer referência a cores, estilos de fonte ou trabalhar com menos entrada de designers, isso também é um bom sinal.

Geralmente não é útil incluir componentes de alta complexidade ou que só podem ser usados ​​uma ou duas vezes no produto. Quanto mais reutilizável algo é, mais ele pertence a um sistema de design.

A Figma lançou recentemente a análise do sistema de design para organizações, onde as equipes podem ver a eficácia das diferentes partes de um sistema de design e ajudar a otimizá-lo.

Por que o Figma é ótimo para criar uma biblioteca de componentes

O Figma é uma ferramenta de design poderosa com muitos recursos excelentes, mas há um subconjunto de elementos que se tornam particularmente úteis ao projetar produtos complexos: Styles , Components e Library Files . Esses recursos ajudam a manter os sistemas de design atualizados, ajudam a manter a consistência entre os designs e fornecem um atalho para atualizar vários designs a partir de um local central.

• Estilos são cores e estilos tipográficos (fonte, tamanho, peso, etc.) que são definidos em um só lugar e podem ser aplicados a vários objetos.
• Componentes são coisas como botões ou bolhas de bate-papo e podem ser criados a partir de Estilos, objetos como formas e texto e outros Componentes.
• Arquivos de biblioteca permitem que estilos e componentes sejam compartilhados entre vários arquivos e com uma equipe ou organização.

A Figma tem a colaboração e o compartilhamento em sua essência. Os arquivos de design podem ser editados por qualquer pessoa no navegador, compartilhados livremente e atualizados em tempo real, pois vários usuários podem editá-los simultaneamente. Isso abre o sistema de design para uma colaboração mais eficiente não apenas entre designers, mas também com desenvolvedores e outras partes interessadas.

Criando um arquivo de biblioteca

No Figma, um arquivo de biblioteca que servirá mais ou menos como o início de um sistema de design pode ser criado. Aqui, podemos definir Estilos e Componentes que são compartilhados por toda a equipe ou organização e usados ​​em vários designs. Estilos e componentes podem ser atualizados em um só lugar, e essas alterações podem ser trazidas para todos os arquivos de projeto individuais automaticamente.

Isso tem algumas vantagens importantes:

1. Velocidade . Economiza tempo eliminando a necessidade de um designer atualizar potencialmente centenas de projetos manualmente. Ao ter componentes gerenciados em um único arquivo de biblioteca, a atualização de uma cor em um local pode se propagar em todos os designs criados usando a biblioteca de componentes com apenas alguns cliques.
2. Consistência . Reduz a probabilidade de erro automatizando a tarefa.

Organização

Ao construir um sistema de design no Figma, é útil traçar paralelos entre as ferramentas e a teoria. Por exemplo, Styles in Figma pode ser considerado o nível mais básico, ainda mais básico que Atoms no modelo Atomic Design de Brad Frost. São coisas como cor e fonte que ajudam a compor a estética do produto.

Um componente Figma simples seria considerado um átomo no modelo Atomic Design, por exemplo, um botão. Um componente Figma mais complexo seria considerado uma molécula ou organismo , que é então usado para construir modelos e páginas .

Algumas das coisas mais úteis para ter em uma biblioteca de componentes são:

• Cores
• Fontes
• Ativos da marca, logotipo, etc.
• Navegação
• Botões
• Notificações
• Modais
• Elementos de formulário e validação

Construindo um Sistema de Design no Figma – Introdução

Neste exemplo, criaremos um formulário de login simples e explicaremos os Componentes e Estilos que podem ser inferidos e usados.

Primeiro, vamos pensar nos Componentes e Estilos que provavelmente serão reutilizáveis ​​a partir deste formulário. Há um cartão contendo um logotipo, campos de formulário e um botão. Existem também três estilos de fonte e algumas cores e efeitos diferentes que podem ser úteis.

Uma vez que os Estilos e Componentes a serem incluídos forem identificados na Biblioteca como acima, é hora de criar um arquivo de Biblioteca e começar a preenchê-lo.

Criar um arquivo de biblioteca Figma

Crie um novo arquivo e publique-o como uma Biblioteca. Depois que um novo arquivo for criado, clique na guia Ativos , clique no ícone Biblioteca e clique em Publicar . Isso publica os Estilos e Componentes no arquivo de biblioteca para que possam ser usados ​​em outros arquivos.

Estilos e componentes agora podem ser criados no arquivo de biblioteca e podem ser usados ​​em outros arquivos e atualizados a partir do arquivo de biblioteca central.

Como criar um estilo Figma

A criação de estilos é a mesma nos arquivos de biblioteca e em qualquer outro arquivo, conforme descrito nas etapas abaixo.

• Selecione o objeto do qual você deseja criar um estilo. Os estilos podem ser cores, propriedades de texto, efeitos e grades de layout.
• Clique no botão Estilos (quatro pontos em um quadrado) ao lado da propriedade a ser usada no novo Estilo e, em seguida, clique no botão de adição no popover para criar um novo Estilo.

• Isso mostrará um modal para nomear o estilo. Muitas vezes, é útil usar um nome semântico em vez de um nome de apresentação, por exemplo, “Cor primária” em vez de “Verde”, para que fique mais claro para que o estilo deve ser usado.
• Publique o estilo em sua biblioteca de equipe usando o pop-up que aparece no canto inferior direito da tela ou repita as etapas realizadas para publicar a biblioteca em primeira instância.

Aqui está o tutorial do Figma sobre como criar um estilo .

Como criar um componente Figma

Criar um Componente também é muito fácil. Basta selecionar o objeto do qual você deseja criar um componente, clicar com o botão direito do mouse e selecionar “Criar componente”.

Os componentes são publicados na Biblioteca de equipe da mesma forma que os estilos.

Aqui está o tutorial do Figma sobre como criar um componente .

Uma vez que alguns Estilos e Componentes tenham sido criados, o arquivo Biblioteca pode ser compartilhado com a equipe, e os Estilos e Componentes podem ser usados ​​em qualquer número de arquivos.

Usando a Biblioteca Figma

Para usar esses Estilos e Componentes em outro arquivo, o arquivo Biblioteca precisa ser vinculado a um arquivo de design existente no qual queremos usar os novos Estilos e Componentes. Basta abrir o modal Bibliotecas novamente (Ativos, ícone Biblioteca) e ativar a chave para que o arquivo Biblioteca seja usado.

A Biblioteca de Componentes está agora pronta para ser usada. Os componentes podem ser colocados arrastando-os para o arquivo de design da guia Ativos à esquerda da tela. Os estilos de biblioteca podem ser usados ​​da mesma forma que os estilos locais ao alterar estilos de texto, cores de preenchimento, traçados, efeitos e grades de layout.

Quando Componentes e Estilos são atualizados na Biblioteca, os arquivos que os utilizam precisam aceitar as alterações. O Figma mostrará uma notificação quando forem feitas atualizações no arquivo da Biblioteca, dando a opção de publicá-las. Uma vez publicados, quaisquer arquivos usando os Componentes e Estilos terão que aceitar a alteração por meio de uma notificação semelhante ou da guia de ativos para atualizar seus componentes e estilos. Isso evita que as alterações sejam publicadas e atualizadas inesperadamente.

Além de construir uma biblioteca de componentes no Figma

O Figma cobre apenas a parte da biblioteca de componentes de um sistema de design completo. Para um sistema de design totalmente completo, vale a pena considerar outras peças que podem ser incorporadas, como diretrizes de marca, guias de estilo de conteúdo e documentação do desenvolvedor.

O guia de estilo de conteúdo do Mailchimp é um excelente exemplo, detalhando o tom de voz e a marca por meio do conteúdo. O GitHub tem uma ótima documentação sobre como sua biblioteca de componentes funciona no código, e o Material Design System do Google também tem alguns exemplos excelentes de documentação da lógica por trás do sistema de design.

Como ferramenta de design, o Figma amadureceu muito e novos recursos são adicionados constantemente. A adição de um sistema de design Figma com análise integrada acessível a toda a organização é um grande passo à frente. A adição desses recursos indica que o Figma pretende ser uma ferramenta de design completa e abrangente, e está no caminho certo para conseguir isso.

• • •

Leia mais no Blog Toptal Design:

• O poder do Figma como ferramenta de design
• Simplifique o design colaborativo com o Figma
• Mini Tutorial – Aproveitando os recursos do Figma para todo o processo de design
• Minitutorial – Trabalhando com os componentes do botão Figma
• Domine seu ofício com essas principais ferramentas de UX