Editores

Por Filipe Garrett, para o TechTudo


Figma é um editor online de design gráfico focado na criação de interfaces gráficas e experiência de usuário com ênfase colaborativa. A ferramenta permite que uma equipe de designers tenha acesso simultâneo e trabalhe em cima de um mesmo projeto ao mesmo tempo, facilitando a vida de times com profissionais em trabalho remoto em diversas localidades diferentes.

Alternativa online a produtos como Adobe XD e Sketch, o Figma tem plano gratuito, além de oferecer pacotes pagos com mais recursos e suporte a equipes maiores. A seguir, o TechTudo explica como o Figma funciona, quanto custa e como ele se compara ao Adobe XD.

O que é Figma? Editor online deixa interfaces gráficas de forma colaborativa — Foto: Filipe Garrett/TechTudo

Quais são os melhores programas de Adobe? Veja respostas no Fórum do TechTudo

O que é Figma?

Figma é um editor online de gráficos vetoriais com ênfase na prototipagem de interfaces gráficas e estruturas de design de experiência de usuário. Com oferta de edição colaborativa para que uma mesma equipe desenvolva um projeto em conjunto, o serviço oferece planos gratuitos e pagos, conta com app de apoio para macOS e Windows e disponibiliza o Figma Mirror para iPhone (iOS) e Android, que permite testar interfaces nos celulares.

O grande diferencial do serviço no mercado é a proposta integralmente online que facilita a colaboração, permitindo que uma equipe de profissionais diferentes, em locais diversos, visualize e trabalhe em modificações num projeto em tempo real. Serviços concorrentes, como o Adobe XD, não oferecem o mesmo nível de colaboração.

Há, no momento, três grandes planos de assinatura para interessados no Figma. O mais simples deles é completamente gratuito, há um programa profissional e outro pacote direcionado a organizações e empresas.

Como usar o Figma?

Com a sua conta criada e escolhido seu plano dentro do serviço, é hora de começar a usar o Figma. No momento da criação de um novo projeto, o web app sugere a aplicação de templates para facilitar a concepção do seu design.

Processo de como usar o Figma começa com a escolha de um template — Foto: Reprodução/Filipe Garrett

Você pode escolher, por exemplo, o template indicado para anteder resolução e dimensões de tela de um iPhone recente, de um desktop para desenvolver um app para macOS ou Windows, outros smartphones, websites ou simplesmente usar uma tela em branco para criar o design de forma mais livre. Há suporte ao Material Design, por exemplo, doutrina que orienta interfaces gráficas do Android, e até criação de slides para apresentações mais caprichadas.

Você pode convidar outras pessoas para trabalharem no seu design do Figma — Foto: Reprodução/Filipe Garrett

Escolhido o template que você quer aplicar, você terá acesso ao editor em si: ele lembra muito editores de imagens e vetores, com organização a partir de camadas (layers), uso de formas predefinidas, inserção de texto, efeitos para acabamento, além de funções de mapeamento e organização do seu espaço de trabalho para respeitar medidas e alinhamento.

Projetos no Figma podem contar com várias telas diferentes e é possível definir uma sequência lógica — Foto: Reprodução/Filipe Garrett

Para começar seu design, é simples: na aba "Assets", você encontra os recursos ideais para o seu template. Basta selecionar o que você deseja, arrastar para a tela e editá-lo conforme suas necessidades. No canto superior direito, há o botão "Share", que permite que você convide outros editores para visualizar e acessar o seu projeto em tempo real.

Quem preferir pode gerar uma cópia local do trabalho navegando em "Figma > File > Save local copy". Há ainda opção de exportar todo o design para um PDF. Já no canto superior direito, há um botão em forma de seta para a direita que permite rodar um simulador para testar a interface.

Figma oferece um visualizador interativo para que você teste a interface e a experiência de uso — Foto: Reprodução/Filipe Garrett

