Um UX designer e um UX writer entram no Figma
Como criar componentes de texto para colaborar
Por Filipa Moreno e Luis Duarte Sousa
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.
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.
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ã.
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.
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.