FeaturesUsageFAQFeedbackFigmacn.com

Juuust Handoff

Generate Figma design specs, making developer-handoff easier
Install PluginRecommendUse online

Features

  • Components & Styles

    Extract components and styles automatically.

  • Exports

    Export layers with export settings automatically.

  • Download file

    Download design specs for developer without waiiting.

  • Size & Distance

    Inspect layers' size and distance quickly.

  • Settings

    Set your own preferences to hand-off design of different platform.

  • Multiple styles

    Click to switch range of a text layer, Double click to copy it.

Usage

Install Plugin
Use online

  • 1Install juuust handoff plugin

    Goto Juuust Handoff plugin page to install this plugin.

  • 2Open file and start plugin

    Open a file and start the plugin, select the frames you want to export.

  • 3View design specs

    Unzip the file exported, double-click index.html to view design specs.

  • 1Generate access token

    Goto Figma personal setting page, generate an access token, copy it.

  • 2Fill the file link and access token

    Goto juuust handoff online page, fill your file link and access token.

  • 3Select frames and set options

    Select the frames you want to export, set the options and start exporting.

  • 4View design specs

    Unzip the file exported, double-click index.html to view design specs.

FAQ

  • • Why it's too slow?

    At first I recommend you to use plugin because it's faster. The speed depends on your network and file size. To speed up you can:

    1. Select less frames in the second step.
    2. Uncheck use high quality images option.
    3. Use VPN and use global mode.

  • • What is Access Token？

    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).

  • • Will it store my design data anywhere?

    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.

  • • What does "export components list" mean?

    Figma Handoff will find out all the master components in this file and list them in left pannel if you check this option. This will make mark exporting longer because it'll fetch all components' images. We recommend you to place all master components in an independent page so you don't need to export components list.

    ✅ master components in a page

    ✅ master components in a page

    ❌ mix master components in your design

    ❌ mix master components in your design

  • • How to delivery exported images?

    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).

    Export settings

  • • Other attentions?

    Check Clip Content for frames directly in the canvas or it'll cause offset issue.

Made with ❤️ using Figma by Rachel Li