O poder do Figma como ferramenta de design

O Figma é uma ferramenta de design baseada em nuvem que é semelhante ao Sketch em funcionalidades e recursos, mas com grandes diferenças que tornam o Figma melhor para a colaboração em equipe. Para aqueles céticos em relação a essas afirmações, explicaremos como o Figma simplifica o processo de design e é mais eficaz do que outros programas para ajudar designers e equipes a trabalharem juntos com eficiência.

Vamos olhar mais de perto.

Figma funciona em qualquer plataforma

O Figma funciona em qualquer sistema operacional que execute um navegador da web. Macs, PCs com Windows, máquinas Linux e até Chromebooks podem ser usados ​​com o Figma. É a única ferramenta de design desse tipo que faz isso e, em lojas que usam hardware com sistemas operacionais diferentes, todos ainda podem compartilhar, abrir e editar arquivos Figma.

Em muitas organizações, os designers usam Macs e os desenvolvedores usam PCs com Windows. A Figma ajuda a reunir esses grupos. A natureza universal do Figma também evita o incômodo do PNG-pong (onde as imagens atualizadas são alternadas entre as disciplinas da equipe de design). No Figma, não há necessidade de um mecanismo de mediação para tornar o trabalho de design disponível para todos.

A colaboração no Figma é simples e familiar

Como o Figma é baseado em navegador, as equipes podem colaborar como fariam no Google Docs. As pessoas visualizando e editando um arquivo são mostradas na parte superior do aplicativo como avatares circulares. Cada pessoa também tem um cursor nomeado, portanto, rastrear quem está fazendo o que é fácil. Clicar no avatar de outra pessoa amplia o que ela está visualizando naquele momento.

A colaboração de arquivos em tempo real ajuda a mitigar o “desvio de projeto” – definido como interpretação incorreta ou desvio de um projeto acordado. O design drifting geralmente acontece quando uma ideia é concebida e implementada rapidamente enquanto um projeto está em andamento. Infelizmente, isso muitas vezes leva ao desvio do projeto estabelecido, causando atrito e retrabalho.

Usando o Figma, um líder de design pode fazer check-in para ver o que a equipe está projetando em tempo real simplesmente abrindo um arquivo compartilhado. Se um designer de alguma forma interpreta mal o resumo ou a história do usuário, esse recurso permite que o líder do design intervenha, corrija o curso e economize inúmeras horas que, de outra forma, seriam desperdiçadas. (Em comparação, as equipes que usam o Sketch não têm uma maneira imediata de saber se os designers estão se perdendo.)

Nota lateral: Alguns designers não gostam de ser “espionados” quando estão trabalhando, então cabe ao líder do design explicar os benefícios. Em geral, a maioria dos designers vê rapidamente o valor desse recurso e se adapta facilmente ao trabalho em um ambiente compartilhado.

Figma usa Slack para comunicação em equipe

A Figma usa o Slack como seu canal de comunicação. Quando um canal do Figma é criado no Slack, quaisquer comentários ou edições de design feitas no Figma são “desabrigados” para a equipe. Essa funcionalidade é crucial ao projetar ao vivo porque as alterações em um arquivo Figma atualizarão todas as outras instâncias em que o arquivo estiver incorporado (uma possível dor de cabeça para os desenvolvedores). Alterações em uma maquete, garantidas ou não, são imediatamente verificadas e o canal de feedback é ativo.

O compartilhamento do Figma é descomplicado e flexível

O Figma também permite o compartilhamento baseado em permissões de qualquer arquivo, página ou quadro (chamado de prancheta em outras ferramentas de design). Quando um link de compartilhamento é criado para um quadro em uma página, a pessoa que clicar nesse link abrirá uma versão de navegador do Figma e uma visualização ampliada do quadro será carregada.

Essa forma de compartilhamento seletivo, do arquivo ao quadro, permite que designers, proprietários de produtos e desenvolvedores compartilhem exatamente o que é necessário em ferramentas de rastreamento de bugs e software comunitário como Confluence ou SharePoint.

Os arquivos Figma incorporados fornecem atualização em tempo real

