As Variáveis ajudam a Adyen a simplificar seu design system usando o Figma

A Adyen opera na vanguarda da indústria de Fintech em rápida evolução. A plataforma de tecnologia financeira oferece aos comerciantes pagamentos de ponta a ponta, dados e gerenciamento financeiro em uma única plataforma. Com a Adyen tendo total controle sobre o fluxo de pagamentos, os comerciantes não precisam gerenciar vários fornecedores, mas podem se conectar a uma única plataforma - um benefício mútuo.

A Adyen pretende oferecer o conjunto de portais fintech mais focado no cliente e eficiente do mercado, com grande valor atribuído à experiência do usuário. Portanto, não é de se admirar que a Adyen tenha uma equipe de design UX de 70 pessoas: 44 designers de produto, 15 em pesquisa de UX e 11 redatores de UX.

Historicamente, manter todos alinhados poderia ser um desafio... ao usar ferramentas de design anteriores, a empresa enfrentava processos desconexos e fluxos de trabalho complicados e ineficientes.

Em seguida, a empresa otimizou seu design system e processos usando o Figma e o FigJam.

Fazendo a transição para o Figma

A equipe de design da Adyen identificou que precisava de uma base sólida para agilizar as operações de design e, portanto,criou um novo design system - chamado Bento - no Figma. Eles estão no processo de transferir todas as equipes para o Bento - que possui Fundamentos, Ícones, Componentes, Padrões, Utilitários e Arquivos - a partir do design system comunitário que algumas equipes ainda estão usando.

Bento trouxe novos níveis de eficiência e estrutura à forma como a equipe de design da Adyen trabalha. Tomando Utilitários como exemplo, é aqui que eles mantêm o sistema de componentes de sistema (SOS), usado para construir a documentação do design system. “Todas as peças são distribuídas para as equipes como bibliotecas e o Figma tornou realmente simples aplicar mudanças e atualizações aos estilos/instâncias de componentes,” diz Luiza Breier, Líder de Design na Adyen, que acrescenta que as bibliotecas do design system estão ativadas por padrão para todas as equipes.

Um dos desafios interessantes foi como habilitar o suporte a múltiplos temas para suas equipes. Eles resolveram isso criando um sistema de cores em várias camadas.

A camada central tem todas as definições de cores que não estão disponíveis para designers ou engenheiros, mas servem como uma paleta de seleção para a equipe do design system. Acima da camada central, eles construíram uma camada semântica que possui cores definidas por seu papel na UI em vez de sua matiz.

A camada semântica está disponível para designers e engenheiros usarem em seu trabalho de design/construção de produtos. Essa camada permite que os designers criem produtos com os funções em mente.

As cores semânticas nos designs funcionam em diferentes modos de cor (claro/escuro). Originalmente, a Adyen usava estilos de cor para isso, mas não queria sobrecarregar seus designers com cores para ambos os modos claro e escuro, então fez apenas cores de modo claro por padrão. Após a introdução de Variáveis, esse problema foi resolvido pelo Figma imediatamente.

A Adyen migrou cores, espaçamentos e raios de borda para Variáveis e atualizou todos os componentes do Figma com essas variáveis.

“Agora, com Variáveis, mudar um tema leva apenas alguns cliques e é totalmente automatizado. Os designers podem criar em modo claro, então mudar para o modo escuro para garantir que as cores semânticas que selecionaram estão corretas e funcionam como esperado no modo escuro,” diz Sergii Polkovnikov, Designer de Produto na equipe Bento.

Além de usar o Figma para acelerar processos, Luiza e equipe trabalham duro para entender como o design system está sendo usado. Designers utilizam análise de design system no Figma Enterprise para acompanhar o uso, e também criaram seu próprio painel usando a API do Figma.

“Isso significa que podemos rastrear todas as importações de componentes usadas no Figma, quantas instâncias, quais equipes estão usando o quê, etc,” ela diz. “Significa que podemos ver quando alguém desanexa um componente - temos um link que vai diretamente para o arquivo Figma, onde o componente desanexado está destacado.”

Acompanhando as coisas desta forma ajuda a equipe de design systems a entender como as migrações estão indo, e lhes dá visibilidade sobre qual designer desanexou um componente para que possam falar com ele e entender o caso de uso.

FigJam simplifica o planejamento estratégico

A colaboração no fluxo de trabalho mudou de outras maneiras também. A equipe de design system da Adyen usa o FigJam como uma ferramenta para planejamento estratégico e como uma plataforma para recursos e conhecimentos compartilhados. Isso melhorou a colaboração visual em algumas áreas.

Eles usam o FigJam para manter sua visão de produto atualizada para alinhar dentro e fora da equipe, desde brainstorming online até ajudar os envolvidos em outras equipes, como engenharia, a refletir sobre suas prioridades.

O FigJam também se tornou crucial para retrospectivas de equipe e planejamento trimestral, ajudando designers a refletirem sobre como colaboram, e decidir sobre pontos de ação concretos para melhorar como trabalham.

Melhorias interempresariais com o Figma

A combinação de Figma e FigJam melhorou fundamentalmente a forma como a Adyen usa seu design system ao trazer recursos para uma única plataforma, criando uma experiência perfeita e adicionando altos níveis de colaboração.

A empresa agora consegue controlar melhor os custos, com uma gestão mais poderosa das permissões de edição, atribuindo propriedade em todos os departamentos e otimizando o uso de acessos.

Os designers também estão economizando tempo através de feedback mais rápido, reutilizando trabalhos com mais facilidade, projetando e fazendo mudanças rápidas usando Variáveis, e usando automação da API do Figma para otimizar os fluxos do design system.

Mas uma das melhores coisas sobre mudar para o Figma, diz a empresa, é como ele tem ajudado a facilitar a colaboração e o compartilhamento de arquivos em uma equipe que cresceu de oito designers para 70 pessoas.

“Por ser baseado na nuvem, o Figma permite que eles colaborem em toda a empresa, em diferentes departamentos, para mostrar o trabalho, obter feedback e contribuições rápidas e obter uma vantagem no dinâmico setor de tecnologia financeira”, diz Luiza.