Como o Figma é sincronizado com a nuvem o tempo todo, você não precisa salvar seu projeto: desde que você mantenha conectividade com a Internet, todas as modificações são salvas automaticamente e você sempre encontra seu trabalho do jeito que deixou.

Figma é gratuito?

Como já adiantamos, o Figma funciona com três planos de assinatura diferentes. O pacote mais básico do Figma é gratuito e tem como grandes limitações a aplicação de limite de três arquivos para acesso por um número ilimitado de editores, apenas um projeto de equipe e histórico de versões do projeto limitado a 30 dias.

Figma é gratuito? Editor conta com três planos diferentes: gratuito, "Professional" e "Organization" — Foto: Reprodução/Filipe Garrett

O plano intermediário é chamado de "Professional" pelo Figma e custa US$ 144 ao ano por editor (cerca de R$ 730, em conversão direta), ou US$ 15 (R$ 75) para quem preferir pagar mês a mês. O plano remove limitações de colaboração do programa gratuito, não tem limite para número de projetos e histórico de versões, além de permitir que o usuário defina níveis personalizados de permissões para colaboradores e estabeleça projetos acessíveis apenas por meio de convite.

O último pacote é o "Organization", destinado a empresas e organizações com equipes maiores. O programa custa US$ 2.025 ao ano por editor (ou R$ 10.230), sem possibilidade de pagamento mês ao mês. O pacote oferece recursos mais avançados de análise e métricas de desempenho, permite uso e criação de plugins privados, compartilhamento de fontes e segurança mais robusta.

Figma vs. Adobe XD: qual escolher?

Os dois produtos se destinam ao design gráfico e à concepção de interfaces e experiência de usuário, mas com algumas diferenças importantes. A primeira delas é que o Figma aposta mais em colaboração em tempo real. Como é integralmente online, o serviço possibilita que uma equipe interaja ao vivo em cima de um mesmo projeto, realizando modificações que são instantâneas e persistem para todos os envolvidos no trabalho.

Figma vs. Adobe XD: rival é a opção da Adobe para criar interfaces gráficas — Foto: Reprodução/Filipe Garrett

Essa abordagem é ideal para equipes distribuídas em várias localidades e com trabalho remoto. No Adobe XD, a edição de um arquivo é local: você pode colaborar com outros integrantes do seu projeto, mas para isso precisa salvar suas modificações e fazer upload do arquivo para que ele seja acessado no computador de um colega. Dependendo das modificações que o seu colega fez ao mesmo tempo, há potencial para inconsistência e estresse no processo de gestão das diferentes versões do arquivo.

Já o trunfo do Adobe XD está no poderoso ecossistema de softwares da Adobe. Para muitos profissionais, ferramentas como Illustrator, InDesign e Photoshop já são parte de sua rotina diária — e custos de operação — tornando a assinatura adicional do XD atraente para muitos, sobretudo quem trabalha por conta própria e não depende tanto do aspecto colaborativo.

Outro diferencial são custos: a Adobe oferece o XD em um programa gratuito para um usuário, além de disponibilizar assinaturas em reais. Quem desejar assinar apenas o Adobe XD pode pagar R$ 43 ao mês (R$ 432 ao ano), enquanto que todo o pacote Adobe — com o trio de design gráfico e edição de imagens: Illustrator, InDesign e Photoshop, além do XD e mais uma grande quantidade de apps — fica em R$ 224 mensais, ou R$ 2.580 ao ano.

A R$ 2.580, o pacote Adobe é mais caro do que o Figma Professional, que fica em cerca de R$ 750 ao ano (em uma conversão direta, descontando taxas, como IOF). Entretanto, o serviço da Adobe vem completo com 20 aplicações diferentes, enquanto o Figma é um produto só.

Com informações de Figma, Adobe, MakeUseOf e TechCrunch

Veja também: Photoshop: cinco dicas para usar o programa

Photoshop: cinco dicas para usar o programa

Photoshop: cinco dicas para usar o programa

Quer comprar celular, TV e outros produtos com desconto? Conheça o Compare TechTudo

Mais do TechTudo