Image Uploader

About this plugin

Transform Figma design into HTML and CSS is a powerful Figma plugin that helps you convert your Figma designs into clean, responsive HTML and CSS using AI model capabilities. With an intuitive multi-view UI inside Figma and a backend server that fetches image previews and processes visual data into code, This plugin empowers developers and designers to rapidly prototype web interfaces without manual slicing or coding.

Usage instructions

Prerequisites

1. Node.js installed
2. An OpenAI API key
3. A Figma Personal Access Token (PAT)
4. A Figma file with share access

Setup

npm install express openai dotenv node-fetch cors archiver

Set Environment Variables:

1. Create a .env file in your project root with:
2. OPENAI_API_KEY=your_openai_key

Run the Backend Server:

node server.js

This starts a local server at: http://localhost:3000

1. Using the Plugin (UI inside Figma)
2. Upload the plugin manifest and code.js + ui.html in Figma’s "Plugins > Development > New Plugin".
3. Run the plugin from within Figma.
4. On first view, click "Upload Figma File" to navigate to the second screen.
5. Paste the Figma file URL and Figma API Token, then click Submit URL.
6. A preview gallery of Figma frames will load. Click a thumbnail to select one.
7. Preview the selected frame in the third view. Click Submit to generate code.

Output

The backend sends the image to OpenAI GPT-4o for code generation.

You receive a downloadable generated-ui.zip with:

html/

index.html

css/

styles.css