Um UX designer e um UX writer entram no Figma

Como criar componentes de texto para colaborar

Por Filipa Moreno e Luis Duarte Sousa

Como criar cards de produtos no Figma para agilizar a edição de texto?

Já muito foi dito sobre a importância de ter UX writers a participar nos projetos de UX.

Mas como?

Deixar comentários com conteúdo é coisa do passado. Entrar no final do projeto para uma revisão ligeira de texto também não potencia o valor dos UX writers. E nada disto liberta os UX designers de tarefas como alterar o copy dos ecrãs.

Encontrámos uma forma de promover esta colaboração. Pensem numa agência de publicidade. Agora, pensem numa dupla de designer e writer transformada em task force para agilizar o processo de design ao longo de um projeto.

Este artigo é sobre como criar componentes para facilitar a edição de texto em Figma.

É um tutorial que resulta de tentativa e erro. Se quisermos, é um humilde início de conversa.

A melhor invenção desde o pão fatiado

Escrever para a experiência dos utilizadores é mais do que escolher palavras. Mas também é escolher palavras. E isso, geralmente, demora. Escreve-se, reescreve-se, volta-se atrás. Várias vezes.

Agora, imaginem multiplicar este processo pelo número de palavras em cada ecrã. E depois pelo número de ecrãs do projeto.

Contem ainda com as várias vagas de validação pelas quais o projeto passa antes de ver a luz do dia.

É fazer as contas.

Do MVP à fase seguinte, o projeto torna-se uma Medusa com inúmeros fluxos que serpenteiam por páginas e páginas num ficheiro sem fim.

Quando contemplamos esta floresta que entretanto nasceu, e deixamos de olhar para cada árvore, torna-se óbvio que precisamos de uma solução em escala para:

• agilizar o trabalho: nenhum comboio espera pelos UX writers, precisamos de editar texto rapidamente, para acompanhar os designers de forma útil.
• evitar inconsistências: o botão que nos faz avançar durante o fluxo tem um copy diferente no último passo — conseguimos garantir que está igual em todos os fluxos do produto?
• minimizar erros: se precisarmos de editar os passos de um stepper em 50 ecrãs, à mão, quanto é que apostam que algo vai falhar?

Se criamos componentes com elementos visuais que se repetem ao longo do design, a mesma abordagem pode servir para os textos, porque também muitos deles se repetem. E, na verdade, os textos são parte do design.

Parece uma solução tão simples quanto o pão fatiado. Mas vamos dissecá-la.

Como criar componentes para editar texto no Figma: passo a passo

Este tutorial começa com um exercício de respiração. Antes de começar a desenhar elementos finais, importa parar, pensar e planear.

Em zoom out, perguntemos: que blocos deste Lego vamos precisar de repetir várias vezes? Esses vão ser os nossos componentes.

1. Desenhar o componente.

Se trabalharmos com um design system, começamos por inserir o componente no ficheiro a partir da biblioteca.

Começamos por desenhar ou puxar o componente a partir da biblioteca do design system.

2. Adaptar o componente ao projeto.

Com o que sabemos do nosso produto e o briefing do projeto, podemos fazer as primeiras adaptações do componente ao contexto.

3. Criar o componente local.

Sem medos. O componente é o elemento ou conjunto de elementos que vão repetir-se ao longo do projeto.

Vamos dar-lhe o nome mais específico da sua utilidade no nosso projeto. Por exemplo, card de produto.

Vamos construir o card a usar no nosso projeto: dar-lhe um nome e uma imagem.

4. Duplicar o componente.

Quantas vezes for preciso. Sempre que duplicamos o componente, estamos a criar uma instância. São instâncias do componente local que vamos usar em cada novo ecrã.

Cada vez que duplicarmos o componente no Figma, criamos uma instância.

Do componente para as instâncias e vice-versa

Nesta fase, já conseguimos testar a nossa edição de texto. Basta fazer uma alteração no componente e vê-la a ser replicada nas instâncias, como que por magia.

Não é preciso publicar nem atualizar nada.

Imaginemos que estamos a navegar pelos ecrãs e encontramos um texto que precisa de ser alterado. Basta escolher a opção go to main component e editar diretamente o texto no componente. As alterações devem refletir-se em todas as instâncias ligadas ao componente.

Mas também podemos editar o texto na instância. Depois, escolhemos push changes to main component. Todas as instâncias e o próprio componente são atualizadas com a alteração que acabou de ser feita. O componente local continua a ser o ponto de partida, a que todas as outras instâncias obedecem.

Podemos editar o texto no componente ou na instância. Depois, usamos as ferramentas do Figma para generalizar essas alterações.

Organizar ficheiros: uma arte subestimada (ou um bocadinho de OCD)

Vamos arrumar os nossos componentes locais numa só página e chamar-lhe algo como local components. Sempre que quisermos editar um componente, também podemos ir diretamente a essa página.

Imaginem que entram a meio de um projeto para substituir um colega designer. Herdar um ficheiro organizado, com componentes, frames e layers claramente identificados, é meio caminho andado para um onboarding com sucesso.

Colaborar sem arrependimentos

Esta é uma mensagem para UX writers: não sejam aquele colega que passa o jogo a pedir a bola para depois atirá-la, desajeitadamente, para fora do campo.

Mostrem como acrescentar valor aos projetos com a vossa participação — desde logo, não desarrumando o ficheiro de Figma.

E esta é uma mensagem para UX designers: facilitem a participação dos writers.

Como colaborar sem arrependimentos?

1. Figma 101.

É importante que os UX writers aprendam os básicos da ferramenta de trabalho. Deixar comentários com revisões de copy faz com que alguém tenha de fazer alterações com esse conteúdo. E esse alguém acaba por ser o designer.

Saber editar texto é fundamental para, de forma autónoma, conseguir colaborar num projeto.

2. Auto-layout é vida.

Se não for possível construir um ecrã sabendo, antes, que conteúdo tem de estar lá, então, devemos ter a flexibilidade de alterar o design sem provocar uma avalanche de alterações.

Nem sempre precisamos de um título, um subtítulo e várias linhas de texto para informar os utilizadores. O que se quer esconder numa tooltip deve ser trazido para o ecrã.

O auto-layout permite editar o texto sem ajustar eternamente cada pixel do ecrã. Com menos esforço, é mais fácil manter a consistência do design.

Alternativas

Dá jeito conhecer ferramentas, como o Figma, mas dominá-las é talvez a parte mais fácil do trabalho. (Excepto se estivermos a falar do Excel.) A verdade é que aprender a linguagem de uma ferramenta permite-nos usá-la para atacar problemas maiores, por exemplo, como melhorar a colaboração entre a equipa.

Esta é uma forma de organizar o conteúdo através das funcionalidades que o Figma disponibiliza.

Existem outras soluções, claro.

O Ditto, por exemplo, centraliza todo o copy de um projeto, tratando cada entrada como um componente. Depois, sincroniza as alterações de copy feitas a qualquer texto com o design no Figma, bastando usar o plugin disponível.

Se tudo o resto falhar, find + replace.

Este maravilhoso atalho é uma aprendizagem para a vida e, pasme-se, também funciona no Figma.

Pesquisamos palavras ou expressões, vêmo-las destacadas nas páginas e podemos correr cada termo pesquisado. Podemos substituir todas as ocorrências de uma vez ou uma a uma.

E isto, para quem escreve, dá muito jeito.