O que é Figma? | Envato Tuts+

Figma é um aplicativo de design de interface que roda no navegador – mas na verdade é muito mais do que isso. Eu diria que é provavelmente o melhor aplicativo para projetos de design colaborativo baseados em equipes. Vamos dar uma olhada!

Adobe e Figma

Em 15 de setembro de 2022, foi anunciado no blog Figma e no blog da Adobe que a Adobe iria adquirir o Figma em algum momento no futuro próximo.

No entanto, todo o acordo foi cancelado em dezembro de 2023, e a Adobe foi forçada a aceitar uma taxa de rescisão exorbitante de US$ 1 bilhão, o que sem dúvida ajudou a Figma a se desenvolver ainda mais.

Figma tem sido indiscutivelmente o maior concorrente do Adobe XD nos últimos anos (e reconhecido pela maioria como líder de mercado no espaço de ferramentas de design UI e UX) e o XD foi efetivamente encerrado durante o processo de aquisição. Então, o que isso significa para a Adobe ainda está para ser visto!

adobe e figmaadobe e figmaadobe e figma

Aqui estão alguns artigos e vídeos interessantes de designers, líderes empresariais e profissionais da indústria, para você ficar atualizado!

Agora, continuando com o show. Vamos dar uma olhada no que é Figma!


Figma oferece todas as ferramentas que você precisa para a fase de design do projeto, incluindo ferramentas vetoriais que são capazes de ilustração completa, bem como recursos de prototipagem e geração de código para entrega.

Figma para iniciantes

Confira esses vídeos se estiver interessado em começar a usar o Figma. Ou continue lendo para obter mais explicações sobre o que é Figma.

Introdução ao Figma

Aprenda como usar o Figma, uma ferramenta poderosa para design de interface de usuário.


5 dicas e truques do Figma

Descubra cinco truques e dicas úteis do Figma neste vídeo com Adi Purdila.


Recursos da Figma

Figma sempre foi extremamente receptiva aos desejos da comunidade de design. Se os designers quiserem (componentes, animação, ferramentas para sistemas de design) a Figma sempre fez o possível para implementá-lo o mais rápido (e robusto) possível! Então, quais recursos fazem o Figma se destacar de seus concorrentes?

Figma é executado on-line

Embora o Figma seja baseado em navegador, existem versões desktop para Windows e Mac OS. Presumivelmente, esses são aplicativos wrap que executam um navegador dentro deles, mas seja esse o caso ou não, o Figma está sempre rodando online nesses aplicativos.

Colaboração

A natureza “sempre online” do Figma, na verdade, fornece alguns dos maiores pontos fortes da ferramenta. Um desses pontos fortes é que o Figma permite colaboração ao vivo e em tempo real. Você e os membros da sua equipe podem fazer login em um design ao mesmo tempo, fazendo alterações nele simultaneamente.

O fato de todos esses designs serem salvos online significa que você nunca precisará se preocupar com a perda de sincronia de algum membro da equipe com o projeto. As alterações mais recentes estão sempre no arquivo, e você não precisa se preocupar em transferir arquivos entre membros da equipe ou enviar arquivos de e para qualquer plataforma de armazenamento de terceiros.

Isso também significa que você pode iniciar um design ao mesmo tempo que o cliente. Portanto, mesmo que você esteja em um local separado do seu cliente, você ainda poderá realizar uma reunião onde ambos estarão olhando para a mesma coisa. O cliente pode fazer sugestões e você pode implementá-las na hora.

Além de todas essas ferramentas de colaboração ao vivo, você também pode deixar comentários diretamente na tela.

Bibliotecas de componentes

Figma permite construir bibliotecas de componentes reutilizáveis ​​​​aos quais toda a equipe tem acesso. Os componentes dão aos designers uma vantagem inicial em qualquer sistema de design existente e, quando um componente é atualizado na biblioteca central, essas alterações são feitas em todos os níveis. todos projetos para todos.

Componentes Figma: do zero ao herói

  • Componentes principais vs. instâncias
  • Usando variantes de componentes
  • Trabalhando com propriedades de componentes
  • Prototipagem com componentes interativos


