Image To Figma Design

About this plugin

Image To Figma DesignScan any UI screenshot and instantly recreate it as fully editable Figma layers — shapes, text, buttons, images, and icons, placed accurately with real fills, fonts, corner radii, components, and styles. Every scan can also be exported as clean, editable HTML — same pixel-accurate detection, two output formats, no extra credits.Unlike AI tools that guess layout from a vision model, Image To Figma Design uses computer-vision detection for every coordinate — geometry is measured from your actual screenshot, never hallucinated. AI is only ever used to name and organize layers, never to decide where anything goes.Features🧩 Real Figma Components — repeated buttons (same size, radius, color) become one Component + linked Instances, not duplicate frames🌐 Generate HTML from image — export the same detection as a standalone, editable HTML + CSS file, ready to open in any browser or code editor🎨 Local color AND text styles — every fill and font gets a reusable Figma style, not one-off inline values🗂️ Semantic auto-grouping — status bars, nav bars, button groups, and profile rows are detected and wrapped in real auto-layout frames automatically🔍 Smart shape detection — Identifies rectangles, rounded buttons, circles, polygons, and pill-shaped components with precise corner radius inference🧿 Icon library matching — detected icons are matched against a curated icon set and swapped for real vector icons, not flattened images📝 Text recognition — Google Vision OCR with automatic heading / subheading / label / body classification🎨 Accurate color extraction — Corner-biased fill sampling keeps card backgrounds clean even when content overlaps the center🔤 Google Fonts suggestions — After every scan, get the top matched font pairings with one-click copy📚 Batch scanning — queue multiple screenshots and generate them in one pass (plan-dependent)🖼️ Up to 8K resolution support on higher plans⚙️ Adjustable controls — Fine-tune detection sensitivity, size filters, and overlay confidence🪙 Credit system — Pay-as-you-go scan credits with real-time balance displayWhat's New🌐 Generate HTML from image — every scan now exports as editable HTML + CSS alongside Figma layers, from the same detection pass, at no extra credit cost🧩 Real Components & Instances — repeated buttons are now detected and generated as linked Figma Components, not copy-pasted frames🎨 Local text styles — fonts now get reusable Figma text styles alongside the existing color styles🗂️ Semantic layer grouping — automatic detection of status bars, nav/button groups, and profile rows, wrapped in genuine Figma auto-layout (not just visually-similar plain frames)🐛 Fixed phantom backgrounds — plain text no longer occasionally generates a false grey "chip" behind it; background-chip detection now judges by dominant fill color instead of an averaged pixel colorLimitationsWorks best with clean, high-contrast UI designs. May not accurately detect:Photos, gradients, or heavily blurred backgroundsComplex freeform or illustrated shapesHandwritten or decorative fontsVery dense icon grids or repeating micro-patternsTips for Best Results✓ Use high-resolution screenshots (1500px+)✓ Prefer flat or minimal-shadow UI designs✓ Scan the full screen rather than cropped sections for best shape context✓ Use clear, readable text with standard system or Google Fonts✓ Screens with repeated buttons (same size/color) will generate as linked Components automaticallyCommunity & Support💬 Join our Discord for tips, feedback, and early feature access → https://discord.gg/7KcTsANKsq📧 Questions or bug reports → [email protected] the plugin saves you time, please share it and leave a review — it helps a lot! 😊