Advanced design system for Figma

High fidelity. Low effort.

High fidelity.
Low effort.

High fidelity. Low effort.

Focus on design while Once UI handles prototypes, documentation and handoff.

Focus on design while Once UI handles prototypes, documentation and handoff.

Focus on design while Once UI handles prototypes, documentation and handoff.

  • UI designed with the Once UI design system for Figma
  • Documentation for the Once UI design system for Figma
  • Blog designed with the Once UI design system for Figma
  • Pricing page designed with the Once UI design system for Figma
  • Admin panel designed with the Once UI design system for Figma

Trusted by freelancers, startups and businesses

Trusted by freelancers, startups
and businesses

Ryan Ward reviews Once UI Figma design system

Ryan Ward

Founder, Confinity AI

We have saved a lot of investment on design in the early days of our startup, Confinity AI. Once UI has set us on grounds with solid foundations and a unique branding.

Mary Blabaum reviews Once UI Figma design system

Mary Blabaum

Director of Design, Acquia

Once UI is an excellent design system that offers flexibility and scalability, making it perfect for small to mid-sized teams. One of the standout features is the emphasis on accessibility.

Csaba Panacz reviews Once UI Figma design system

Csaba Panacz

Freelance designer

Relying on a compact and intuitive variable system that's easy to customize is a huge benefit to freelancers like myself. The components are very well crafted.

Design system framework for Figma

Design products, not Dribbble shots

Most design systems focus on creating aesthetic mockups but fall short in real-world projects with shifting requirements, complex products, and looming deadlines. Explore a framework designed for these challenges, craft 'wow-worthy' prototypes, and hand off to developers without a glitch.

Keep design and development in perfect sync by sharing styles and themes between Figma
and your codebase.

Signature token system. Scale complex projects with ease.

Theme management. Switch between themes with a single click.

Prototyping ready. Bring ideas to life with interactive prototypes.

Accessible. Meet the highest WCAG standards out of the box.

Responsive. Use the built-in variants for desktop, tablet and mobile.

CSS variables. The same token system you use in Figma, for CSS.

Social profile designed with the Once UI design system for Figma
Dashboards designed with the Once UI design system for Figma
Dashboards designed with the Once UI design system for Figma
Dashboards designed with the Once UI design system for Figma

Documentation

Everything you need
to get started in minutes

Say goodbye to the hassle of creating documentation. Once UI comes fully documented, making it easy to learn and tailor to your needs. Now, your team can concentrate on what truly matters: developing your product.

Design system illustration, vector image
Design system illustration, vector image
Design system illustration, vector image
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI design system component documentation in Figma
Once UI Figma design system and JavaScript technologies
Once UI Figma design system and JavaScript technologies

primary / background

strong

function/primary/800

function/primary/800

function/primary/300

function/primary/300

medium

function/primary/1000

function/primary/1000

function/primary/200

function/primary/200

weak

static/white

static/white

function/primary/100

function/primary/100

primary / on-background

strong

function/primary/100

function/primary/100

static/white

static/white

medium

function/primary/300

function/primary/300

function/primary/1000

function/primary/1000

weak

function/primary/500

function/primary/500

function/primary/800

function/primary/800

primary / solid

strong

function/primary/600

function/primary/600

function/primary/500

function/primary/500

medium

function/primary/500

function/primary/500

function/primary/400

function/primary/400

weak

function/primary/400

function/primary/400

function/primary/300

function/primary/300

:root {

/* primary */

--primary-background-strong:

--primary-background-medium:

--primary-background-weak:


--primary-on-background-strong:

--primary-on-background-medium:

--primary-on-background-weak:


--primary-solid-strong:

--primary-solid-medium:

--primary-solid-weak:


--primary-on-solid-strong:

--primary-on-solid-weak:

var(--function-primary-300);

var(--function-primary-200);

var(--function-primary-100);


var(--static-white);

var(--function-primary-1000);

var(--function-primary-800);


var(--function-primary-500);

var(--function-primary-400);

var(--function-primary-300);


var(--static-white);

var(--function-primary-900);

A design system for your whole team

A design system for your whole team

Transform designs into code faster than ever before

Cut the back and forth and get rid of inconsistencies between your designs and live applications. Once UI is inspired by frameworks like React and Vue, letting you benefit from modern coding paradigms in Figma.

CSS variables. Use the same
token system in Figma and CSS.

Responsive layouts. Use breakpoints to
define layouts and display elements conditionally.

Component settings. Use the same variables
in Figma and code for component configuration.

Our signature token system

Start with Once UI for free

Get started with
Once UI's foundations

Discover the system at the heart of Once UI. Adopt a powerful and flexible token system for your next project—no need to start from scratch. Manage themes, colors, responsive layouts, loading and empty states, and more.

Guide to building a powerful token system

Ready-to-go token system for Figma

CSS variables

Fully responsive

Create flawless, responsive
designs for every screen

Create flawless, responsive designs
for every screen

Ensure your brand resonates on any device. Say goodbye to the hassle of duplicating designs for different resolutions. Design fully responsive screens in Figma and switch between devices with just one click.

Flexible layouts. Benefit from a ready-to-go breakpoint system.

Responsive components. Select desktop, tablet or mobiles mode.

Simplify your files. Create a single design and resize for any resolution.

UI kit for Figma

UI kit for Figma

Build production quality UI
lightning fast and stress-free

Build production quality UI
lightning fast and
stress-free

Design beautiful interfaces and leave the crunch behind. Impress your customers and give breathtaking demos with a UI kit for Figma that's equipped with all the components you’ll need.

Template gallery

Draw inspiration from full-page designs.

UIs built with the Once UI  design system framework for Figma
UIs built with the Once UI  design system framework for Figma
UIs built with the Once UI  design system framework for Figma

Chart library

Design compelling analytics dashboards and data-heavy applications.

Screen time

Range

Last week

Label:

Value

Label:

Value

Label:

Value

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

3,000

2,000

1,000

Productivity:

22h

Social:

15.6h

Finance:

4.3h

Layout blocks

Build layouts from ready-made components like headers, menus, and footers, available for every screen size.

All systems operational

Product

Home

Solutions

Pricing

Company

Blog

Vision

About

Careers

Hiring!

Resources

Terms of Use

Privacy Policy

Contact

FAQ

© 2023

Once UI

-

All rights reserved.

Language

English (US)

Social interactions

Bring social elements into your designs, including comments, notifications, and profiles.

Notifications

Once UI social module for Figma

Sarah Walker shared a new photo

Just now

Tom Parker shared a new photo

3 minutes ago

Once UI social module for Figma

Ingrid Eriksson sent you a message

2 hours ago

Once UI social module for Figma

Priya Desai sent you a friend request

yesterday

Accept

Decline

Tom Parker shared a new photo

2 days ago

Name shared a new photo

Last week

Name shared a new photo

Last month

Name shared a new photo

3 months ago

Data viz module

Transform complex
data into meaningful insights

Craft beautiful visualizations with Once UI’s responsive, customizable data viz module. It’s compatible with D3 and VisX,
the most popular visualization libraries among developers.

Craft beautiful visualizations with Once UI’s responsive, customizable data viz module. It’s compatible with D3 and VisX, the most popular visualization libraries among developers.

Craft beautiful visualizations with Once UI’s responsive, customizable data viz module. It’s compatible with D3 and VisX, the most popular visualization libraries among developers.

Chart types

Drag and drop commonly used chart types: Line, Bezier, Bar, Pie, Distribution

Once UI for Figma, chart library
Once UI for Figma, chart library
Once UI for Figma, chart library
Once UI for Figma, chart library
Once UI for Figma, chart library

Stack & Mix

Easily create stacked & mixed charts with an intuitive component system.

Once UI for Figma, chart library
Once UI for Figma, chart library
Once UI for Figma, chart library

Customize colors

Set the range and switch between categorical, sequential and diverging color schemes.

Coming soon

Build React apps

Kick off projects with Once UI's React library

Kick off projects
with Once UI's React component library

Empower your designers and developers to collaborate effectively from the get-go. Create React apps using a robust component library that aligns perfectly with the your design system for Figma.

Empower your designers and developers
to collaborate effectively from the get-go. Create React apps using a robust component library that aligns perfectly with the your design system for Figma.

Get Once UI

Free

Get the system at the core of Once Ul, with regular updates and access to exclusive content.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables

Free

Get the system at the core of Once Ul, with regular updates and access to exclusive content.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables

Free

Get the system at the core of Once Ul, with regular updates and access to exclusive content.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Most popular

Pro

20% off

$160
/year
Access to Once Ul's full platform, for individual use. Great for freelancers and solo designers.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation
This plan is backed by our
180-day money-back guarantee
Most popular

Pro

20% off

$160
/year
Access to Once Ul's full platform, for individual use. Great for freelancers and solo designers.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation
This plan is backed by our
180-day money-back guarantee
Most popular

Pro

20% off

$160
/year
Access to Once Ul's full platform, for individual use. Great for freelancers and solo designers.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation
This plan is backed by our
180-day money-back guarantee

Team

20% off

$560
/year
Access to Once Ul's full platform, for 4 users. Perfect for teams and agencies focused on quality.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation

Team

20% off

$560
/year
Access to Once Ul's full platform, for 4 users. Perfect for teams and agencies focused on quality.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation

Team

20% off

$560
/year
Access to Once Ul's full platform, for 4 users. Perfect for teams and agencies focused on quality.
Design foundations guide
Multi-layer token system for Figma
Tokens as CSS variables
Component library
Data viz module
Social module
Layout module
Full-page templates
Figma-native documentation

Once UI

Once UI is a design system & framework created for Figma that helps your team in creating world class products, faster.

Community

Join our community and share your work with us! We provide guidance, feedback and a welcoming atmosphere for designers at any stage of their career.

Product Hunt Badge

Newsletter

Sign up to our weekly newsletter!

Learn

Our practical guide to crafting design systems will help you navigate through modern product design.

Support

Need help or assistance?
We're always here to help.

© 2024 Once UI - All rights reserved.

Once UI

Once UI is a design system & framework created for Figma that helps your team in creating world class products, faster.

Community

Join our community and share your work with us! We provide guidance, feedback and a welcoming atmosphere for designers at any stage of their career.

Product Hunt Badge

Newsletter

Sign up to our weekly newsletter!

Learn

Our practical guide to crafting design systems will help you navigate through modern product design.

Support

Need help or assistance?
We're always here to help.

© 2024 Once UI - All rights reserved.

Once UI

Once UI is a design system & framework created for Figma that helps your team in creating world class products, faster.

Community

Join our community and share your work with us! We provide guidance, feedback and a welcoming atmosphere for designers at any stage of their career.

Product Hunt Badge

Newsletter

Sign up to our weekly newsletter!

Learn

Our practical guide to crafting design systems will help you navigate through modern product design.

Support

Need help or assistance?
We're always here to help.

© 2024 Once UI - All rights reserved.