Skip to main content
Many teams don’t have a design system yet. They have products. Teams run several apps built independently, each with its own version of every button, and dozens of patterns in use that nobody has ever written down. Starting a design system from scratch takes months. Figr starts from what you already ship. And it goes deeper than a list of components and tokens. Figr reads 1000s of your real screens and learns where and how each component and token is used. That’s what lets it use your system the way your team does, not just look like it. Image
The short version: Upload hundreds of screens from the products you already have. Figr pulls out the colors, type, spacing and components they use, pattern-matches where and how each one appears, and writes the usage guidelines for you. The result is one design system your team can review, edit and use in every design Figr makes.
Example on this page: FreshFold, a laundry pickup and delivery app. Customers book a pickup in the app, a rider collects the bag, and clean clothes come back within 24 hours.

​
How it works

1

Upload your screens

Add screenshots or walkthrough from every product, plus any CSS or style files you have. The more screens, the deeper Figr’s understanding. In the FreshFold example: screens from the customer app, the rider app, the laundry partner app and the ops dashboard.
2

Figr finds what’s shared

Figr compares every screen and pulls out the colors, type scale, spacing, components and patterns they use.Screenshot 2026 10 21 At 1 28 33 AM
3

Figr learns how each piece is used

Figr pattern-matches across every screen to see where and how each component and token appears, such as which button sits on which screens, and which color means what. It then writes a usage guideline for each one automatically.Screenshot 2026 10 21 At 1 29 36 AM
4

Review the system

You get one structured design system, with each token and component labelled by where it’s used. Edit anything before you save it.Screenshot 2026 10 21 At 1 20 15 AM
5

Design with it

From then on, every screen Figr makes uses the new system, and follows its usage guidelines, across all your products.

​
What changes for your team

  • Design leads get a working system with usage guidelines in days, not a quarter.
  • Undocumented patterns finally get names and owners.
  • Every product starts to look like one product.

​
Go further

Want to fine-tune what Figr extracted? Edit text, color, spacing and layout directly on the design.

Direct editing

Change text, color, spacing and layout without regenerating.

Design system

Set up and edit your design language.

DS compliant prototypes

Next step: build prototypes that follow your new system.