Livery for Figma: copy any website into Figma, as layers you can edit
RELEASE NOTES, CALMER
Ship calmer releases.
Plan, stage and roll out every change from one quiet timeline.
Plan
Stage
Roll out
From any website
to your canvas.
The Livery extension copies a site, every page with its text, images, videos and fonts. The plugin builds it in Figma as a design system you can edit: variables, text styles, components and every page, linked.
Free: 5 pages a copy · Pro: 40 pages · Figma desktop, any plan
Try it
Press Import. Watch a site become a design system.
The real steps, as the plugin shows them. Pick what comes in, import, then open any page of the file it made.
PAGES
An empty file.
Pick what comes in, then press Import.
- DownloadWaiting
- Read the copyWaiting
- Prepare imagesWaiting
- Variables and text stylesWaiting
- FoundationsWaiting
- MotionWaiting
- Components and variantsWaiting
- SectionsWaiting
- PagesWaiting
- WalkthroughWaiting
Press Import, or scroll and watch
How it works
From the site you like to the file you design in.
- 01
Copy the site
Click the Livery extension on any website: this page, every page of the site, or record a walkthrough while you browse.
LCopy this sitenorthwind.test- /copied
- /pricingcopied
- /productcopied
- /changelogcopying…
- /aboutwaiting
Page 4 of 5 · text, images, fonts, motion
- 02
Open Livery in Figma
Sign in once in the plugin. Every copy you make is waiting there, newest first, in its site's colours.
Your copiesnewest first- Northwind5 pages · 26 assets
northwind.test
- Fieldnote1 page · 9 assets
fieldnote.test
- Parcel & Co3 pages · 14 assets
parcel.test
Import Northwind - 03
Bring it in
Pick a copy and import. It lands as a design system: foundations, components with variants, sections, and every page built from them.
NorthwindPages⦿ Cover
✦ Get Started
≈ Changelog
✲ Foundations
❖ Color Palette
❖ Typography
❖ Icons
❖ Motion & Animation
✲ Base Components
❖ Button
❖ Badge
❖ Input
✲ Landing Page
❖ Hero
❖ Pricing
❖ Footer
✲ Pages
❖ Site Pages
- /copied
- /pricingcopied
- /productcopied
- /changelogcopying…
- /aboutwaiting
Page 4 of 5 · text, images, fonts, motion
01 / 03 · Copy the site
What lands in Figma
A working copy, not a screenshot.
Each part as Figma has it. Point at anything below: it selects like a frame and plays like the real thing.
Variables
Variables, bound
The site's colours, radii and spacing as variables, bound to the layers that use them. Change one, the copy follows.
Text styles
AaText styles
Its type as text styles in the site's own fonts. A font Figma doesn't have is set in Inter, and the plugin says which.
Components
❖ ButtonStart freeBook a demoTypeStateComponents with variants
Buttons, badges, inputs and cards, each a set with its variants. The pages use instances.
Prototype
northwind.test/▶ PresentNorthwindShip calmer releases
On click → Navigate to “Pricing”
Click-through prototype
Links between copied pages become prototype clicks: the copy navigates like the site.
Motion
320ms · cubic-bezier(0.2, 0, 0, 1)Motion, measured
Each transition and animation the site declares, with its duration and its real easing curve.
Vectors
42,902 dots → 43 vectors
Big drawings stay vectors
Charts, maps and illustrations come in as vectors you can edit. A dotted map of 42,902 dots lands as 43 vectors, so Figma stays quick.
Media
▶Pictures, video, your walkthrough
Images as fills and components, video where your Figma plan plays it, and a recorded walkthrough beside the pages, each step linked.
Install
In Figma in a minute.
It runs in the Figma desktop app, on any plan. Copy sites with the Livery extension for Chrome, Edge, Brave and Arc.
The extension that copies sites is on the Chrome Web Store. Add it to Chrome (Edge, Brave and Arc work too).
Copy it in the browser.
Design with it in Figma.