image

Bootcamps ilimitados + curso de inglês para sempre

80
%OFF
Article image
Sergio Sousa
Sergio Sousa10/03/2025 17:20
Compartilhe
Microsoft - Azure AZ-900Recomendados para vocêMicrosoft - Azure AZ-900

O Figma e o Desenvolvimento Front-End

  • #Figma

Se você está começando no desenvolvimento front-end, provavelmente já ouviu falar do Figma. Essa ferramenta é muito usada por designers para criar interfaces de sites e aplicativos. Mas será que um desenvolvedor precisa aprender Figma? A resposta é sim! Ter um conhecimento básico dessa ferramenta pode facilitar muito o seu trabalho.

1. Facilita a Comunicação com Designers.

O designer cria a interface no Figma, e seu papel como front-end é transformar isso em código. Se você sabe usar a ferramenta, pode entender melhor as decisões de design e evitar erros ao implementar os layouts.

2. Extração de Cores, Fontes e Tamanhos

No Figma, você pode visualizar todas as propriedades dos elementos da interface, como cores, fontes, tamanhos, espaçamentos e bordas. Isso evita que você precise "adivinhar" as medidas e garante que o design final fique fiel ao que foi planejado.

3. Visualização da Responsividade

Os designs no Figma costumam incluir versões para desktop, tablet e mobile. Ao aprender a navegar pela ferramenta, você consegue entender como a interface deve se comportar em diferentes telas.

4. Exportação de Imagens e Ícones

Se o site ou app precisar de imagens, você pode exportá-las diretamente do Figma no formato correto, sem precisar depender do designer.

5. Colaboração e Feedback em Tempo Real

O Figma é uma ferramenta online que permite que várias pessoas trabalhem no mesmo projeto ao mesmo tempo. Isso facilita receber feedbacks e fazer ajustes rápidos no design.

Aprender o básico de Figma não significa que você precisa virar um designer, mas sim que terá mais facilidade para transformar um design em código de forma mais precisa e eficiente. Se você quer ser um desenvolvedor front-end profissional, vale a pena dedicar um tempo para conhecer essa ferramenta! 🚀

Veja outros artigos como esse!

https://web.dio.me/articles/diferenca-entre-objetos-e-classes?back=/articles

Estou nessas comunidades:

https://www.linkedin.com/in/sergiosousa-tec/

https://github.com/SergioDevSousa

Compartilhe
Recomendados para você
Microsoft Certification Challenge #4 - DP 100
Microsoft Certification Challenge #4 - AZ 204
Microsoft Certification Challenge #4 - AI 102
Comentários (3)
Sergio Sousa
Sergio Sousa - 11/03/2025 16:46

Olá Edilson. Grato pelo comentário no meu artigo. Pra você colocar esse efeito que fiz na foto do perfil é preciso criar um gif. eu fiz no whatsapp no que sai um mp4 e transformei num gif em sites. o mp4 tem que ser curto por causa do tamanho que fica o gif.

DIO Community
DIO Community - 11/03/2025 14:32

Sérgio, excelente explicação sobre a importância do Figma no desenvolvimento front-end! Muitas vezes, novos desenvolvedores subestimam essa ferramenta, mas como você destacou, ter um conhecimento básico do Figma pode facilitar (e muito!) a comunicação e a fidelidade na implementação dos layouts.

O fato de poder extrair cores, fontes e espaçamentos diretamente do Figma evita aquele velho problema de "adivinhar" medidas no CSS. Além disso, a exportação de imagens e a visualização da responsividade são vantagens fundamentais para garantir que o design final esteja alinhado com o projeto original.

Outro ponto muito valioso que você trouxe foi a colaboração em tempo real, algo que acelera a troca de feedbacks entre designers e desenvolvedores, tornando o fluxo de trabalho mais eficiente e menos propenso a retrabalho.

Para quem está iniciando no front-end, sua dica é essencial: não é preciso virar designer, mas saber navegar no Figma e entender seus recursos básicos torna a implementação muito mais profissional e precisa.

Ótimo artigo, parabéns! Quem deseja se destacar no front-end, com certeza precisa incluir o Figma no seu conjunto de habilidades.

Edilson Silva
Edilson Silva - 10/03/2025 21:47

Muito Obrigado por compartilhar essa informação Sérgio

Ótimo artigo parabéns! Aliás você poderia me ensinar a colocar esse efeito de movimento

Na foto de perfil?

Recomendados para vocêMicrosoft - Azure AZ-900