Back to Plugins
Figma to Handoff

Figma to Handoff

<p>With the Figma to Handoff, you can quickly convert your designs to <strong>HTML</strong>, <strong>CSS</strong> and <strong>Vue</strong> code.</p><p><br></p><p>It allows you to copy-paste Auto Layout enabled layers to Handoff. From the Handoff interface, you can export the code as a .zip file or copy-paste the code right into your IDE.</p><h2><br></h2><h2>How it works</h2><ol><li>Install the plugin</li><li><a href="https://app.handoff.design/signup" rel="noreferrer noopener nofollow" target="_blank">Sign up for a free Handoff account</a></li><li>In Figma, right-click → plugins → Figma to code with Handoff</li><li>Select a layer</li><li>Click 'Export layers'</li><li>In Handoff, right-click → Paste from Figma</li></ol><p><br></p><p>Tip: To make full use of this plugin and <strong>to ensure good code quality</strong>, please read the <a href="https://www.notion.so/handoff/Import-from-Figma-affa24be9f8341b6ad133d37e2edc334" rel="noreferrer noopener nofollow" target="_blank">Handoff documentation article 'Importing from Figma'.</a></p><p><br></p>

responsivedesigncssdesign to codehtmlvueconvert to codecodecode-generators

Plugin Preview

Figma to Handoff preview

About this plugin

With the Figma to Handoff, you can quickly convert your designs to HTML, CSS and Vue code.


It allows you to copy-paste Auto Layout enabled layers to Handoff. From the Handoff interface, you can export the code as a .zip file or copy-paste the code right into your IDE.


How it works

  1. Install the plugin
  2. Sign up for a free Handoff account
  3. In Figma, right-click → plugins → Figma to code with Handoff
  4. Select a layer
  5. Click 'Export layers'
  6. In Handoff, right-click → Paste from Figma


Tip: To make full use of this plugin and to ensure good code quality, please read the Handoff documentation article 'Importing from Figma'.


Plugin Details

Version1
CreatedJune 2, 2021
Last UpdatedNovember 8, 2021
CategorySoftware development
CreatorNick van den Berg
Stats1029 installs, 46 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui/dist/index.html
  • main:dist/code.js
  • Editor Types:
    figma