Back to Plugins
CodeTea - HTML to Figma (Convert Website, URL, File, MHTML & Code Snippet to Design)

CodeTea - HTML to Figma (Convert Website, URL, File, MHTML & Code Snippet to Design)

The smartest HTML Importer: Clone any Website (.mhtml) or Code Snippet into Editable Figma Layers.

htmltofigmawebsite to designhtmltodesignurlhtmlconvert htmlhtml to codewebsite to code

Plugin Preview

CodeTea - HTML to Figma (Convert Website, URL, File, MHTML & Code Snippet to Design) preview

About this plugin

CodeTea HTML to Figma is the ultimate plugin to convert any website URL, local HTML file, or code snippet into fully editable Figma designs!✨ CORE FEATURES: • Convert URL to Figma: Just enter any website link and instantly import the webpage as an editable Figma design.• Import Local Files (.mhtml, .html): Upload web archives saved on your computer to perfectly clone offline websites with all images and assets intact (Perfect for pages behind logins!).• Convert HTML Code to Figma: Paste any HTML code snippet directly into the plugin to generate Figma layers instantly.• Multiple Viewport Sizes: Generate designs for standard breakpoints including Phone (375w), Tablet (768w), Laptop (1440w), Desktop (1920w), or set your own Custom dimensions (Pro).🚀 HOW TO USE:1. Choose Source: Open the plugin and select the "URL", "File", or "Code" tab.2. Input Data: Enter the webpage link, drag-and-drop a local .mhtml/.html file, or paste your HTML snippet.3. Select Viewport: Choose your desired device width/height.4. Generate: Click the "HTML to Figma" button and watch your design come to life!🔥 WHY CHOOSE CODETEA?• Editable Layers: No flat screenshots! Everything is converted into editable text, vectors, shapes, and frames.• Offline & Login Support: With .mhtml support, you can import complex pages saved locally directly from your browser without losing a single image.• Smart Image Processing: Automatically fetches and perfectly resizes WebP, PNG, JPEG, and SVG assets.• Pixel-Perfect Fidelity: We maintain layouts, backgrounds, and typography with incredible accuracy.• Clean Structure: AI-driven layer naming and grouping for a professional, clean file.Learn more at: https://codetea.io

Plugin Details

Version57
CreatedFebruary 4, 2025
Last UpdatedJuly 18, 2026
CategoryImport & export plugins
CreatorLam
Stats1148 installs, 165 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Network Access:

    This plugin needs to connect to a local API server for development purposes.

  • Editor Types:
    figma
  • Allowed Domains:
    • https://*.google-analytics.com
    • https://api.codetea.io
    • https://asia-southeast1-tagjs-prod.cloudfunctions.net
    • https://placehold.co
    • https://storage.googleapis.com