Logo

dev-resources.site

for different kinds of informations.

Como o Figma Virou Parte do Meu Dia a Dia no Front-End

Published at
12/4/2024
Categories
figma
frontend
design
uidesign
Author
yanaiara
Categories
4 categories in total
figma
open
frontend
open
design
open
uidesign
open
Author
8 person written this
yanaiara
open
Como o Figma Virou Parte do Meu Dia a Dia no Front-End

Quem trabalha com front-end sabe o quanto o design está presente em tudo que a gente faz. Transformar aquelas ideias e layouts em algo funcional e bonito é quase uma arte, mas nem sempre a comunicação entre design e desenvolvimento flui como deveria. Era assim comigo até que o Figma entrou na minha rotina e mudou tudo.

Agora ele faz parte do meu dia a dia e virou uma ferramenta que eu realmente confio, porque não só facilita o meu trabalho, mas também me ajuda a entregar projetos muito mais alinhados.


De onde tudo começou

Antes do Figma, as coisas eram meio caóticas. Eu recebia designs em PDFs, imagens soltas ou arquivos que precisavam de ferramentas específicas pra abrir. Era aquela correria pra descobrir qual fonte foi usada, medir os espaçamentos ou perguntar o tom exato daquela cor. Hoje, com o Figma, tudo isso está na palma da mão.

Consigo acessar os arquivos com todas as especificações organizadas: medidas, fontes, cores… tudo ali, sem mistério. É como se a distância entre design e código tivesse desaparecido.


Os plugins que salvam a vida

Uma das coisas que mais me ajudou nessa transição foram os plugins. Eles tornam o Figma ainda mais funcional pra quem trabalha com desenvolvimento. Alguns dos que uso direto são:

- Autoflow: ideal pra visualizar os fluxos de navegação e entender melhor como as telas se conectam.
- Iconify: perfeito pra achar ícones direto no Figma e já encaixá-los no design.
- Stark: uma mão na roda pra checar contraste e acessibilidade (porque inclusão sempre está no radar, né?).

Esses plugins agilizam tanto meu trabalho que eu fico pensando como não usei isso antes.


Como o Figma conversa com o meu código

Pra mim, o Figma é mais do que uma ferramenta de design, é quase um tradutor entre o que está na tela e o que vai pro código. Quando vou criar um componente no Angular, por exemplo, uso o Figma pra validar interações, testar estados e já ter certeza de que o que estou construindo vai funcionar como o esperado.

Outro ponto que mudou muito foi o handoff entre design e desenvolvimento. Seja recebendo o layout de outra pessoa ou finalizando algo que eu mesma desenhei, o Figma deixa tudo claro e organizado. É como se ele antecipasse aquelas dúvidas que antes precisavam de várias mensagens e reuniões pra resolver.


Minha dica pra quem é dev

Se você trabalha com front-end e ainda não incorporou o Figma na sua rotina, sério, dá uma chance. Ele não é só uma ferramenta de design, é um parceiro de trabalho que facilita demais a nossa vida. Você vai perceber como o processo fica mais fluido e as entregas, mais assertivas.

E se você já usa, bora trocar ideia! Adoro descobrir como outras pessoas estão usando o Figma no dia a dia pra aprender ainda mais.

figma Article's
30 articles in total
Favicon
10 Figma Shortcuts to Design Faster
Favicon
I developed a Figma plugin, which generates a colour palette using a bezier curve…
Favicon
Figma for Programmers
Favicon
Best Figma plugins for design and development in 2025
Favicon
iPhone 16 Mockup for Figma
Favicon
Breaking Down Figma Prototyping: A No-Nonsense Guide for Beginners
Favicon
Componentes no Figma — Um guia para te ajudar a começar!
Favicon
Como o Figma Virou Parte do Meu Dia a Dia no Front-End
Favicon
gluestack-ui v2.0 Design Kit
Favicon
Best Figma Plugins for Designers
Favicon
Figma Components: Supercharge Your Design System
Favicon
De la Maquette au Code : Comment Figma Simplifie l’Intégration Front-End
Favicon
I used [ Figma] to bring this concept to life and truly enjoyed every step of the process.
Favicon
Figma x IA : La révolution des interfaces est en marche
Favicon
Evento sobre HTML Gratuito da Alura: Responsividade
Favicon
Invitation to cooperate in the project "Making Paid Templates Free"
Favicon
Turn a Figma Design Into a Working Dashboard App in 5 Minutes
Favicon
Designing with gluestack-ui: Essential Practices for Consistent Results
Favicon
What is Figma? Features, Pricing, and How to Get Started
Favicon
Webinar Sobre Figma Gratuito Com Certificado da EBAC
Favicon
Deep Exploration of Reinforcement Learning in Fine-Tuning Language Models: RLHF, PPO, and DPO
Favicon
Introducing the new Material Tailwind: Rebuilt from the Ground Up
Favicon
Adobe XD vs Figma: A Comprehensive Comparison for Designers
Favicon
Yo! I Built My First Figma Plugin
Favicon
Generate Figma Designs with AI
Favicon
Website for pixel-perfect development training (In Progress, looking for contributors)
Favicon
Creating Figma Unions
Favicon
Design Smarter with Figma Auto Layout
Favicon
Figma to React Native: Convert designs to clean code in a click
Favicon
Codia AI Figma to code:HTML, CSS, React, Vue, iOS, Android, macOS, Flutter, ReactNative, Tailwind, Web, Native, …

Featured ones: