To make it easier for your to start off your designs, Handoff provides a free Figma plugin that helps you to convert designs to code.
Getting started
- Download the plugin from the Figma community
- In Figma, right-click → plugins → Figma to code with Handoff
- Select a layer
- Click 'Export layers'
- In Handoff, right-click → Paste from Figma
How it works
The plugin prepares your Figma layers so that you can paste them in Handoff. The plugin tries to match the design as closely as possible. It is meant to give you a head start in building out your designs for exporting to code. However, because most Figma designs are not built with the constraints of the web in mind, you'll usually need to make a few optimisations before your design is suitable for exporting to code:
- Use Auto Layout. Wherever possible, you'll need to use Auto Layout. Not only does this make your design easier to edit and easier to adapt for responsiveness, it also makes the code more readable, because Auto Layout is 1:1 converted to CSS Flexbox.
- Start with mobile, adapt for larger screens When you paste your design, it's best to go for mobile first, so you can work your way up the breakpoints and adapt the design for different screen sizes.
- Swap 'fake' UI elements with real ones. For example, buttons in Figma tend to be made out of a simple box with text. However, for the button to actually work, you'll need to add in a 'real' button in Handoff and copy-paste the styles. The same goes for input fields, radio fields, checkboxes, sections, quotes and other web elements.
- Provide styles for different states. To stick with the button example, you'll probably want to provide the styles for the hover, focus and active states.
- Simplify your element hierarchy. Designs in Figma tend to consist of a lot of nested (often unnamed) layers and groups. Exporting this type of code without any consideration will lead to code that your developer won't be too happy with – obfuscated, unreadable code. As a rule of thumb, you'll want to remove as many groups as possible without breaking the layout.
Limitations
The Figma imports have a few limitations, which are listed below:
- Components. Figma's components are not yet imported as components in Handoff.
- Figma styles. Figma's reusable styles are not yet imported as design tokens in Handoff.