A basic developer’s guide to Figma
Some key skills for developers when coding mockups from designers
I first used Figma about two years ago. As a web designer, I was primarily designing in Adobe programs, and that’s where my comfort was. But having moved into an enterprise-level position, designing with a larger group presented the opportunity to adopt Figma within the team.
Figma is excellent for designers. It allows us to collaborate, work together closely and iterate on each other’s projects with ease. But this platform is so robust and easy to use, it even gives an inspect tool for developers, and that is what I’d like to discuss.
Pre-handoff considerations
We’re finding it much simpler to hand off our designs to developers now. Instead of emails, Google Drive folders, Zeplin / Invision, and constant communication and dictation back and forth, we can provide a simple project link to Figma and move on.
But for this to happen seamlessly, we need to consider a couple of key factors.
- Your designs need to be adequately documented in Figma
- Prototyping helps the developer understand the flow
- The developer needs to know their way around the tool
But as Figma gains popularity, we’re going to get a lot more questions about how to use it and handoff effectively.
Developer handoff
As a developer, you’ll have questions about the best way to handle the link to the project. My suggestion is to download Figma rather than to use it in your browser for ease of use.
Upon entering the project, you’ll notice three major sections to Figma. On the left, where the layers and pages are shown, the canvas or design area. You will see a panel on the right that shows all of the selected element’s details on the right.
Inspect tool
When receiving designs, your primary focus is likely going to be the right panel when figuring out the styles the designer has applied to elements.
This is where attention to detail is crucial to delivering a reliable final product. A project that looks like the approved design, in the end, is a successful build.
The ‘inspect’ tool in the right bar is where I find the most value as a developer with Figma. The CSS and styles are all available here. Once I’ve created my HTML structure, I can apply a class with these styles, and they should output the element’s look and feel.
Distance between objects
Finding the margin between elements is simple enough as well. You will get a selection by choosing the group or item in the left-hand panel or holding the command key while clicking. When you have your item selected and hold the option key while hovering on other items, you’ll see an orange outline with a px distance. Do this to ensure that the spacing you’re using is correct.
Exporting images
When handoff happened previously, we’d get a nice little Google Drive link or zip file. But now, it’s easier to export the exact file type we need for our build.
Select the image and select ‘export’ in the design panel to the screen’s far-right. You’ll be able to choose the file type you want to work with, and the download happens instantly!
Communication and notes
Communication is vital in projects, and being able to ask questions and leave notes for other team members is certainly a strong feature of Figma. You can @ tag specific team members or simply leave a comment for others to see. The “C” key will select the comment as a shortcut, and using “V” will move you back to the select cursor.
There are many more in’s and out’s to Figma; they can be useful for all parties in a project. The few listed here are just a few basics meant to help encourage designers and developers to form tighter unity in project communication.
I mentioned that prototyping could be quite useful as well, and this is true. It’s pretty ideal for prototyping interactions or getting the flow nailed down to be more direct with your business or development team, but in the interest of teaching the developer, I found it more important to explain how to interact from a development point of view.
There are many more resources and inspirational posts in the Figma Community, and I think it’s a great idea to explore them regardless of whether or not you’re a designer.
Did you know if you hold the “clap” button a while, that more people have a chance of seeing this story? — I also have a mailing list if you’d like updates on newly published stories.
