Tool Spotlight: Sai da frente Adobe XD, o Figma chegou!

6/2/2024

Todos os designers, sejam eles júniores ou com vários anos de experiência, já ouviram falar do Figma,  e acabaram por se render a esta ferramenta. E se tu, designer que estás a ler este blog, ainda não o fizeste, onde é que tens andado?

A nossa equipa de designers JMR tem explorado o Figma no último ano e temos de dizer que: adoramos! Deixa-nos explicar porquê.

(AVISO: Desculpem-nos ferramentas da Adobe. Continuamos a adorar-vos.)

Então, o que é exatamente o Figma?

O Figma é nada mais, nada menos do que a ferramenta de design gratuita dos teus sonhos. Imagina que o Google Docs e o Photoshop tiveram um filho ultra-talentoso e supercriativo, feito para tornar o teu processo de design mil vezes mais fácil e eficaz. Já estás a imaginar? Pois bem, isso é o Figma!

Esta plataforma cloud-based permite-te criar, desenhar, prototipar, desenvolver projetos e gerar código para uma transição suave e intuitiva. Adeus, ficheiros desorganizados e versões perdidas em infinitas cadeias de emails! O Figma mantém tudo num espaço único e seguro na cloud, fácil de partilhar com a tua equipa (e com os teus clientes), tornando as rondas de feedback e de alterações instantâneas e muito mais simples.

Por que é que os JMRers adoram tanto o Figma?

Como já mencionámos, o nosso amor pelo Figma tem muito a ver com as suas funcionalidades de colaboração em tempo real, a interface intuitiva (e user-friendly) e a possibilidade de permitir que designers e criativos trabalhem de forma simplificada, em diferentes formatos, com uma multitude de plug-ins únicos e extremamente úteis.

Além disso, o Figma também tem bibliotecas de conteúdos gratuitas e funcionalidades de design responsivo que transformam a tarefa intimidante de design gráfico numa experiência divertida e cheia de criatividade. Às vezes, é tão fácil de usar que quase parece batota (mas não é, prometemos!).

Para que é que a nossa equipa usa o Figma?

Resumidamente, a nossa equipa utiliza o Figma para tudo o que esteja relacionado com design. Desde wireframes, a maquetes responsivas de alta qualidade, protótipos, templates de apresentações, design de websites, design de produtos, redes sociais, entre outros. Esta ferramenta é a nossa escolha número um.

Mas, para sermos mais específicos, uma das coisas que mais fazemos é usar o Figma para design de websites. Recentemente, tivemos vários projetos de web design, e o Figma faz com que tudo flua muito melhor. A funcionalidade de protótipo dá-te a sensação de que estás a visitar um site real e (como já mencionámos umas três ou quatro vezes), o facto de poderes partilhar o projeto diretamente com o cliente é um bónus. A cereja no topo do bolo, no entanto, é o Dev Mode! Uma funcionalidade que permite traduzir designs em código quase num piscar de olhos.

Como funciona o Dev Mode?

De forma resumida, o Dev Mode é basicamente um inspetor de navegador para o teu ficheiro de design. O Figma usa uma abordagem baseada em componentes compatível com a estrutura de componentes do React, facilitando a conversão de designs em código. O que é que isto significa? Bem, em plataformas como o WordPress (WP), esta funcionalidade permite exportar elementos de UI/UX diretamente para temas WP, utilizando a estrutura CSS do Figma para manter a consistência dos estilos. Impressionante, certo?!

Agora, no caso do Webflow, o código gerado pelo Figma pode ser importado e ajustado dentro do editor visual do Webflow, permitindo ajustes em tempo real e integrações incríveis entre design e desenvolvimento. Além disso, a capacidade do Figma de exportar assets e layouts em formatos compatíveis com .html e .css ajuda na integração e gestão de conteúdos, preservando a integridade funcional de todos os designs originais. Como podes ver, o Figma faz designers e developers extremamente felizes!

Ainda precisas de mais argumentos? Dá uma vista de olhos ao nosso mais recente caso de estudo para a Workin Porto e rende-te às maravilhas desta plataforma.

Partilhar

Artigos semelhantes

Outros artigos