Back to Plugins
Image To Figma Design

Image To Figma Design

Convert, edit, iterate - for free: Screenshot-to-Figma made easy

screenshotjpegpngconvertimagedesignimage to designjpguiaiscreenshot to designwireframe

Plugin Preview

Image To Figma Design preview

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 all placed accurately with real fills, fonts, and corner radii.Features🔍 Smart shape detection — Identifies rectangles, rounded buttons, circles, polygons, and pill-shaped components with precise corner radius inference📝 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⚙️ 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✨ Lottie-animated coin UI for a smooth, polished experience🔵 Pill button detection — auto-detects rounded CTAs with correct corner radius, not just flat rectangles🔠 Font-weight detection — distinguishes Regular vs Bold by pixel density, not just size🎯 Circularity-first shape classifier — circles stay circles even in cropped or low-res scans🧠 Smarter text roles — heading/subheading/label/body classification adapts to any UI scale⚡ Cleaner Figma output — no stray blue strokes, correct FIXED frame sizing on buttonsLimitationsWorks 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 FontsCommunity & 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! 😊

Plugin Details

Version18
CreatedSeptember 17, 2024
Last UpdatedJuly 16, 2026
CategoryAccessibility tools
CreatorCrafttor
Stats8792 installs, 787 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://admin.crafttor.com
    • https://api.openai.com
    • https://cas-bridge.xethub.hf.co
    • https://cdn-lfs-us-1.huggingface.co
    • https://cdn-lfs-us-2.huggingface.co
    • https://cdn-lfs.huggingface.co
    • https://cdn.jsdelivr.net
    • https://crafttor.com
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com
    • https://huggingface.co
    • https://lfs.huggingface.co
    • https://unpkg.com
    • https://vision.googleapis.com