Once UI for Figma

You've likely seen many design systems and component libraries, but Once UI is genuinely different. I don't want to create another flashy landing page that looks just like the rest. Instead, I'll just explain some concepts that I particularly find unique and exciting.

Once UI is a self-contained design system and component library. You might find this weird, but we actually recommend not publishing it as a library, but working inside the file. This approach shifts the focus to the work from the workflow.

Foundations

One of the main features of Once UI is the multi-level, semantic token system it's built on. In simpler terms, you have different layers of building blocks with different responsibilities. The bottom layer contains all possible options with less specific names such as red-200, which is referenced by layers where they are matched with more specific names, such as danger-background-medium.

Once UI uses variables for colors, typography, spacing, border radius, breakpoint, but it has variables for rendering elements conditionally in dark or light mode, or based on breakpoint. Instead of creating several screen designs for different devices, you can manage responsive designs within a single design. Moreover, you can even manage empty or loading states this way, without duplication.

"Just took a look at the new figma and amazing is an understatement. It's so creative and beautiful! I didn't realize how limited my thinking was until I saw this!"

Light

Founder @Pyupil

This feature makes Once UI extremely efficient and compact: you can turn your page designs into components, and map out responsive mockups and data state designs as instances, which are automatically updated whenever you modify the main design.

Components

Once UI has a deeply nested component system which makes it extremely easy to customize at a very dense scale. You'll see that there's barely any duplication in the system, and from the smallest elements to the complete page designs, everything is a component.

Component nesting doesn't have to be complicated. Yes, sure, sometimes it is (looking at you, Bezier chart), but a simple yet effective example is the logo: you change it in the main component, and it will cascade down to the header, from there to page designs, and from page designs to mockups.

Needless to say, all components are interactive. Not only that, but there's interactive documentation for each component, wired up in the design system file. It helps you test the component interactions, and also serves as a place to test and review global style updates.

Data-viz

I'm confident to say that I haven't seen a more comprehensive and flexible visualization library for Figma. If you're working on data-heavy applications, I think this subset of the system justifies the price alone. All components are fluid and come in 3 color modes, adjustable with variable modes.

Mockups

Once UI comes with a mockup component library. It has a main component with different layout variants, and since your screen designs are responsive and adjustable with variables, you can insert them into any template. You can then customize the styles and effects and apply overlays.

Brandbook

The system includes a brandbook page that you can use to showcase your brand or to compare different aesthetics that are available as variable modes.

Extras

Other than that, you'll find many extra features in the system: design examples, Product Hunt templates, slide deck designs, social media covers, and more. Once UI is not a design system that includes many polished designs though, since in our experience, although they look cool, they are not much help when designing new products. What's important is to have a well structured framework that guides you from ideation to launch.

Synergy

Once UI for Figma has been around for more than two years now. The most frequent question understandably was: "Nice job, but how do I actually use it in production?". We get it. Creating a self-contained system has its own challenges, mainly that it doesn't really make sense to use it with UI frameworks such as shadcn, tailwind, etc. So, we've created a companion system for Next.js.