O Figma também compartilha trechos de código de incorporação ao vivo para colar um iFrame em ferramentas de terceiros. Por exemplo, se o Confluence for usado para exibir arquivos de maquete incorporados, esses arquivos não serão “atualizados” salvando um arquivo Figma - esses arquivos incorporados SÃO o arquivo Figma.

Se uma alteração for feita no modelo por qualquer pessoa no Figma, essa alteração poderá ser vista ao vivo no modelo incorporado do Confluence. (Você pode ler mais sobre a integração Figma e Confluence aqui.)

O efeito desse recurso no processo de UX é ilustrado no diagrama a seguir:

Antes do Figma, várias outras ferramentas eram usadas para facilitar a troca de maquetes e atualizações de design. O ciclo de iteração era uma série de atualizações de arquivos para frente e para trás, para que as equipes pudessem revisar e implementar o design atual.

Após o Figma, as ferramentas de terceiros não são mais necessárias (mas podem ser usadas se desejado). Como o Figma lida com a funcionalidade das ferramentas de terceiros descritas anteriormente, há apenas uma etapa no processo - passar dos esboços para o Figma e todos os grupos terão os modelos mais recentes. Não há “transferência” no sentido mais estrito da palavra.

Figma é ótimo para comentários de revisão de design

O Figma oferece suporte a comentários no aplicativo nos modos de design e prototipagem, e o encadeamento de comentários é rastreado no Slack e/ou e-mail. Não há necessidade de publicar arquivos PNG ou realizar atualizações constantes para obter feedback de uma equipe usando uma ferramenta de terceiros como InVision ou Marvel.

Durante as revisões de design, os designers da equipe podem discutir seu trabalho em uma tela grande, registrar comentários e corrigir problemas - tudo no Figma. Essa forma de feedback ao vivo não é possível com o Sketch, que requer o upload para um serviço de nuvem para obter informações da equipe.

A transferência do desenvolvedor é facilitada usando o Figma

O Figma exibe trechos de código em qualquer quadro ou objeto selecionado nos formatos CSS, iOS ou Android para os desenvolvedores usarem ao revisar um arquivo de design. Os componentes de design podem ser inspecionados por qualquer desenvolvedor em qualquer arquivo que eles possam visualizar. Não há necessidade de usar uma ferramenta de terceiros para obter as informações. Mesmo assim, o Figma tem integração total com o Zeplin se as equipes quiserem fazer mais do que simples medição e exibição de CSS.

Os arquivos do projeto Figma residem em um só lugar - online

Como o Figma é um aplicativo online, ele lida com a organização de arquivos exibindo projetos e seus arquivos em uma visualização dedicada. O Figma também suporta várias páginas por arquivo, como o Sketch, para que as equipes Agile possam organizar seus projetos de forma lógica:

• Crie um projeto para o tema do recurso.
• Crie um arquivo para um recurso épico ou grande.
• Crie páginas nesse arquivo para cada história de usuário.

Este é apenas um método de organização de arquivos que pode ser mais ou menos granular dependendo do que o processo exige.

APIs Figma fornecem integração de ferramentas de terceiros

O Figma agora possui APIs de desenvolvedor para permitir uma verdadeira integração com qualquer aplicativo baseado em navegador. As empresas estão usando isso para integrar exibições em tempo real de arquivos de design em seus aplicativos. Por exemplo, a Uber tem telas grandes exibindo arquivos de design “ao vivo” em torno de sua empresa. Os designs são compartilhados e o feedback é bem-vindo de qualquer pessoa da empresa.

O software JIRA da Atlassian implementou um complemento Figma para que proprietários de produtos, desenvolvedores e engenheiros de qualidade estejam sempre visualizando a versão mais recente de qualquer maquete dos designers.

Além disso, a API da Figma promete atender às solicitações dos clientes para plugins de terceiros e aprimoramentos de recursos que o Sketch já fornece.

O controle de versão de arquivo é automático ou sob demanda

Qualquer incerteza em torno da atualização de arquivos ao vivo é ainda mais mitigada pelo sistema de versão integrado do Figma. A qualquer momento, um designer pode criar uma versão nomeada e uma descrição de um arquivo Figma; isso pode ser feito imediatamente após as alterações acordadas serem feitas em um projeto.

O arquivo ativo no ambiente compartilhado não será afetado até que as alterações sejam deliberadamente confirmadas na versão original. Também é possível restaurar qualquer versão salva automaticamente para criar uma duplicata ou substituir a original.

A prototipagem no Figma é simples e intuitiva

Enquanto o Sketch adicionou recentemente a prancheta à prototipagem da prancheta, o Figma foi além, fornecendo transições entre os quadros. O recurso de prototipagem simples do Figma elimina a necessidade de outra ferramenta que faça prototipagem no estilo de apresentação de slides, como InVision ou Marvel. Quando tudo o que é necessário é uma apresentação simples com transições, não há necessidade de exportar para ferramentas de revisão.

Os protótipos do Figma podem ser distribuídos da mesma forma que os arquivos de design do Figma; qualquer pessoa com permissão de link pode visualizar e comentar em um protótipo e, novamente, esse feedback é capturado no painel de comentários da ferramenta e registrado no Slack. Os desenvolvedores podem ver o fluxo de trabalho do design, deixar @messages diretas para os designers e obter medições e atributos CSS de dentro do protótipo.

As bibliotecas de equipe da Figma são ideais para sistemas de design

Os sistemas de design tornaram-se uma necessidade para muitas empresas, e há a necessidade de componentes (símbolos no Sketch e no Illustrator) que sejam reutilizáveis, escaláveis ​​e “tokenizados” para uso nas bibliotecas de padrões disponíveis para designers de UX e desenvolvedores front-end.

A frase frequentemente usada “fonte única da verdade” se encaixa aqui – uma vez que uma biblioteca de equipe do Figma é criada, qualquer pessoa com acesso a um projeto pode usar instâncias dos componentes em seus projetos e ter certeza de que está trabalhando com as versões mais recentes.

A abordagem do Figma para bibliotecas de componentes é simples e fácil de gerenciar. Os designers podem criar arquivos cheios de componentes ou usar componentes na página para organizar uma biblioteca de padrões. Cada frame em uma página do Figma se torna a seção organizacional na biblioteca da equipe (não há necessidade de criar hierarquias\like\this).

Uma forma de organizar bibliotecas é ter um projeto dedicado exclusivamente a componentes. Os arquivos desse projeto podem ser organizados conforme necessário e as páginas desses arquivos podem ser organizadas de acordo.

O Figma foi criado para aprimorar o trabalho em equipe de design

Usar o Figma por qualquer período de tempo demonstrará os benefícios desta ferramenta de colaboração ao vivo. Ele mantém as equipes na tarefa e incentiva a divulgação completa, essencial ao construir um sistema de design para uma variedade de disciplinas. O Figma é fácil de usar em qualquer plataforma e permite que as equipes compartilhem seu trabalho e bibliotecas rapidamente.

Os especialistas em design que usam o Figma depois de mudar do Sketch (os arquivos do Sketch podem ser importados com paridade para o Figma) não ficam desapontados:

…ele transforma completamente a maneira como você pode trabalhar com seus colegas e clientes – Simplifique o design colaborativo com o Figma

O Figma uniu o melhor de tudo no mundo das ferramentas de design de interface do usuário nos últimos anos – Por que sua equipe de design deve considerar mudar para o Figma

No ano passado, tenho usado o Figma para meu processo de design de UI/UX e isso me economizou horas de trabalho. Ele realmente transformou meu fluxo de trabalho de design – Como simplificar seu fluxo de trabalho de UI/UX com o Figma

Meu tempo gasto no Figma é geralmente a parte mais agradável e produtiva do meu dia – o Figma está transformando todo o meu fluxo de trabalho, e é incrível!

• • •

Leitura adicional:

• Domine seu ofício com essas principais ferramentas de UX
• Simplifique o design colaborativo com o Figma
• Use o Craft by InVision para agilizar a colaboração em equipe
• Morte ao Wireframe. Direto para alta fidelidade!
• Torne-se um designer de classe mundial fazendo do globo seu escritório