Prototipagem e saída de código

Para prototipagem, você pode criar conexões e pontos de acesso em seu design para simular como um usuário fluiria por essa interface. Para a fase de codificação, Figma pode gerar código SVG, CSS e código iOS e Android.

Layout automático

Se você vai aprender Figma para design de UI, você precisa aprender Auto Layout – isso tornará sua vida como designer dez vezes mais fácil! Adi Purdila ensinará como usar o Auto Layout durante este curso, em apenas 30 minutos.

Aprenda o Figma Auto Layout em 30 minutos

Se você vai aprender Figma para design de UI, você precisa aprender Auto Layout – isso tornará sua vida como designer dez vezes mais fácil!


Geleia de figo

Voltando ao tema colaboração, vale a pena falar sobre o FigJam aqui. Tem o mesmo espírito de trabalhar em projetos em equipe, mas se concentra na idealização. Em outras palavras, é o local perfeito para todos debaterem e organizarem ideias digitalmente.

Esta nova ferramenta possui muitos recursos úteis para a equipe, como:

  • cronômetro para permanecer no caminho certo
  • formas, diagramas e objetos
  • bate-papo de áudio no FigJam
FigJam para iPadFigJam para iPadFigJam para iPad
Esta é a aparência do FigJam no iPad, mas também está disponível no desktop. (Crédito da foto: Figma Blog)

Você ainda precisará fazer seu trabalho de design no Figma, mas o FigJam é útil para criação de ideias, planejamento e coleta de contribuições úteis o tempo todo.

As pequenas coisas

Então, isso cobriu os aspectos diferenciadores do Figma, mas a melhor parte do Figma é na verdade mais difícil de identificar. É o culminar de todas as pequenas coisas que Figma faz muito bem, e há uma longa lista delas. Reunimos vários deles em uma série chamada Figma Tips & Tricks. Há muitos para mencionar aqui, mas alguns dos meus favoritos incluem:

  • No Figma, um nó em um vetor pode ter vários segmentos anexados a ele (mais do que apenas os dois padrão). As formas mais complexas que você pode criar com elas são chamadas de “redes vetoriais”.
  • Figma permite importar de forma rápida e fácil várias imagens de uma vez, colocando-as exatamente onde você deseja.
  • Ao mover um objeto pela tela no Figma, você verá sua altura e largura refletidas nas réguas.
  • Copie o código SVG diretamente de um objeto dentro do Figma e, inversamente, você pode copiar o código SVG de um editor de código e colá-lo como um gráfico na tela do Figma.

Resumindo tudo: o que é Figma

Figma é um aplicativo de design de UI e UX baseado em navegador, com excelentes ferramentas de design, prototipagem e geração de código. Atualmente é (indiscutivelmente) a ferramenta de design de interface líder do setor, com recursos robustos que apoiam as equipes que trabalham em todas as fases do processo de design. Se ainda não o fez, experimente!

Experimente o Figma

Se você estiver pronto para começar com a ferramenta de design Figma, mergulhe os pés primeiro. Você pode usar esses kits Figma UI gratuitos como ponto de partida e uma excelente economia de tempo. Basicamente, são telas pré-fabricadas para expressar suas ideias de design.

Você pode acessar mais kits de modelos Figma UI com sua assinatura Envato Elements. Existem mais de 9.000 kits de UX e UI disponíveis na plataforma de download à vontade. Cada um é feito profissionalmente para que você obtenha resultados profissionais em seu trabalho.

ga-analytics#sendElementsClickEvent”>Kits Figma UX UI da Envato ElementsKits Figma UX UI da Envato ElementsKits Figma UX UI da Envato Elements
Navegue e baixe os milhares de ga-analytics pré-fabricados#sendElementsClickEvent”>Figma UX e UI kits da Envato Elements.

Tutoriais e recursos do Figma

Criamos um guia completo para ajudá-lo a aprender o design do Figma, seja você novo nas ferramentas de design do Figma ou queira levar suas habilidades para o próximo nível.

E se você estiver interessado em aprender mais sobre a ferramenta Figma UI, não deixe de conferir os seguintes recursos:

[ad_2]

Tagged with

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *