Redefining design systems – The dawn of Once UI 2.1

Introduction

Hey folks! Got some exciting news to share: Figma's dropped some stellar features they've been laboring over, and guess what? We've already integrated most of these into our design system, Once UI. Yes, you heard it right. We even sprinted ahead, being among the first few design systems to adopt a semantic token system. Wondering how we pulled it off in less than a day? Well, thanks to our trusty 🔮 crystal ball predictions, and Once UI 2.0, we had laid the groundwork well in advance. All that was left to do was play catch-up with the tech side of things after the update.

Color system

Remember our introduction of the semantic color system in Once UI 2.0? It was a single-layer structure then. But with Figma's newly introduced variables, we've leveled up. Our styles are now variables that can refer to other variables with aliases. Sounds complex? It's actually a breeze when you want to refresh the underlying color structure of the Once UI color system.

The exciting part? We've swapped all styles for concurrent variables and wiped out all color styles from the system. Poof!

Border radius tokens

Ah, the long-awaited feature is finally here! Pre-defined border radiuses that we can reuse in our design system. Simple, but oh-so-transformative!

All our border radius in the design system have been updated to use these handy tokens.

Spacing tokens

One of the pillars of Once UI has always been a designer and developer-friendly spacing system that abstracts calculations and enables automatic scaling behind the scenes. Think of it as a soft grid, with values like 2, 4, 8, 12, 16, and so on up to 160. The token names represent these values, making it easy to scale the system while maintaining consistency.

We've revamped ALL spacings: paddings, margins, whitespaces, you name it - they're all using these values now.

Layout management

Welcome to a whole new level of variable collections: breakpoints and content-widths. These little wizards let you set maximum widths for screen designs and containers. And the best part? They allow for consistency and easy layout modifications.

But wait, there's more! With the introduction of auto layout wrapping, you can now create truly responsive grid systems. We've updated our components and documentation to reflect breakpoints, max-widths, content-widths, and simplified structures with wrap containers.

CSS variables

You know that old game of 'telephone' where a message gets passed around, and by the end, it's nothing like the original? Well, sometimes the handoff from design to development can feel a bit like that. Designers are left scratching their heads, wondering why the coded result doesn't mirror their masterpieces. Meanwhile, developers are wrestling with custom-set styles and components that seem to have taken on a life of their own.

Well, we've decided it's high time to bridge that gap. Config's key vision has always been to streamline the design-dev collaboration, and we're turning that vision into reality with the introduction of our new CSS tokens.

The magic of these tokens? They're fully aligned with the Figma variables, creating a common language between design and development. It's like having a bilingual dictionary that both designers and developers can refer to. No more playing 'telephone', no more lost in translation moments, just smooth sailing from design to code.

With these CSS tokens, we're not just enhancing your workflow. We're taking it to an entirely new level, making the journey from concept to live product a whole lot more harmonious and efficient. And who wouldn't love that?

Ebook launch

Guess what else we've been cooking up? A jam-packed, free ebook that serves as a roadmap to the foundations of our design system, and yours too. Picture this: years of experience condensed into a 30-page guide, offering practical advice that is seldom discussed elsewhere. Want to learn how to build a kickass design system that's scalable but not bloated, efficient, and developer-friendly? It's all in there.

Conclusion

We brought Once UI into the world because we felt that most design systems overlooked the developers' perspective. We saw design systems struggle with updates because of their overwhelming size and inconsistency. Once UI is lightweight yet powerful, capable of things other design systems can't even fathom. And it's all thanks to your unwavering support and interest. We're incredibly grateful, and we promise to keep creating useful resources and sharing them with you to elevate your designs.