How should I approach coding a figma design ?
I am begginer to front-end field and I recently started converting figma file into code. I write code in HTML, CSS, and JS. My code are always messy I don't know how should I approach to write a clean, and reusable code ?
8 Replies
Maybe look at Sass or just in general use utility classes. I like to use nesting to make reusable "component" classes based on scoped class > semantic selectors.
Kevin has a few videos that show his process or you can take one his courses to really up your game.
Beyond CSS (his Sass/Design system course) will be out soonTM.
Though he has a few free ones that are also good at showing how to make reusable utility classes and think about hte design and break it down nicely
figma dev mode?
It's code output is still pretty trash from what I'm hearing. I'd would still only use it for designing not it's code output.
Like it's never going to give you grid... All flex. 🤢
hahahah yhea its what i thouthg
I saw a couple videos on it and yeah they like to put flex everywhere even when it's not needed
Right and the op is how to write better CSS not worse. 😅
Honestly utility classes and component styles ftw.
Just make a bunch of websites and you'll get better. Improving is a slow and arduous process
Being in servers like this is a good help too. You suck up all the bits of knowledge that people have here and there and gradually start to incorporate that into your development