Figma vs. Sketch vs. Axure – Uma Revisão Baseada em Tarefas
Publicados: 2022-03-11Em um infográfico recente da Toptal: “As melhores ferramentas de UX”, examinamos a ampla gama de ferramentas de design digital no mercado, a maioria das quais é capaz de auxiliar nas tarefas do dia a dia do designer de UX individual.
Três das ferramentas apresentadas, Sketch, Figma e Axure, geraram seguidores fiéis porque se destacam em trabalhos específicos no fluxo de trabalho de design de UX.
No entanto, o desempenho dessas ferramentas varia de acordo com a tarefa de projeto em questão . Em vez de listar todos os seus recursos em uma tabela de comparação, determinaremos sua eficácia com uma revisão baseada em tarefas.
Aqui está uma rápida visão geral dos concorrentes:
- Esboço da Bohemian Coding com sede em Haia, NL. O Sketch é um aplicativo somente para Mac.
- Figma by Figma com sede em San Francisco, Califórnia. O Figma é executado em qualquer sistema operacional por meio de um navegador.
- Axure by Axure Software Solutions com sede em San Diego, Califórnia. Axure tem uma versão para Windows e Mac.
Pontuamos cada ferramenta com base em quão bem ela executa tarefas diárias de design prontas para uso — sem plug-ins, complementos ou aplicativos de terceiros. As tarefas incluem:
- Fazendo a Ideação do Conceito
- Criando produtos de baixa fidelidade
- Criando produtos de alta fidelidade
- Criando protótipos interativos
- Criando um sistema de design
- Entregando ao Desenvolvimento
Observação: quando as ferramentas têm recursos quase idênticos necessários para concluir uma tarefa, a vitória vai para a ferramenta que for mais fácil de usar e fornecer entrega mais rápida. Se essa determinação parece muito próxima, o suporte de terceiros é o desempate.
Tarefa: Fazendo a Ideação do Conceito
A ideação é um processo criativo para gerar novas ideias e geralmente é feito por grupos interdisciplinares formados por designers, desenvolvedores, proprietários de produtos e gerentes de projeto.
O objetivo é criar novas ideias para usar em um produto após considerar os requisitos básicos e qualquer trabalho que já esteja em construção. Por exemplo, uma equipe pode passar por uma sessão de concepção de conceito para criar um conjunto de recursos MVP para um novo aplicativo ou recursos de próxima geração em um aplicativo existente.
Muitos designers fazem a idealização do conceito em um quadro branco ou papel. No entanto, a ideação também é feita digitalmente, principalmente em escritórios distribuídos. A geração de conceito é um esporte de equipe e inclui não designers, como proprietários/gerentes de produtos e desenvolvedores front-end. As ferramentas que promovem a colaboração e são fáceis de usar são as melhores para essa tarefa.
Vencedor: Figma
Sketch e Axure oferecem serviços de compartilhamento em nuvem, mas não há como compartilhar telas em tempo real com colaboradores.
Os arquivos compartilhados no Figma podem ser unidos em tempo real e o cursor rotulado de cada participante é exibido. Um clique em avatares representativos na barra de ferramentas muda as visualizações para a perspectiva dessa pessoa, facilitando o compartilhamento de uma ideia rapidamente. Além disso, o Figma não exige que não designers possuam uma cópia; eles abrem o link do arquivo e começam a trabalhar.
Outras ferramentas de colaboração de quadro branco podem ser mais adequadas para a concepção de conceitos do que o Figma, como Mural e Realtimeboard, mas para uma ferramenta de design, o Figma é melhor do que o Sketch e o Axure por uma milha.
Tarefa: Criando produtos de baixa fidelidade
As entregas de baixa fidelidade geralmente são produzidas como wireframes ou esboços digitais que podem ser distribuídos e revisados por outros designers e proprietários de produtos. Dependendo do processo de UX, eles também podem ser visualizados por desenvolvedores e outras partes interessadas.
Os wireframes servem para mostrar a estrutura básica de um aplicativo para que o modelo de interação possa ser definido antes de gastar tempo criando maquetes de alta fidelidade.
A criação de wireframes de baixa fidelidade pode ser feita por ferramentas especificamente dedicadas à tarefa, incluindo Balsamiq Mockups, Moqups e FluidUI. No entanto, Sketch, Axure e Figma podem fazer a mesma tarefa, especialmente quando os usuários criam bibliotecas de componentes de estrutura de arame.
Como os wireframes geralmente servem como layout de interface do usuário inicial para um aplicativo ou página, eles são cortes brutos monocromáticos que mudam com frequência. Isso ajuda a manter as expectativas das partes interessadas sob controle.
Para wireframes, a facilidade de uso, a velocidade de entrega e a modificação são essenciais porque permitem que os designers produzam designs variantes com eficiência.
Vencedor: Axure
Axure ganha aqui porque possui componentes pré-empacotados para wireframing imediatamente após a instalação do software. Sketch e Figma têm as ferramentas que permitem criar wireframes, mas você precisa desenhar um componente de wireframe ou baixar um arquivo que os contenha. Em ambos os casos, eles devem ser integrados em uma biblioteca de símbolos (Sketch) ou de componentes (Figma) para serem arrastados e soltos como os componentes do Axure.
A Axure tem muitas bibliotecas de terceiros para criar produtos de baixa fidelidade, e o Sketch tem uma infinidade de arquivos gratuitos e pagos que podem ser baixados, enquanto os recursos públicos da Figma ainda são incipientes.
Depois que um designer cria bibliotecas de componentes de estrutura de arame, as três ferramentas são combinadas uniformemente. Observe que os componentes do Axure possuem propriedades paramétricas e ajustáveis, mas para wireframes estáticos, todas as três ferramentas funcionam bem quando as bibliotecas estão disponíveis.
Tarefa: Criação de produtos de alta fidelidade
As entregas de alta fidelidade nascem do feedback e dos aprendizados coletados de wireframes de baixa fidelidade. São maquetes que mostram cores, detalhes visuais e designs finais propostos para um aplicativo.
Alta fidelidade também significa maquetes de tela prontas para apresentação e exibidas a clientes, executivos internos e outras partes interessadas que não são designers. As ferramentas de design que se destacam nessa tarefa têm todos os recursos necessários para adicionar o polimento necessário para criar uma representação dos produtos finais voltados para o cliente.
Isso inclui controle sobre preenchimentos e traçados de objetos, adição de efeitos como sombras e preenchimentos de gradiente e exportação de arte para um formato de fácil digestão (png, pdf, jpg).
Vencedor: Figma
Sketch e Figma têm conjuntos de ferramentas quase idênticos que podem criar maquetes de alta fidelidade, mas o modelo de interação do Figma é mais refinado e a ferramenta é mais fácil de usar desde o início. Ambas as ferramentas têm acesso fácil à edição avançada e comandos booleanos como Join, Intersect, Union e Subtract. Embora o suporte ao plug-in do Sketch permita que terceiros criem recursos adicionais, essas ferramentas não estão disponíveis imediatamente após a instalação.
Todas as três ferramentas têm recursos que permitem a criação de objetos personalizados, mas o Axure dificulta um pouco o acesso aos comandos. As edições mencionadas acima não estão disponíveis na barra de ferramentas. O acesso só é obtido através do menu de contexto quando vários objetos são selecionados.
Além disso, as redes vetoriais da Figma facilitam muito o trabalho com as ferramentas de linha.
Tarefa: Criando Protótipos Interativos
Os protótipos interativos podem ser tão grosseiros quanto um protótipo de papel ou tão detalhados quanto uma versão ramificada de um aplicativo existente que foi alterado para explorar novos recursos. Normalmente, os protótipos interativos permitem que os usuários naveguem de tela em tela e empreguem funcionalidades como menus e listas.
Para muitos designers, uma apresentação de slides interativa básica será suficiente ao apresentar seu trabalho. Isso é especialmente verdadeiro para aplicativos móveis, pois transições simples fornecem interação suficiente com o dispositivo para explicar o design.
O modelo de prototipagem do Figma é bem integrado e simples de usar e, por ser um aplicativo baseado em nuvem em tempo real, não há necessidade de atualizar as páginas HTML quando um arquivo é atualizado.
Ocasionalmente, as partes interessadas desejam conexões de dados ao vivo para carregar um protótipo com dados do mundo real para testar a escalabilidade de um projeto, mas a grande maioria dos designers agora tem pouca necessidade de protótipos complexos.
Vencedor: Figma
Tanto o Sketch quanto o Figma suportam prototipagem simples com vinculação “objeto à prancheta” e um conjunto limitado de transições. Os plug-ins ajudam a reforçar os recursos de prototipagem simples do Sketch, mas o Axure é o mais poderoso quando se trata de fornecer um modelo de interação robusto para protótipos.
Tarefa: Criando um Design System
Os sistemas de design, embora relativamente novos no domínio do design de UX, existem há décadas. Eles incluem uma linguagem de design compartilhada, componentes, recursos e diretrizes que capacitam as equipes a colaborar e tomar melhores decisões. Uma biblioteca de sistema de design geralmente é implementada como um site e atua como a única fonte de verdade para um produto em toda a empresa.
Vencedor: Figma
Embora as bibliotecas de componentes possam ser construídas em qualquer um dos programas, nenhuma delas permite que os designers acionem um interruptor e produzam uma biblioteca de componentes viável no início. O Axure pode gerar uma página HTML com componentes personalizados, mas não há como consultar o componente único para descobrir o valor da cor, tamanho e outras propriedades.
Construir um sistema de design usando qualquer uma dessas ferramentas ainda é um processo manual. No entanto, existem plugins para Sketch (como o plugin Material Design lançado recentemente pelo Google) e pelo menos uma ferramenta de terceiros em andamento para o Figma.
A Figma ganha porque a colaboração está no centro de um bom sistema de design. Os funcionários da empresa de várias disciplinas (design, desenvolvimento, qualidade, conteúdo) precisam acessar uma biblioteca do sistema de design, e muitos serão adicionados ao arquivo de componente de design que é sincronizado com a biblioteca compartilhada. O Figma pode ser usado por qualquer pessoa, não apenas por um titular de licença, tornando fácil acessar e adicionar a um arquivo compartilhado.
Tarefa: Entregar ao Desenvolvimento
Quando os designers de interface do usuário terminam de criar uma interface, é responsabilidade deles entregar os arquivos de design aos desenvolvedores para que o projeto possa ser concluído. Mas um handoff é mais do que uma simples troca de dados, é uma oportunidade para os designers comunicarem a lógica de seu trabalho e, assim, ajudar os desenvolvedores a combinar forma com função.
Existem dezenas de métodos de transferência e ainda mais ferramentas de terceiros para facilitar consultas de informações de objetos e redlining de arquivos Sketch e Figma (consulte Avocode e Zeplin). No entanto, nesta comparação, estamos analisando a ferramenta de design original antes de ser complementada com plug-ins ou outros aplicativos.
Curiosamente, a ascensão dos sistemas de design UX mitiga a necessidade dessa forma de transferência, pois as bibliotecas de componentes publicadas são a única fonte de verdade para o desenvolvedor. Eles podem extrair o layout exato dos componentes e as informações de design sem esperar por uma entrega ou consulta de UX.
Além disso, obter informações de objetos em um arquivo de design pode ser útil durante a construção de um sistema de design, portanto, alguma visualização do CSS é uma coisa boa.
O Sketch permite selecionar objetos e usar um menu contextual para “Copiar atributos CSS”, mas não é o ideal. O Figma faz um bom trabalho ao fornecer uma guia “Código” no painel de propriedades que produz valores CSS, iOS ou Android para objetos selecionados (os desenvolvedores podem usar esse recurso no modo somente visualização ou protótipo).
Vencedor: Axure
No momento, apenas o Axure possui “geradores” poderosos que produzem arquivos HTML totalmente publicáveis, especificações do Word e até mesmo relatórios formatados em CSV para importar para uma planilha. Embora os resultados não sejam uma biblioteca de design, o aplicativo fornece materiais úteis para o desenvolvedor.
O vencedor geral da ferramenta de design: Figma
Pelos números, o Figma é o vencedor desta comparação, principalmente por sua natureza colaborativa e disponibilidade multiplataforma. À medida que mais equipes usam sistemas de design que exigem integração mais estreita no desenvolvimento e design de front-end, a colaboração em tempo real e o recurso de incorporação ao vivo da Figma oferecem uma grande vantagem. No lado negativo, o Figma é um aplicativo online que pode ser proibido de usar em uma empresa por motivos de segurança.
O Axure fica em segundo lugar devido à sua força pronta para uso com componentes pré-criados, recursos poderosos de prototipagem interativa e geração de documentos. No caso mais raro, quando uma empresa precisa acessar armazenamentos de dados do mundo real para ver como um recurso específico se comporta, o Axure é a melhor ou a única opção.
O Sketch pode ter chegado em último lugar, mas uma vez que os usuários aproveitam os muitos plugins e recursos disponíveis para a ferramenta, ela é extremamente poderosa e pode ser adaptada para atender às necessidades de um grupo de design. A ressalva aqui é que os plug-ins precisam ser atualizados após cada atualização do Sketch e, como um aplicativo somente para Mac, as empresas que usam PCs com Windows não podem usá-lo.
Todas as três ferramentas analisadas neste artigo são poderosas por si só. No entanto, cada um tem limitações. Cabe a designers e equipes individuais identificar suas necessidades de fluxo de trabalho, pesar os prós e contras de cada programa e fazer a escolha apropriada.
Leia mais no Blog Toptal Design:
- Abandone os MVPs, adote protótipos mínimos viáveis (MVPr)
- O poder do Figma como ferramenta de design
- Como criar um guia de estilo de esboço, biblioteca e kit de interface do usuário
- Noções básicas sobre sistemas e padrões de design
- Morte ao Wireframe. Direto para alta fidelidade!