Construindo e dimensionando um sistema de design no Figma: um estudo de caso

Publicados: 2022-03-11

Determinar como construir um sistema de design para uma empresa multinacional significa catalogar cada componente e padrão em detalhes meticulosos. É um empreendimento enorme que exige uma visão geral e um foco em detalhes. Veja como um líder de equipe de design system conseguiu isso.

Quando a holding ABB, com sede na Suíça, decidiu criar um sistema de design, o objetivo era unir uma aparência consistente para centenas de produtos de software, muitos dos quais alimentam os sistemas mecânicos que mantêm fábricas, minas e outros locais industriais funcionando. . Não foi uma tarefa fácil para uma empresa com quase duas dúzias de unidades de negócios e cerca de 150.000 funcionários em todo o mundo. Para Abdul Sial, que atuou como designer-chefe de produto na equipe de 10 pessoas do sistema de design da ABB, o dimensionamento da biblioteca de componentes e padrões dependia da manutenção da abertura e transparência, com ênfase na extensa documentação.

O papel de um designer de sistema de design

Cada vez mais, grandes empresas como a ABB têm equipes dedicadas exclusivamente à criação e manutenção de sistemas de design. “Um sistema de design permite consistência, indo ao mercado em tempo justo e não permitindo que a produção fique presa em customizações que não agregam valor”, diz o designer Alejandro Velasco, de Madri. Ou, como explica Alexandre Brito, designer em Lisboa, Portugal, “Os sistemas de design vêm dar estrutura sempre que há muitas pessoas usando o mesmo conjunto de ferramentas. É como se todos tivessem a mesma língua.”

Se um guia de estilo tradicional cobre os fundamentos do design – fontes e cores, por exemplo – um sistema de design tem um alcance muito maior. “Um sistema de design é uma mistura de um guia de estilo, além de componentes de design, padrões de design, componentes de código e, além disso, documentação”, diz Sial. Quando trabalhou no sistema de design da ABB, cerca de 120 designers o utilizavam regularmente. O esforço representou a versão 4.8 do sistema, e a equipe o apelidou de “Design Evolution”.

Os designers de sistemas de design desempenham um papel diferente daqueles que se concentram apenas em produtos individuais. “Você tem uma visão panorâmica de todos os diferentes produtos que uma empresa está usando”, diz Sial.

Trabalhar em operações de design também exige comunicação com as partes interessadas em toda a empresa. “Os designers de sistemas de design precisam ser sociais”, diz Velasco. “Um designer de sistema de design tem que gostar muito de trabalhar e conversar com pessoas que têm diferentes funções dentro de uma organização. Eles precisam ser capazes de distinguir qual feedback incluir para construir o sistema de design em torno das necessidades da empresa.”

O ciclo de vida de um componente

Trabalhando no sistema de design da ABB, Sial foi guiado por uma filosofia abrangente: “Documentação, documentação, documentação”. Para cada elemento reutilizável nos sites da ABB, telas móveis ou grandes telas independentes, Sial queria mostrar o que ele chama de ciclo de vida de um componente. Isso significava uma extensa manutenção de registros para todos os componentes e padrões – migalhas de pão, cabeçalhos, entradas ou botões, para citar apenas alguns. “Quais são as viagens pelas quais passou? Que decisões entraram nisso? Dessa forma, nem sempre estamos recriando tudo. Antes de tentar algo, você pode ler e ver que alguém já testou”, diz Sial.

Em sua experiência, essa filosofia é um desvio da abordagem típica da documentação. No mundo acelerado do desenvolvimento de produtos, por exemplo, a documentação geralmente é escrita no final do projeto ou abandonada completamente. Mas para sistemas de design, diz Sial, a documentação deve ser mais do que uma reflexão tardia. “Um sistema de design nunca é feito; precisa de melhoria contínua”, diz ele. “Criadores e consumidores de sistemas de design querem entender os processos de pensamento e decisões para continuar melhorando.”

A documentação é especialmente importante para um sistema de projeto tão grande quanto o da ABB. “Com uma equipe tão grande, você precisa ser capaz de escalar”, diz ele. “Como podemos garantir que todos que se juntam à equipe possam acessar rapidamente qualquer componente e entender como ele começou, como foi editado e qual versão estão usando?”

Encontrando a ferramenta certa

Existem muitas ferramentas para construir sistemas de design, incluindo Figma, Sketch e Adobe XD. Sial experimentou várias, experimentando uma mistura de ferramentas de design e gerenciamento de projetos antes de se decidir pelo Figma, que oferece amplo espaço para documentação.

Sial e sua equipe determinaram que cada componente deveria ficar em seu próprio arquivo. “Na maioria das vezes, você está trabalhando em um componente de cada vez. Se você colocar todos os componentes em um arquivo, o Figma fica mais lento. Ao dar a cada componente seu próprio arquivo, é mais rápido abrir e você tem todo o histórico e documentação em um só lugar”, diz ele.

