Mini Tutorial – Aproveitando os recursos do Figma para todo o processo de design

Publicados: 2022-03-11

O mundo das ferramentas de design emergentes é incrivelmente empolgante. Novos programas promissores estão sendo lançados em rápida sucessão, mas há um em particular que lentamente se tornou a melhor escolha para equipes de design maiores e principalmente distribuídas.

O Figma tem o potencial de apoiar todo o processo de design de ponta a ponta. Primeiros esboços, coleta de feedback, colaboração, protótipos prontos para teste e entrega do desenvolvedor estão dentro de suas capacidades. O Figma também simplifica o trabalho dos gerentes de produto e líderes de design, bem como de todas as outras partes interessadas.

Então, o que diferencia a Figma da concorrência? Existem vários aspectos-chave, mas todos eles podem ser rastreados até o fato de que o Figma é baseado na web. Isso levantou muitas sobrancelhas quando a ferramenta foi lançada pela primeira vez, mas, no final das contas, abriu o caminho para a flexibilidade e funcionalidades únicas do Figma.

Os recursos do Figma incluem design, prototipagem, colaboração, sistemas de design e plugins

O que é fundamental para um processo de design de produto suave?

Embora seja verdade que cada equipe e projeto possam ter um fluxo de trabalho diferente, existem funções e fases que são componentes essenciais do design e gerenciamento do produto. Figma cobre cada um.

Acessibilidade e colaboração . Independentemente das ferramentas que uma equipe usa, é preciso haver uma maneira de trabalhar em conjunto, apresentar projetos, coletar feedback e manter as partes interessadas informadas. Todos esses recursos estão disponíveis no Figma.
Flexibilidade para iterar e produzir entregáveis . O Figma é flexível e pode ser usado como um quadro colaborativo para esboçar ideias iniciais e iterar tudo, desde wireframes a maquetes de alta fidelidade.
Capacidade de construir protótipos e testar . Projetando um aplicativo móvel? Construa e publique protótipos interativos e teste-os diretamente em smartphones – tudo da Figma.
Estabelecendo uma única fonte de verdade . O Figma é uma excelente maneira de definir sistemas de design de produtos que residem completamente online. É uma única fonte de verdade por padrão. Chega de se perguntar: "Esta é a versão mais recente?"
Entrega suave . Basta compartilhar um link com os desenvolvedores e eles terão acesso a todas as informações necessárias para implementar o design – linhas de marcação, medidas e recursos gráficos prontos para serem exportados.
Versatilidade a ser customizada e melhorada . A API de plugins do Figma permite que as equipes escrevam seus próprios plugins ou acessem a comunidade de usuários mais ampla e estendam a ferramenta com novas funcionalidades.

1. Acessibilidade e Colaboração

Coloque a equipe a bordo

Vamos dar uma olhada em como o Figma contribui para as seis áreas principais cobertas acima. Novos usuários podem querer criar uma conta gratuita do Figma, configurar uma equipe e assistir a começar com o Figma. Depois que uma equipe for criada, convide os membros da equipe e as partes interessadas relevantes para participar.

Existem três níveis de acesso disponíveis. É bastante autoexplicativo, mas geralmente os direitos de edição são concedidos à equipe de design e os direitos de visualização a todos os outros. Isso inclui desenvolvedores e outras partes interessadas que precisam acompanhar o processo de design e fornecer feedback.

Opções de compartilhamento semelhantes estão disponíveis no nível da equipe (mostrado acima), no nível do projeto e no nível do arquivo. Se os níveis de acesso não forem especificados, eles serão propagados da equipe para o projeto e do projeto para os arquivos.

Como o Figma está disponível no navegador, não importa como alguém é convidado ou em que sistema ele está. Contanto que o dispositivo e o navegador que eles usam atendam aos requisitos mínimos, eles podem entrar direto com um link e a interface muda de acordo com os direitos de edição ou visualização.

Incorporando um arquivo de projeto

Os arquivos de projeto Figma podem ser incorporados em software de terceiros. Por exemplo, um documento compartilhado do Dropbox Paper pode ser usado para apresentar o estado atual de um projeto.

Para incorporar arquivos de projeto, defina a visibilidade do arquivo como Qualquer pessoa com o link - pode visualizar , copiar o código de incorporação e incorporar o arquivo de projeto em qualquer software de terceiros que suporte embed.ly.

