html-to-figma

Overview

Figma Plugin to convert HTML to Figma. Open source version of html.to.design

Repository Structure:

• web-app: Code for the web page describing the product
• plugin: Figma plugin that is directly used in the Figma app

Motiviation

One promise of Generative AI is that a model might be able to come up with a Figma when prompted. However, models are more likely to produce designs through code (token-based) since that what they were trained on.

One work around is to having an LLM produce a Figma is:

1. Have the LLM come up with code for the design in HTML + CSS
2. Create a tool to convert HTML + CSS to Figma nodes
3. Take that produced Figma node and paste it into a Figma file

For 2, the only software solution is html.to.design, which costs money. This project aims to produce an open-source alternative

Figma Plugin: Development

Follow this guide for how to build and test a Figma Plugin

Getting Set Up

Install dependencies:

cd plugin

npm install

Running Tests:

cd plugin

npm run test

Web App Development:

Running Locally:

cd web-app

npm install

npm run dev