Unveiling Once UI 2.0 - New frontiers in Figma prototyping

Introduction

Welcome to the next era of design: Once UI 2.0, our upgraded Figma design system. Our vision? To redefine the way we utilize Figma for prototyping, accelerating our ability to create more accessible, aesthetically pleasing, maintainable, and better-performing products. And we're achieving this not in isolation, but through a collaborative approach, harnessing the power of collective creativity to fast-track the design process. Welcome aboard on this exciting journey to streamlined, effective design.

In essence, Once UI 2.0 is about offering you a more efficient, integrated, and creative design experience.

Knowledge base

We're thrilled to announce that, starting with Once UI 2.0, both our individual and team plans will include complete access to the entire Knowledge base. Whether you're a solo designer or part of a collaborative team, you'll now have all the resources, guides, and insights right at your fingertips.

In our quest to provide an unmatched user experience, we've given our Knowledge base a thorough revamp in Once UI 2.0. A significant aspect of this transformation includes an overhaul of both style and navigation, leading to a two-tiered structure that's cleaner, more intuitive, and now features a sticky navigation for convenient access.

We've also rolled out category pages for both styles and components. This addition makes finding and accessing the style guides and components you need easier than ever before, giving you a simple and quick route to the tools required for your designs.

But that's not all. Our guides and resources have been reworked, helping you better understand not just Once UI, but also integral Figma practices. These revamped resources are readily accessible within the Knowledge base, turning it into your go-to hub for all things Once UI and Figma.

In essence, the Knowledge base has been transformed into a comprehensive, user-friendly resource platform that's as easy to navigate as it is useful. Every change is aimed at making Once UI 2.0 your ultimate companion in the design journey.

Semantic tokens

In Once UI 2.0, we've added a new layer to our design tokens: Semantic tokens. They represent a considerable evolution from our original 'base' tokens, which have now been renamed and moved into separate dark and light files.

At its core, our semantic token system utilizes the same underlying values as the base tokens. What makes them stand out, however, are their semantic names, including labels like 'background', 'text', 'border', and more. These semantic names bring a new level of intuitive understanding and ease of use to the design process. Furthermore, each color scheme encompasses the same categories, and each category includes the same weights, bringing a new level of uniformity to the system.

As a part of this transition, we've revised our guides on how to update the colors in Once UI. While this process may now seem slightly more complex and time-consuming, the benefits of this new approach far outweigh the initial adjustment period. With the introduction of semantic tokens, you'll gain greater consistency across designs, and access an array of theming options.

Indeed, it is our belief that this new semantic token system will equip you with an even more powerful toolset for creating and managing compelling, cohesive designs. So despite a slight learning curve, we're confident that you'll appreciate the enhanced control and broader potential that Once UI 2.0 provides.

In our mission to streamline your design-to-development workflow, we are excited to announce that all plans - individual and team - will now include a collection of CSS variable equivalents for our token system. This means, whether you're designing alone or working within a team, you can effortlessly translate design tokens into tangible, functional CSS variables.

Components

The release of Once UI 2.0 didn't significantly revolve around component enhancement, but that's not to say they've been overlooked. All existing components have been updated with our new semantic styles, resulting in minor visual modifications. This allows them to reflect the new naming conventions and take full advantage of the versatility provided by the semantic tokens.

Furthermore, we've expanded our component roster with the addition of a new Card element. This flexible and ubiquitous UI component will enhance your capability to present information in a clear and organized way, whether it's for content grouping, showcasing features, or anything else your design may require. The Card element is, of course, also constructed with our semantic styles in mind, ensuring seamless integration with the rest of your designs.

In an effort to streamline your design-to-code journey, we have incorporated documentation links into all components. Now, you can effortlessly access the pertinent documentation page straight from the inspect panel.

Conclusion

As we prepare to embark on the thrilling journey that Once UI 2.0 presents, we are also eagerly awaiting the upcoming Config 2023 announcements. We're excited to see what the Figma team has in store, and how it will further refine Once UI and streamline your workflow.

In the meantime, we're firmly committed to pushing the boundaries of design innovation, continuously working on providing you with more resources and cutting-edge concepts to fuel your creative process. We owe a great deal of our progress and inspiration to our incredible community. Your constant support and feedback are invaluable to us.

At the heart of our vision for Once UI is the desire for a more accessible web and enhanced team communication. This is the future we're actively working towards. To achieve this, we want to make Once UI available to as many designers as possible, and so we're thrilled to announce a 40% sale to celebrate our biggest and most exciting release yet - Once UI 2.0!