Comentários e revisões

Outra funcionalidade importante para o processo de design do produto é a capacidade de distribuir designs, coletar feedback e gerenciar revisões. Qualquer pessoa com um link do Figma pode ver a versão mais recente e comentar diretamente sobre o ponto sobre o qual deseja dar feedback.

Para marcar os membros da equipe, use o caractere @ e o sistema apresentará uma lista de nomes para escolher. Isso notifica os membros da equipe e, uma vez processado o feedback, as discussões podem ser encerradas clicando em Resolver .

Para manter as equipes alinhadas, há uma boa integração que pode publicar discussões dos arquivos do Figma em um canal designado do Slack.

Colaboração em tempo real

Uma das funcionalidades mais intrigantes do Figma é o que eles chamam de multiplayer . Ele permite que vários membros da equipe abram e trabalhem em um arquivo de design ao mesmo tempo. Todos que trabalham no arquivo ficam visíveis no canto superior direito da página, e seus avatares são nomeados e clicáveis.

Pode levar algum tempo para avaliar o que isso significa em termos práticos. Embora seja improvável que os designers usem o multiplayer para trabalhar simultaneamente na mesma parte de um arquivo, é incrivelmente reconfortante não ter que se preocupar com o conflito de versão do arquivo, especialmente para equipes distribuídas maiores.

O modo multijogador é útil ao apresentar remotamente porque possibilita que todos os conectados ao arquivo sigam a janela de visualização do apresentador. Ele também permite que as equipes ignorem programas adicionais e usem o Figma como um quadro branco online (embora soluções específicas, como o Miro, possam ser mais adequadas para o trabalho).

Para isso, é aconselhável criar componentes personalizados para replicar ativos específicos como post-it virtuais ou elementos de diagrama.

2. A flexibilidade para iterar e produzir entregáveis

Uma vez que os membros da equipe foram convidados e os esboços iniciais estão em andamento, o Figma pode ser usado para iterar. A principal razão pela qual o Figma foi criado é o design da interface - com o quadro branco finalizado, as equipes podem migrar para mapas de fluxo e wireframes. Novamente, é inteligente construir bibliotecas de componentes que possam ser reutilizadas para essas tarefas. A coleção de modelos oficiais fornece inspiração e arranjos de design para começar.

3. A capacidade de construir protótipos e testar

É muito fácil criar protótipos interativos com o Figma. Quando um arquivo Figma é aberto com direitos de edição, é possível alternar entre o modo de design e prototipagem. Uma vez no modo protótipo, é possível clicar em um elemento para torná-lo interativo, seja do palco ou da barra lateral de camadas.

Com um elemento selecionado no modo Protótipo, um pequeno círculo aparece na lateral. Ao arrastar, aparecem linhas azuis, podendo ser soltas na tela ou estado para mostrar o resultado da interação.

Transições comuns estão disponíveis no Figma, facilitando muito a criação de protótipos de alta fidelidade. De fato, a equipe do Figma lançou recentemente um recurso inteligente de animação e acionamento de arrastar. O aspecto de animação inteligente interpola o movimento de elementos semelhantes, enquanto o acionador de arrastar é um novo tipo de interação. Ambos melhoram drasticamente a qualidade dos protótipos interativos.

Teste de usuário

Novamente, um link é tudo o que é necessário para distribuir os protótipos do Figma, mesmo para testes com usuários. Clicar no pequeno ícone de reprodução no canto superior direito inicia o protótipo e uma nova URL é gerada. É possível copiar a URL ou usar o botão azul Compartilhar protótipo . Depois que os usuários abrem o link, eles são apresentados a um protótipo interativo e podem deixar comentários, se desejarem.

Testando no celular

Projetos para dispositivos móveis são apresentados com uma maquete de um dispositivo real em torno do protótipo. Se for necessário mais realismo para testar a interação, é melhor baixar o aplicativo Figma Mirror para testes específicos do dispositivo.

4. Estabelecendo uma única fonte de verdade

Histórico de versões

Não seria ótimo se os arquivos do projeto estivessem sempre atualizados e com backup constante? Esta funcionalidade está incluída no Figma por padrão. Cada arquivo é salvo automaticamente enquanto se trabalha nele, e o Figma cria uma nova entrada no histórico de versões após 30 minutos de inatividade. Um log de todas as versões salvas automaticamente é criado e cada versão pode ser restaurada, se necessário.

