môre
môre · Destrinchando o Figma
Uma aula de Figma para cortar retrabalho
Visão geral
Na pressa de entregar jornadas, telas e componentes, arquivos chegavam mal construídos no Figma, e os detalhes voltavam depois como bug, layout quebrado e desenvolvimento errado. Para cortar esse retrabalho, montamos uma aula de boas práticas, que em janeiro de 2023 virou a edição do Môre Bastidores, o encontro mensal da môre, aberta também a designers de fora.
Material de consulta
Feita para ficar à disposição do time: quem tem dúvida volta aos slides quando precisa, sem depender de quem apresentou.
O porquê de cada recurso
Cada recurso aparece com o motivo de existir e o efeito no resto do processo, do design ao código.
Receba conhecimento
É muita informação de uma vez, então memes e exemplos visuais ajudam a fixar. Complexo não quer dizer difícil: o resto se assimila no dia a dia.
Recorde de público
A edição teve a maior audiência já registrada no Môre Bastidores e retorno positivo de quem assistiu.
O processo
Como a ideia surgiu
O retrabalho constante consumia tempo e energia do time. A aula foi pensada primeiro para o estudo de caso da Team Library, mas o cliente não liberou esse tema para o evento. Em uma conversa com a gestão, em dezembro de 2022, o tema passou a ser as boas práticas que evitam esse retrabalho.
Na prática
Com o arquivo bem construído, mexer numa área reorganiza o resto da tela sozinho, a estrutura já indica como cada parte se comporta em cada tamanho de tela, os protótipos ficam mais leves e o desenvolvimento encontra tudo explicado. Menos tempo procurando o que quebrou, mais tempo para pensar o produto.
A apresentação
A aula segue a ordem em que um arquivo é construído: primeiro o porquê, depois as regras de construção, o auto layout, os componentes e, no fim, dicas e benefícios. O Figma aparece como ferramenta do processo inteiro, do discovery ao hand-off, e não só de layout.
Divulgação
Peças do evento e o post no LinkedIn da série Destrinchando o Figma. A gravação ficou no canal da môre no YouTube.
Aplicada de novo, já evoluída
A mesma aula foi levada depois ao time de Design da Nutrien na América Latina, atualizada com o que o Figma tinha de novo:
- A aba Inspect deu lugar ao Dev Mode
- O auto layout ganhou quebra de linha
O que vem depois
Nossos próximos passos para evoluir o material:
- Uma parte 2, com variáveis e protótipos
- O uso de inteligência artificial a partir de arquivos bem construídos no Figma
- Mais adiante, um curso aberto ao público
Impacto
Menos retrabalho e mais tempo para ideação e evolução do produto.