This project is using Create React App.
Figma Handoff is a design handoff tool that can help you generate design mark. It's useful for developers. Figma Handoff is a web app and uses Figma API to get your design data, but never saves you data in any server.
Figma Handoff supports both offline and online mode. Please visit https://figmacn.com/handoff/.
Click here to see a demo.
Visit https://figmacn.com/handoff/ and fulfill your file link and Access Token, then you'll get your frames in the file. It will save your Access Token in the computer for convenience so DON'T use it in the device that are not trusted (like Net-bar).
Select the frames you need and other options, click the button to start generate. It only fetch frames directly in canvas so DON'T group them or they can't be recognized.
It depends on your network and file size. To speed up you can:
- Select less frames in the second step.
- Uncheck
use high quality imagesoption. - Use VPN and use global mode.
Simply say Access Token is a key to get your design data. You can generate an Access Token in the Figma setting page. DON'T paste Access Token in somewhere that is not safe (like the computer note).
No. All the work will be done inthe browser after it fetches your data from Figma server. The images (Frame thumbnails, components thumbnails) will be processed in a server at Heroku and the code is open sourced here.
I recommend designers slice images. All the elements with exports in the right panel will be ecported as sliced images. For example, the settings below will export thumb-up-ios@3x.png and thumb-up.svg (this element named thumb-up).
- Check
Clip Contentfor frames directly in the canvas or it'll cause offset issue.
Figma Handoff it's free and open sourced. You can donate me if you think it's useful. Thanks!
PayPal: https://paypal.me/leadream