É claro que o controle de versão automático não é a única opção para salvar o trabalho. É possível salvar uma versão manualmente ou editar uma versão específica no histórico de versões.

Sistemas de design e bibliotecas de componentes

Outro aspecto em que o Figma se destaca é como ele permite que os designers criem, organizem e distribuam bibliotecas de componentes. Qualquer arquivo pode ser publicado como uma biblioteca, e cada cor, estilo de texto, efeito, grade ou componente está disponível para ser usado em outros arquivos Figma.

Quando são feitas alterações em qualquer elemento de uma biblioteca, as edições podem ser publicadas e propagadas para arquivos que usam esses elementos. Os designers que trabalham nesses arquivos podem decidir aceitar ou não as edições.

A capacidade de decidir como distribuir bibliotecas, combinada com a opção de alternar a visibilidade ou invisibilidade dos elementos da biblioteca, torna toda a experiência suave e poderosa.

Componentes e bibliotecas podem ser aninhados para criar sistemas de design sofisticados onde tudo é versionado e atualizado para todos os envolvidos. E todos os componentes podem ser anotados com comentários.

5. Transferência Suave

Transferência do desenvolvedor

Com o Figma, designers e desenvolvedores não precisam de uma ferramenta separada, como o Zeplin, para gerenciar o handoff. Eles podem simplesmente abrir arquivos e alternar para o modo de código na barra lateral direita, mesmo com acesso somente visualização.

Quando o modo de código está ativo, a seleção de um elemento no palco revelará todas as informações relevantes necessárias para implementação, e todas as outras informações sobre a posição do componente em relação a outros elementos estarão visíveis. Assim como em soluções semelhantes, o código gerado não deve ser totalmente copiado e colado, mas é útil ter um acesso tão fácil.

Elementos da interface do usuário do Figma

6. A Versatilidade para ser Customizada e Aprimorada

APIs do Figma e plugins personalizados

A API e o sistema de plug-ins da Figma facilitam para uma ampla variedade de equipes e disciplinas de design personalizar o programa para suas necessidades específicas de processo. A flexibilidade do Figma oferece aos usuários a capacidade de interagir programaticamente com a plataforma. Alguns exemplos:

Usando dados reais

É imensamente valioso poder usar dados reais em maquetes e protótipos, e o Figma torna isso possível ao permitir a importação de conteúdo de fontes externas. Aproveitando o conteúdo real, é possível testar componentes de design, manter os modelos atualizados e envolver equipes que não estão relacionadas ao design.

Um plug-in chamado Google Sheets Sync é um exemplo perfeito do que pode ser feito. Este plug-in simplifica a integração do Google Sheets como fonte para preencher e sincronizar o conteúdo dos componentes nos arquivos do Figma.

Fluxos de trabalho avançados

A capacidade de abrigar um sistema de design em um programa de design de interface do usuário só é valiosa se o sistema for implementado de forma consistente em telas voltadas para o cliente. Felizmente, existem APIs, plugins e integrações do Figma que podem ajudar.

O complemento Storybook sincroniza os arquivos do Figma e mostra os componentes de design do Figma em um painel ao lado dos componentes implementados. Outro caso de uso interessante é o Figma to React Converter, um aprimoramento de fluxo de trabalho que converte os componentes do Figma em código.

Prototipagem com Figma: Um conversor Figma para Reagir — Usando o Figma to React Converter para atualizar o estilo em uma lista classificável.

Os recursos do Figma são ideais para todo o processo de design

Não existe um programa de design único que possa lidar com as necessidades de cada designer ou problema de design, e isso é uma coisa boa. A competição entre as ferramentas de design é vantajosa para os designers. Ele garante que as empresas que fabricam nossas ferramentas ouçam o que precisamos e nos forneçam recursos atualizados adequados aos trabalhos que fazemos.

Dito isto, o Figma é uma ferramenta avançada e intuitiva que provou ser mais do que capaz de lidar com todo o processo de design digital. Designers individuais e equipes podem se beneficiar de seus recursos exclusivos de colaboração e iteração e, onde o programa fica aquém, uma enorme seleção de plug-ins preenche o vazio.

• • •