One of the major doubts of junior developers is how they can translate a UI into code. Some time ago this task was a bit more difficult than it is today thanks to the lack of developer-friendly tools.
But, in this article, let us take a deep dive on how Figma layers works with Dev Mode to help you code visual assets or screens a lot more quickly than before.
Introduction about Figma Dev Mode
Dev Mode is a new space in Figma for developers with features that help you translate designs into code, faster. -- Figma Dev Team
When you turn on the dev mode feature for the first time, I am pretty sure that your eyes will fill out with hope for a new front in the web development, praying for better days when CTRL + C and CTRL + V will be the only thing we need to replicate an UI... This is an utopia for now, but let me explain to you what good things we can get from this feature.
Design to tailwind
This is one of the coolest features that I ever used on Figma: you can easily select a section, group or element and see its code translated directly to tailwind classes
Result:
Using external variables
A premium tip about how to make it easier for you to translate your design and wireframes into code is using external variables.
Once you create a new Figma project, it will be a blank project with none variables, but, once you import components from ui kits, all of the kit variables will come alongside the component.
Let us practice this importing a random component from shadcn's ui kit:
Once you copy and paste this component into your Figma project, you should be able to see its sizing, spacing and color variables that were created on the shadcn project:
And, your DevMode output code will use the tailwind theme colors once they are also used by shadcn -- FYI shadcn colors and sizes are based on tailwind theme, so its Figma project contains a lot of tailwind's configurations and variables, which helps your code output to contain tailwind's known variables.
Help Dev Mode to output better code
Your layer organization and content disposing tells directly to the dev mode about how it needs to generate your code, and here are some tips that could help you making your output code cleaner and possibly more effective:
- You should group all of your components that are nearby others in order to establish a div-like relation between multiple components, and this will help the dev mode to output a more semantic code.
- Creating a frame for each one of your sections will help you having your design more organized like your html code should be, so your navigation will be more precise and the code output will also be more precise.
Previewing your outputs
If you don't have a project with tailwind and want to test if your outputs are correct, try Tailwind Play
Photo by Mads Schmidt Rasmussen on Unsplash
Top comments (0)