Forge
Any website. Editable Figma design. One click.
How It Works
Three steps. Zero friction.
From live website to editable Figma design in under a minute.
Browse
Navigate to any website in Chrome. Production sites, localhost, authenticated pages — Forge handles them all.
Extract
Click the Forge extension to capture the DOM, styles, fonts, images, and design tokens. Intelligent analysis identifies components and layout patterns.
Create
Open the Forge Figma plugin to generate fully editable Auto Layout frames, styles, variables, and reusable components.
Features
Pixel-perfect extraction. Every time.
Every feature designed to produce Figma files that designers actually want to work with.
Layout Fidelity
Auto Layout fidelity from CSS flexbox and grid
- CSS flexbox properties map directly to Figma Auto Layout parameters
- CSS Grid layouts converted to nested Auto Layout structures
- Padding, gap, alignment, and wrap behavior preserved accurately
- Responsive breakpoints captured for multi-viewport designs
Side-by-side — CSS flexbox layout
perfectly mirrored as Figma Auto Layout
Design Tokens
Design tokens extracted as Figma styles, variables, and color palettes
- CSS custom properties detected and converted to Figma variables
- Typography styles extracted with font family, size, weight, line-height
- Color palettes organized automatically by hue and usage frequency
- Spacing and border-radius tokens mapped to Figma style primitives
Extracted design tokens organized
as Figma variables and color styles
Component Detection
Repeated DOM patterns become reusable Figma components
- Intelligent pattern matching identifies repeated DOM structures
- Cards, buttons, list items, and nav elements auto-componentized
- Variant properties inferred from class and attribute differences
- Component instances linked to a shared master for bulk editing
Detected components organized
in a Figma component library
Framer-Aware
Enhanced extraction from Framer sites
- Detects Framer-specific markup and animation wrappers
- Extracts clean semantic structure underneath Framer's runtime layer
- Preserves Framer component boundaries and naming conventions
- Works equally well on localhost, staging, and production sites
Framer site extraction showing
clean layer structure in Figma
Universal
Works on localhost, authenticated pages, and production sites
- Extract from local development servers during design review
- Capture authenticated dashboards and admin panels
- Convert competitor sites for design analysis and inspiration
- No server-side rendering required — pure client-side extraction
Extraction from localhost:3000
producing production-quality Figma output
By The Numbers
Proven and tested
Five milestones of development. Hundreds of tests ensuring extraction quality.
Pricing
Convert with confidence. Scale with ease.
A generous starter plan for occasional use. Pro and Team tiers for power users and agencies.
Starter
Try Forge with basic extraction features.
- 15 conversions per month
- Basic DOM extraction
- Auto Layout generation
- Community support
Pro
Unlimited conversions with full extraction power.
- Unlimited conversions
- Design token extraction
- Component detection
- Framer-aware mode
- Priority support
Team
Everything in Pro, built for team collaboration.
- Everything in Pro
- Team workspace
- Shared component libraries
- Centralized billing
- Dedicated support
Turn any website into a Figma file. Now.
Add the Chrome extension, install the Figma plugin, and start converting.