Cada componente, padrão e elemento básico — como um ícone — tem seu próprio arquivo no sistema de design. Esta visualização mostra as capas de vários arquivos no sistema ABB.

Configurando a hierarquia

A Sial configurou o sistema de design da ABB para que o arquivo de cada componente e padrão tenha as mesmas páginas. As imagens a seguir detalham o que está em cada página.

Os arquivos neste sistema de design Figma documentam o ciclo de vida de cada componente, padrão e elemento fundamental do site da ABB, incluindo as iterações passadas e atuais.

Tampa

Sial recomenda configurar uma folha de rosto simples para cada componente. No Figma, isso permite uma visualização em miniatura de todos os componentes e ajuda na navegação dos arquivos. Na configuração da ABB, a capa inclui o nome do componente e em que fase ele está: design, desenvolvimento ou lançamento. O status pode ser facilmente atualizado quando o componente progride.

Uma folha de rosto simples inclui o nome do componente junto com seu estágio atual.

Inventário, casos de uso e solicitações

Esta página contém exemplos das várias maneiras pelas quais um componente aparece no produto digital de uma empresa. No caso de um componente de campo de texto, por exemplo, a página de inventário mostraria a aparência do campo de texto em abb.com em comparação com a aparência em um iPhone em comparação com a aparência em um dispositivo Android. “O inventário nos permite entender claramente o que já existe”, diz Sial.

Esta página também deve mostrar as maneiras como o componente está sendo usado incorretamente. “Isso permite que você observe seus produtos e veja onde há alinhamentos e desalinhamentos”, diz Sial. Ele aconselha as equipes que lançam um projeto de sistema de design para começar a catalogar o que já existe. “Comece com o inventário e ele o guiará enquanto você cria o design”, diz ele.

A página de inventário, casos de uso e solicitações explica e ilustra as várias maneiras pelas quais os campos de texto aparecem nos produtos da ABB.

Referências, melhores práticas e análise competitiva

Sial aconselha a criação de uma seção de cada arquivo de componente semelhante a um quadro de visão, mostrando como outras empresas projetam peças comparáveis. “Como com qualquer outra coisa, a melhor prática é realizar análises competitivas e ver como outras pessoas estão fazendo isso”, diz ele. “Observe outros produtos e veja seus aprendizados.”

No sistema de design da ABB, Sial incluiu exemplos do Material Design do Google e do Carbon Design System da IBM.

Testes e dados

A página de dados de resultados de teste agrega todos os dados relacionados ao teste de um componente, incluindo os resultados de testes A/B e feedback de usuários e partes interessadas. Resumindo, Sial diz: “É toda a história de um componente”. Talvez a equipe de design tenha tentado uma nova variação há dois anos e descobriu que não funcionou? “Talvez tenhamos trabalhado nessa variação e a descartamos por algum motivo”, diz ele. Nesse caso, esse tipo de histórico pode economizar um tempo significativo, garantindo que os designers não tentem novamente.

Alcance

A próxima página apresenta o escopo de um componente para que os designers possam realizar um projeto. Quando chegam à página do escopo, Sial diz: “Você tem uma história. Você entende o estoque de todos os produtos. Você sabe o que precisa construir e conhece os requisitos. Agora é hora de anotá-lo e fazer um resumo disso.” Ele acrescenta que a criação do escopo deve ser um processo colaborativo com os proprietários do produto, desenvolvedores e designers.

A página de escopo define as regras para projetar o componente.

Versões

Imagens das versões finais do componente são encontradas aqui, com a última iteração fixada no topo. Outros designers devem poder revisá-lo e comentá-lo.

Esta página mostra a aparência de um campo de texto em vários cenários nos vários sites e aplicativos da empresa.

Caixa de areia

A sandbox permite que os designers experimentem diferentes iterações de um componente ou padrão diretamente no Figma. “Pode ser confuso e não há padronização”, diz Sial. “É apenas um playground onde um designer tem a liberdade de fazer qualquer coisa.”

A página de sandbox permite que um designer ou desenvolvedor experimente diferentes maneiras de criar o componente.

Componente Figma

O arquivo também contém uma página para o próprio componente Figma, um elemento de interface do usuário que é facilmente repetível em todo o sistema de design. O designer pode fazer alterações no componente, e essa alteração será preenchida em todas as instâncias desse componente em toda a empresa, mantendo tudo consistente. Esta página será exportada para a biblioteca do sistema de design Figma, e qualquer designer individual pode arrastar e soltar o componente Figma em seu design. Se a equipe do sistema de design precisar fazer uma alteração no componente, ela poderá fazê-lo uma vez e implantá-lo em toda a empresa.

