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 instructionsPrerequisitesNode.js installedAn OpenAI API keyA Figma Personal Access Token (PAT)A Figma file with share accessSetupnpm install express openai dotenv node-fetch cors archiverSet Environment Variables:Create a .env file in your project root with:OPENAI_API_KEY=your_openai_keyRun the Backend Server:node server.jsThis starts a local server at: http://localhost:3000Using the Plugin (UI inside Figma)Upload the plugin manifest and code.js + ui.html in Figma’s "Plugins > Development > New Plugin".Run the plugin from within Figma.On first view, click "Upload Figma File" to navigate to the second screen.Paste the Figma file URL and Figma API Token, then click Submit URL.A preview gallery of Figma frames will load. Click a thumbnail to select one.Preview the selected frame in the third view. Click Submit to generate code.OutputThe backend sends the image to OpenAI GPT-4o for code generation.You receive a downloadable generated-ui.zip with:html/index.htmlcss/styles.css