5 Razões para criar um design system com o Figma

Quando se fala dos design systems em abstrato, sem um contexto prático, não é difícil corrermos o risco da conversa se transformar num conjunto de conceitos e premissas sem qualquer ligação aos desafios reais daquilo que é desenhar e desenvolver um produto digital.

Quando falamos de design system num contexto de produtos digitais é difícil não achar o conceito interessante. Esta lógica, para além de grandes poupanças de tempo e dinheiro, permite acima de tudo que as equipas sejam bastante mais eficientes.

Contudo, o desafio não está em considerar os design systems uma boa-prática, o que não é uma assunção difícil, o verdadeiro desafio das equipas de user experience (UX), user interface (UI) e desenvolvimento está sim na aplicação na prática do seu quotidiano em conjugação com os seus processos e ferramentas de trabalho.

Existem neste momento no mercado muitas ferramentas que facilitam a aplicação dos design systems no dia-a-dia. Algumas ferramentas ligadas ao desenvolvimento e produção de código, outras à dimensão de desenho do interface.

No que toca ao desenho, as dimensões de user experience (UX),user interface (UI) e a oferta de ferramentas nunca foi tão grande. Existe neste momento uma autêntica batalha neste campo da indústria e quase todas as soluções podem ser bastante interessantes dependendo de cada equipa ou projeto. Uma dessas ferramentas – e que tem vindo nos últimos anos a ganhar um grande espaço no mercado – é o Figma.

Ferramentas em constante evolução

O Figma é o projeto de uma startup fundada em 2015, criada por Evan Wallace e Dylan Field, e desde o seu início que tem o objetivo de revolucionar a forma como os designers produzem interfaces para todo o universo de dispositivos digitais. Assente numa lógica de desenho vetorial, a ferramenta reúne em si o melhor de muitos outros softwares que desde sempre dominaram a indústria criativa e a forma como os designers produziam as suas criações.

Mais barato, mais fácil de usar e extremamente versátil, o Figma veio revolucionar em muito a forma de desenhar produtos digitais ao mesmo tempo que incorporou muitos dos conceitos que estão na base dos design systems.

5 Razões para utilizar o Figma

Mas afinal de contas no que é que o Figma pode ajudar a criar um design system, logo na fase de desenho do interface? Esta é das perguntas mais recorrentes e a resposta é, tal e qual como a ferramenta, bastante simples.

O Figma traz de consigo uma série de funcionalidades fáceis de utilizar que tornam a criação e gestão de um design system, bastante simples.

Text, color e effects styles

Quantas vezes no processo de desenho é que é necessário alterar a formatação de um determinado estilo de texto ou uma cor? Quantas vezes é que é preciso corrigir estilos de textos ou sombras nos vários ecrãs? Este é um daqueles temas que qualquer designer conhece e pelo qual já passou certamente. Os text, color e effects styles do Figma ajudam em muito a resolver este desafio. Eles permitem criar uma listagem de estilos, cores e efeitos gráficos e utilizar esses estilos em vários ecrãs diferentes e ainda, ao alterar a formatação desse estilo num ecrã, conseguir atualizar de forma automática o seu aspeto em todos os outros ecrãs do website ou da app.

Components

Se existe algo de revolucionário nas funcionalidades que o Figma disponibiliza aos seus utilizadores, os components são sem sombra de dúvidas uma delas. Esta funcionalidade icónica do Figma possibilita a criação de pequenos ou grandes componentes, copiar esses componentes e em seguida editar todo o seu conteúdo, por exemplo textos ou imagens, mas tendo por base a mesma peça. Se em algum momento for necessário alterar a formatação desses componentes basta alterar o component original e o desenho será atualizado de forma automática em todos os ecrãs, assumindo também o conteúdo inserido no component em cada um desses ecrãs.

Variant components

Quem já alguma vez desenhou utilizando uma lógica de componentes, sabe que a equação não é assim tão simples. Ao desafio de definição do que é ou não um componente é necessário somar a escala de complexidade daquilo a que podemos ou não chamar de componente no interface. Facilmente um componente que parecia bastante simples ao início pode ganhar diferentes funcionalidades e tornar mais complexa a sua padronização. As variants nos components de Figma podem ser uma ferramenta muito poderosa na padronização de componentes no interface, mesmo com todas as suas possíveis variantes.

Auto layout

Ainda sobre componentes e o seu dinamismo, o auto layout do Figma era a peça que faltava para que se possa levar ainda mais longe este conceito. O mesmo componente no desenho dos vários protótipos pode ser utilizado em diferentes contextos ou com diferentes conteúdos. Conforme cada caso será necessário que os espaçamentos dentro dos componentes se vão ajustando a essas novas situações. O auto layout é isto mesmo. Permite definir regras nos componentes gráficos que os tornam dinâmicos face aos conteúdos que possam conter em cada momento.

Libraries

Uma das características de qualquer design system é a sua capacidade de escalabilidade. Isto quer dizer por outras palavras, também na dimensão de desenho, que será necessário garantir que a equipa por mais pequena ou maior que seja siga as mesmas coordenadas gráficas. As libraries podem ser uma ajuda importante nesta demanda. Estes ficheiros partilhados entre todos os ficheiros de um projeto, podem ajudar a que aquilo que são os design tokens e os componentes transversais a todo o produto sejam utilizados de forma bastante fácil por toda a equipa. Estas libraries garantem também, como não poderia deixar de ser que em caso de atualizações todos os protótipos serão atualizados com as novas definições.

A listagem de funcionalidades do Figma que podem ajudar todos os profissionais a desenhar um design system é quase interminável. Para além destas cinco existem muitas outras que, de uma forma muito prática, rápida e económica podem ser uma grande ajuda na construção do design system de qualquer produto digital, deixando espaço às equipas para se focarem no essencial, ou seja, a experiência dos seus utilizadores.

Ilustração © Ana Rute Costa