Figma and Zeplin are both valuable tools in the digital product design field, facilitating efficient collaboration between designers and developers. Figma is a comprehensive design platform used by teams to design, test, and implement their projects. Conversely, Zeplin serves as a collaboration tool for designers and developers, enabling them to create style guides, share resources, and generate specifications.
In this guide, we’ll take you through the process of exporting assets from Figma to Zeplin. Let’s get started!
Step 1: Prepare Your Assets in Figma
Before exporting any assets, ensure that all your designs are appropriately named and organized in Figma. This step will aid in making your exported assets easier to identify in Zeplin.
Step 2: Mark the Assets for Export
In Figma, select the elements you want to export and mark them for export. To do so:
- Select the item you want to export
- Click on the ‘Design’ tab in the right-hand sidebar
- Scroll down to the ‘Export’ section
- Click on the ‘+’ icon to mark the item for export
Step 3: Export Assets from Figma to Zeplin
Next, you’ll need to export the assets marked for export from Figma to Zeplin.
Ensure that your Zeplin desktop app is installed and logged in. If not, download and install Zeplin from the official website. Then:
- Open the Figma file containing the assets you want to export
- Select the frames or components you want to export
- Right-click and select ‘Export’
- Choose the ‘Zeplin’ option from the dropdown menu
The first time you use this feature, you will be prompted to connect Figma and Zeplin. All you need to do is press the connect button, and you’re good to go!
Step 4: Import Assets into Zeplin
Once the export process is completed, Zeplin will automatically open, and you will see the screen to import your designs. Choose the project and sections where you wish to import your designs, then click import.
And there you have it! You’ve successfully exported assets from Figma to Zeplin, ready for your developer team to use.
Remember, Figma and Zeplin may both be standalone tools, but their real power comes from how well they integrate with each other, streamlining the design-to-development process.
Conclusion
Transferring assets from Figma to Zeplin is a straightforward process that helps improve productivity and collaboration within design and development teams. Feel free to revisit this guide whenever you need a quick reference on how to export assets from Figma to Zeplin. Happy designing!