explaingit

patrickjs/figma-html

Analysis updated 2026-07-18 · repo last pushed 2022-02-16

Audience · designerComplexity · 3/5DormantSetup · moderate

TLDR

A Figma plugin and Chrome extension that converts Figma designs into HTML/React/Vue code, and can also turn live websites into editable Figma layers.

Mindmap

mindmap
  root((figma-html))
    What it does
      Design to code export
      Website to Figma import
      Figma plugin
    Tech stack
      Figma plugin
      Chrome extension
      JavaScript library
    Use cases
      Design system handoff
      Rapid prototyping
      Agency workflows
    Audience
      Designers
      PM founders
    Limitations
      Not all CSS supported
      No video or GIFs
      Custom fonts need upload

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Export a Figma design built with autolayout directly into HTML, React, or Vue code instead of rebuilding it by hand.

USE CASE 2

Paste a URL into the Figma plugin to bring an existing website in as editable Figma layers for redesign.

USE CASE 3

Use the Chrome extension to capture pages that require login before converting them into Figma layers.

USE CASE 4

Programmatically convert HTML to Figma format using the JavaScript library instead of the plugin UI.

What is it built with?

JavaScriptFigma Plugin API

How does it compare?

patrickjs/figma-html0verflowme/alarm-clock0verflowme/seclists
Language—CSS—
Last pushed2022-02-162022-10-032020-05-03
MaintenanceDormantDormantDormant
Setup difficultymoderateeasyeasy
Complexity3/52/51/5
Audiencedesignervibe coderops devops

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Best-effort conversion, expect to manually clean up unsupported CSS, fonts, videos, and GIFs after export.

Copy-paste prompts

Prompt 1
Help me set up autolayout in Figma so this design exports cleanly to React code with figma-html.
Prompt 2
Show me how to use the Chrome extension to capture a logged-in page before importing it into Figma.
Prompt 3
Walk me through using figma-html's JavaScript library to convert an HTML page into Figma layers programmatically.
Prompt 4
What CSS properties and HTML elements does figma-html not support, so I know what to fix manually after export?

Frequently asked questions

What is figma-html?

A Figma plugin and Chrome extension that converts Figma designs into HTML/React/Vue code, and can also turn live websites into editable Figma layers.

Is figma-html actively maintained?

Dormant — no commits in 2+ years (last push 2022-02-16).

How hard is figma-html to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is figma-html for?

Mainly designer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

Alternatives & similar repos