Plugin is available now! Click here to install.
Heron Handoff can help you generate offline file with design specs. It's useful for developers handoff. This project is the template you generate from, to generate handoff file You need to install Heron Handoff Plugin first.
For more information please visit https://figmacn.com/handoff/.
Click here to see a demo.
Visit Heron Handoff Plugin in Figma and click install.
Open a file in Figma, right click and select plugin -> Heron Handoff to run it.
This plugin will recognize every top-level frame in the canvas and now you can select what you want.
Checking Export components list option will generate a list of components in the left panel of design specs. You don't need to check it if you just put all components in a page like below.
The plugin will recognize all layers with export property. You need to select the images you want to export. The repeated images will be renamed and mark as a red symbol.
Just hit the generating button when everything is done.
You will get a zip file after seconds. Upzip it and open index.html. Now you can view design specs. Send this zip to developers to handoff.
All the elements with exports in the right panel will be exported as sliced images. Note that slice layers without export property will not be exported, and also instance will not inherit export form main component.
For example, this settings below will export thumb-up-ios@3x.png and thumb-up.svg (this element named thumb-up).
There are two reasons for offset:
- Some layers are flipped or transformed.
- Layers overflow from top-level frame but
clip contentnot checked.
I'm look into the first situation but you can check clip content for the second situation.
Figma Handoff it's free and open sourced. You can donate me if you think it's useful. Thanks!
PayPal: https://paypal.me/leadream
This project is using Create React App.