LoftingWhat it copies
The pictures are cut from real captures of Tailwind's site, shadcn/ui's dashboard, MUI's dashboard and Wikipedia. The layer names are the ones those captures produced.
The whole page
One click copies everything down to the footer. Panels that scroll inside the page are opened out too.
On screen
10,345 pixels tall. All of it is copied.
Layers named after what they are
If the page is built with MUI, Ant Design, Bootstrap, Mantine, shadcn/ui or Chakra, each layer gets its component's name and variant. You can find the button without opening forty frames called Frame.
- Card
- CardHeader
- Total Revenue
- CardAction
- Badge / outline
- CardFooter
Your design system's own components
If your Figma library has a component with the same name, the paste uses it: a real instance, with its variant and its text, linked to your library. In our test, 98 buttons on MUI's button page pasted as instances of a team's library.
- Button
- Variant
- contained
- Size
- small
- Color
- primary
- From your library
Coming soon
Three things we're building next. If you'd use one, tell us: hello@lofting.dev.
A report of where the product has drifted
Compare the live product with your Figma library on a schedule, and list where they disagree, such as a hard-coded colour or a button that isn't the library's.
| Checkout, Pay button | Colour is #1565c0. The library says #1976d2. |
| Settings, Save button | Text is 14px. The library says 15px. |
| Orders, status chip | Not from the library. |
A Figma file that mirrors what shipped
Every night, capture each screen of the real app in each of its states and at each width, into one Figma file. Designers start from what's live.
Your variables too
Today a capture can use your library's components. Next is using your colour, spacing and type variables as well, so a pasted page is bound to your system.