O mundo das ferramentas de design emergentes é incrivelmente emocionante. 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.
Figma tem o potencial de apoiar todo o processo de design de ponta a ponta. Os primeiros esboços, coleta de feedback, colaboração, protótipos prontos para teste e transferência do desenvolvedor estão dentro de suas capacidades. 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 define Figma além da competição? 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 exclusivas do Figma.
O que é fundamental para um processo de design de produto suave?
Embora seja verdade que cada equipe e projeto podem 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 . Não importa as ferramentas que uma equipe use, deve haver uma maneira de trabalhar em conjunto, apresentar projetos, obter feedback e manter as partes interessadas informadas. Todos esses recursos estão disponíveis no Figma.
- Flexibilidade para iterar e produzir resultados . Figma é flexível e pode ser usado como um quadro branco 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? Crie e publique protótipos interativos e teste-os diretamente em smartphones - tudo da Figma.
- Estabelecendo uma única fonte de verdade . Figma é uma excelente maneira de definir sistemas de design de produto que residem totalmente online. É uma única fonte de verdade por padrão. Não se pergunte mais: “Esta é a versão mais recente?”
- Transferência 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 vermelhas, medições e recursos gráficos prontos para serem exportados.
- Versatilidade a ser personalizada e melhorada . A API de plug-ins da Figma permite que as equipes escrevam seus próprios plug-ins ou acessem a comunidade de usuários mais ampla e estenda a ferramenta com novas funcionalidades.
1. Acessibilidade e colaboração
Coloque a equipe a bordo
Vamos dar uma olhada em como Figma contribui para as seis áreas principais abordadas acima. Novos usuários podem querer criar uma conta Figma gratuita, formar uma equipe e assistir começar com o Figma . Assim 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 normalmente, os direitos de edição são dados à equipe de design e os direitos de visualização a todos os outros. Isso inclui desenvolvedores e outras partes interessadas que precisam seguir 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 se propagam 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 qual sistema ele está. Contanto que o dispositivo e o navegador que eles usam atendam aos Requerimentos mínimos , eles podem acessar diretamente 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 do Dropbox Paper compartilhado pode ser usado para apresentar o estado atual de um projeto.
Para incorporar arquivos de projeto, defina a visibilidade do arquivo para Qualquer pessoa com o link - pode visualizar , copie o código de incorporação e incorpore o arquivo do projeto em qualquer software de terceiros que suporte embed.ly .
Feedback 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 Figma pode ver a versão mais recente e comentar diretamente sobre o ponto sobre o qual deseja fornecer feedback.
tipos de riscos cambiais
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 que o feedback foi processado, as discussões podem ser fechadas clicando em Resolver .
Para manter as equipes alinhadas, existe uma boa integração que pode publicar a discussão de arquivos Figma em um canal Slack designado.
Colaboração em tempo real real
Uma das funcionalidades mais intrigantes do Figma é o que eles chamam multijogador . Ele permite que vários membros da equipe abram e trabalhem em um arquivo de design ao mesmo tempo. Todos os 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 designers usará o modo multijogador para trabalhar simultaneamente na mesma parte de um arquivo, é incrivelmente reconfortante não ter que se preocupar com conflito de versão do arquivo, especialmente para equipes distribuídas maiores.
O modo multijogador é útil ao apresentar remotamente porque permite 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 Figma como um quadro branco online (embora soluções específicas, como eu olho , pode ser mais adequado para o trabalho).
Para esse fim, é aconselhável criar componentes personalizados para replicar ativos específicos como post-its virtuais ou elementos de diagrama.
2. A flexibilidade para iterar e produzir entregáveis
Assim que os membros da equipe forem convidados e os esboços iniciais estiverem em andamento, o Figma pode ser usado para iterar. A principal razão pela qual o Figma foi criado é design de interface - com o quadro branco terminado, as equipes podem passar para mapas de fluxo e wireframes. Novamente, é inteligente construir bibliotecas de componentes que podem ser reutilizadas para essas tarefas. o 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 com 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 das camadas.
Com um elemento selecionado no modo Protótipo, um pequeno círculo aparece ao lado. Quando arrastado, linhas azuis aparecem e podem ser soltas na tela ou estado para mostrar o resultado da interação.
Transições comuns estão disponíveis no Figma, tornando muito mais fácil criar protótipos de alta fidelidade. Na verdade, a equipe Figma lançou recentemente um recurso smart animate e drag trigger . O aspecto de animação inteligente interpola o movimento de elementos semelhantes, enquanto o gatilho 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 Figma, mesmo para teste do usuário. Clicar no pequeno ícone de reprodução no canto superior direito inicia o protótipo e um novo URL é gerado. É possível copiar o URL ou usar o azul Compartilhar Protótipo botão. Depois que os usuários abrem o link, eles são apresentados a um protótipo interativo e podem deixar comentários, se desejarem.
Teste no celular
Os designs 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 App Figma Mirror para testes específicos do dispositivo.
4. Estabelecendo uma única fonte de verdade
Histórico da Versão
Não seria ótimo se os arquivos do projeto estivessem sempre atualizados e com backup constante? Esta funcionalidade está incluído no Figma por padrão . Cada arquivo é salvo automaticamente enquanto trabalha nele, e Figma cria uma nova entrada no histórico de versões após 30 minutos de inatividade. Um registro de todas as versões salvas automaticamente é criado e cada versão pode ser restaurada se necessário.
Claro, 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 alterações são feitas em qualquer elemento de uma biblioteca, as edições podem ser publicadas e propagadas para arquivos que usam esses elementos. Designers trabalhar nesses arquivos pode então decidir aceitar as edições ou não.
A capacidade de decidir como distribuir as 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 mudar para Código modo na barra lateral direita, mesmo com acesso somente para visualização.
Quando Código modo está ativo, selecionar um elemento no palco irá revelar todas as informações relevantes necessárias para a implementação, e todas as outras informações sobre a posição do componente em relação a outros elementos são visíveis. Tal como acontece com soluções semelhantes, o código gerado não deve ser totalmente copiado e colado, mas é útil ter um acesso tão fácil.
6. A versatilidade para ser personalizada e aprimorada
APIs Figma e plug-ins personalizados
Figma's FOGO e sistema de plugin torna mais fácil para uma ampla gama de equipes e disciplinas de design personalizar o programa para suas necessidades de processo específicas. A flexibilidade do Figma oferece aos usuários a capacidade de interagir programaticamente com a plataforma. Alguns exemplos:
Usando dados reais
É imensamente valioso ser capaz de usar dados reais em maquetes e protótipos, e o Figma torna isso possível, permitindo que o conteúdo de fontes externas seja importado. Aproveitando o conteúdo real, é possível testar componentes de design de estresse, manter os modelos atualizados e envolver equipes que não estão relacionadas ao design.
Um plugin chamado Google Sheets Sync é um exemplo perfeito do que pode ser feito. Este plugin simplifica a integração do Google Sheets como uma fonte para preencher e sincronizar o conteúdo dos componentes em arquivos Figma.
Fluxos de trabalho avançados
A capacidade de abrigar um sistema de design dentro de um programa de design de IU só tem valor se o sistema for implementado de forma consistente em telas voltadas para o cliente. Felizmente, existem APIs, plug-ins e integrações Figma que podem ajudar.
o Livro de histórias addon sincroniza arquivos Figma e mostra os componentes Figma-design em um painel junto com os componentes implementados. Outro caso de uso interessante é o Conversor Figma para React , um aprimoramento de fluxo de trabalho que converte componentes Figma em código.
Os recursos do Figma são ideais para todo o processo de design
Não há um único programa de design 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 designers . Ele garante que as empresas que fazem nossas ferramentas ouçam o que precisamos e nos forneçam recursos atualizados e adequados para os trabalhos que fazemos.
Dito isso, o Figma é uma ferramenta avançada, porém intuitiva, que se provou 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 falha, uma grande seleção de plug-ins preenche o vazio.
• • •
Leituras adicionais no Blog de design do ApeeScape:
- O poder do Figma como ferramenta de design
- Figma vs. Sketch vs. Axure - Uma revisão baseada em tarefas
- Mini Tutorial - Trabalhando com componentes do botão Figma
- Domine sua arte com essas ferramentas UX de ponta
- Design with Precision - An Adobe XD Review
Compreender o básico
Figma gera código?
Sim. Figma gera código que pode ser usado por desenvolvedores. Quando o modo de código está ativo, a seleção de um elemento no palco irá revelar todas as informações relevantes necessárias para a implementação, e todas as outras informações relacionadas à posição do componente em relação a outros elementos são visíveis.
O Figma é baseado no navegador?
Sim. Desde o início, Figma tem sido um programa de design baseado em navegador. Isso levantou muitas sobrancelhas quando a ferramenta foi lançada pela primeira vez, mas, em última análise, abriu o caminho para a flexibilidade e funcionalidades exclusivas do Figma, especialmente no que diz respeito à colaboração e documentação.
O que é o design Figma?
Figma é uma ferramenta de design baseada na web capaz de criar maquetes, animações de interação e protótipos de alta fidelidade. Muitas equipes de design também usam Figma como uma biblioteca de componentes do sistema de design. Além disso, o Figma é confiável por seu controle de versão, recursos de colaboração, modo de apresentação e geração de código.
Para que é usado o Figma?
Figma é uma ferramenta de design de interface colaborativa baseada na web usada para projetar produtos digitais. Possui recursos de colaboração avançados e permite que os designers façam maquetes interativas. Ele também é capaz de lidar com uma ampla gama de tarefas, como projetar conjuntos de ícones, ilustrações, logotipos e muito mais.
O que a Figma pode fazer?
Figma é uma ferramenta de design de produto digital que se destaca em seis áreas: 1) Acessibilidade e colaboração; 2) Flexibilidade para iterar e produzir entregas; 3) Capacidade de construir protótipos e testar; 4) Estabelecer uma única fonte de verdade; 5) Transferência suave para desenvolvedores; 6) Espaço para melhorias com plug-ins.