Os componentes Figma permitem que um designer faça uma mudança universal quando um design é atualizado.

Regras de estilo

Em seguida, os designers e desenvolvedores do sistema de design criam a página de regras de estilo, uma espécie de pega-tudo para elementos que, diz Sial, “não são visíveis no design”. Por exemplo, como o componente será renderizado quando você rolar a página para baixo? É também onde a equipe do sistema de design acompanha as questões ou problemas não resolvidos. Ele diz que ficou surpreso com o quão integral essa página se tornou: “No começo, pensamos que esta página não era tão importante, mas agora percebemos que passamos a maior parte do nosso tempo aqui”.

Entregar

As notas de entrega são as instruções para desenvolvedores sobre como escrever o código para o componente. O documento de entrega começa com a anatomia do componente e depois inclui suas variações.

Os documentos de transferência do sistema ABB também incluem tokens de design. Tornando-se cada vez mais populares em sistemas de design de grande escala, como os da ABB, os tokens de design são informações de estilo agnóstico de plataforma sobre elementos da interface do usuário, como cor, tipo de letra ou tamanho da fonte. Com tokens de design, um designer pode alterar um valor - indicar que um botão de call-to-action deve ser laranja em vez de azul, por exemplo - e essa alteração será preenchida em todos os lugares em que o token for usado, seja em um site, iOS, ou plataforma Android.

A página de transferência inclui tokens de design, representados acima por círculos verdes. Os tokens de design facilitam para um desenvolvedor divulgar uma alteração de design em todas as plataformas.

Sial também criou um plug-in de token Figma para expandir o escopo de tokens que os designers podem criar no Figma. “O Figma suporta cores, tipografia, sombras e estilos de grade”, diz ele. O plug-in gerará tokens para mais variáveis, como opacidade e largura da borda. Ele também cria uma convenção de nomenclatura padronizada, para que os designers não precisem acompanhar os nomes dos tokens manualmente. “O plug-in preenche a lacuna entre desenvolvedores e designers. Permite que ambos trabalhem em uma única fonte de verdade para o design; se alguém fizer uma mudança em um lugar, essa mudança terá efeito em todos os lugares no design e no código”, diz ele.

Sial projetou um plug-in de token Figma para simplificar o processo de criação de tokens de design no Figma.

Sial ressalta que em seu sistema, os desenvolvedores têm um papel ativo durante toda a criação de um componente. “No início, envolvíamos nossos desenvolvedores quando tínhamos algo pronto para mostrar a eles”, diz ele. “Então percebemos que não estava funcionando e agora começamos literalmente as sessões de kickoff com eles.”

Página da Documentação

A última página de cada arquivo contém uma página da Web com o design final, mostrando a aparência do componente como um produto acabado. “Criamos uma página que mostra como o exemplo ao vivo ficará para que os usuários, neste caso nossos designers, possam ver como ficará no final do dia em um site real”, diz Sial.

A página da Web de documentação é publicada no sistema interno da ABB para mostrar aos interessados em toda a empresa como o componente ficará quando estiver ativo em um site ou aplicativo.

Colaboração é a chave

O papel de um designer de sistema de design é multifacetado. Como Alejandro Velasco diz: “Projetar um sistema de design envolve muitos papéis e, se estou liderando isso, sou a cola para o projeto”.

É um empreendimento enorme e não necessariamente o movimento certo para todas as empresas. As startups, por exemplo, podem fazer melhor se começarem com um sistema pronto para uso, como o Google Material Design ou o IBM Carbon Design System, em vez de dedicar recursos extensivos à criação de um. Ainda assim, pode chegar o momento em que isso não será suficiente, diz Alexandre Brito: “Assim que você tem vários designers trabalhando juntos, você começa a perceber que há necessidade de alguém para construir regras mais alinhadas com o produto ou marca que você está construindo.”

Construir um sistema de design exige trabalho e dedicação; também requer colaboração. Sial destaca que o envolvimento de todas as partes interessadas no desenvolvimento do sistema da ABB durante todo o processo foi uma prioridade. “Foi um trabalho realmente iterativo com toda a minha equipe. Era tudo uma questão de ouvi-los e aproveitamos o tempo para aprender e testá-lo completamente e desenvolver essa estrutura ”, diz ele.

Ter uma estrutura que inclui extensa documentação, incluindo histórico e melhores práticas, está no centro do sistema de design Figma. “É um sucesso porque as pessoas podem ler a documentação em um só lugar”, diz Sial. “Eles podem ver tudo, desde o caso de uso até o design e passando para a entrega e a página final do componente. As pessoas podem ver todo o ciclo de vida de um componente.”

Você pode navegar pelo arquivo Figma de Abdul Sial na íntegra aqui: Component Template .