Convert any website into
fully editable Figma designs

Import websites into Figma to iterate, redesign, benchmark and more;
without building each element from scratch.

500000+

Users

3500000+

webpages imported

logologologologologologologologo

Get any webpage into Figma in just 3 steps

  1. 1

    Install the plugin

    screenshot of the story.to.design plugin showing the field where to paste your Storybook link to connect to it
  2. 2

    Enter the webpage to import

    screenshot of the story.to.design plugin showing the list of the components found in the provided Storybook, with some selected for import
  3. 3

    Click on Import

    screenshot of Figma with the UI kit result from the import
  4. 4

    Edit anything and everything

    screenshot of Figma with the UI kit result from the import
  5. We have a Chrome extension too!

    Need a webpage that's behind a log-in, on a private network, or a specific page state? We have a Chrome extension for that.

    Import exactly what you see online into Figma!

    Install Chrome extension

    Works on all Chromium-based browsers like Chrome, Edge, Arc, Brave, Opera or Vivaldi.

Boost your design process

A card component with all layers highlighted and auto-layout showing.
Save time on redesigns

Recreating a site or building design elements from scratch can take hours. html.to.design allows you to use any website as a base, with fully editable layers to turn into components or redesign into something else.

screenshot showing an icon button component and its searchbox sub component
Improve collaboration

html.to.design makes it easier to brainstorm with a website in an editable format. Your design team can change and move elements around to collaborate in real time.

hand pointer over a button labelled 'Primary'
Extract design assets easily

html.to.design helps you extract design assets from any website, such as images and fonts, and will even create local Figma styles for you, automatically!

A set of 2 style-guides with two different styles.
It’s not just for designers!

The best part? No design skills required! Whether you’re just starting out with Figma, or you’re a developer who needs a website’s design assets... You don’t need to be a seasoned designer to use html.to.design.

What people are saying

Testimonials from users around the world.

Save SO MUCH time!

“Saves SO MUCH time! Essential plugin.”

Photo of Callen Hedglen

Callen Hedglen

Best design-help tool

“This is one of the best design help tools I've encountered. It has saved me hours of time trying to create templates from scratch.”

Photo of Aditi Sinha

Aditi Sinha

Couldn’t live without this!

“I couldn't live without this! What an amazing extension!”

Photo of Melissa Hermes

Melissa Hermes

Our design & marketing teams love it

“I’ve been using this for a few months as part of our website migration. Our design and marketing team love it!”

Photo of Sachee Perera

Sachee Perera

COO at CorePlan

Time saver

“Saved me not hours but days of work. It is awesome”

Photo of Islam Sydykov

Islam Sydykov

The team has been wonderful

“Using this plugin since its early launch. The team has been wonderful in their iterations, improvements and listening to feedback.”

Photo of Nic

Nic

Product Designer

Makes my work much faster

“as a product designer, it makes my work much faster. It's perfect for making a quick and professional MVP”

Photo of Alan Karakus

Alan Karakus

Product Designer

Works like magic

“It's great and simple. Works like a magic.”

Photo of Vikas Raj Yadav

Vikas Raj Yadav

Pricing

FREE

$0
No sign-up required.
No credit card required.

Up to 10 imports every 30 days

  • Import via URL
  • Import via Chrome extension
  • Desktop, mobile and tablet viewports
  • Dark/light themes
  • Download missing fonts
  • Discord support
Install the plugin

PRO for teams

🏷️
Save up to 35%
for large teams
$15 per user/month
Billed monthly

All PRO features

Get team plan

Get started with html.to.design

Screenshots of a component in Storybook and in Figma