Figma and Zeplin
Teams come in all shapes and sizes and they collaborate in a number of different ways. As a collaborative design tool we're always mindful about building new features, and enhancements to existing features, that help facilitate various workflows.
The handoff between designers and developers is incredibly important. In addition to our own Developer Handoff feature, Figma also supports the ability to export your work to Zeplin.
Check out this quick video of all the great things you can do in Zeplin.
Creating a project in Zeplin
When you launch Zeplin you'll be prompted to create your first project. You can choose between Android, iOS, or Web.
Once you've created your project you can give it a name in the right side menu.
Enabling the Zeplin integration
After you create and name your project in Zeplin you can enable the Zeplin integration inside Figma:
- Login to your Figma account
- Click the hamburger menu in the upper left corner of the toolbar
- Search for "Zeplin", or select Integration, then Zeplin from the dropdown menu
- Then click Got it
How do I export my content from Figma?
Any Frames you select in Figma can be exported to Zeplin. Every frame you export will be imported as a "Screen" in the Zeplin "Project" you choose.
- Select one (or more) frames on your canvas
Shift + Command + E, or select Export from the Menu.
- Click on the Zeplin Tab
The Zeplin application will automatically open. Select the appropriate Project from the menu then click Import.
If the Zeplin Tab is not appearing in the Export Picker, the selected object(s) on your canvas may not be in a frame.
- Use the F keyboard shortcut to activate the frame tool
- Click and drag a frame around the object(s) you wish to export
- Now try opening the export picker once more
It's as simple as that!
Check out Zeplin's Help Center to learn more about all their features.