Table of contents
Background effect for Discord ad

Join our Discord server!

Leverage Once UI's full potential and discuss design system topics in our growing community

Once UI for Figma - Join our Discord community Join now!
chevron_left Back

Once UI 1.1 - Library updates + πŸ”₯ Dark edge MOD!

Author avatar
Lorant Toth | Design & Development
7 months ago


We're thrilled to announce the release of Once UI 1.1, the latest update to our design system for Figma! This update focuses on providing a wealth of resources for crafting rich navigation experiences, squashing pesky bugs, and refining existing components. With changes spanning across four major categories - Global changes, Pattern library updates, Utility toolkit updates, and Knowledge base updates - Once UI 1.1 is set to elevate your design experience.

We're especially grateful for the invaluable user feedback that has shaped many of these enhancements. In this blog post, we'll walk you through the key updates and improvements in Once UI 1.1.

Global Changes

In this update, we've made some significant global changes that impact the overall user experience and functionality of Once UI 1.1. Let's dive into these improvements:


Text styles

We've introduced new adaptive color styles for text and graphic elements, enabling an automatic adjustment of neutral text colors when switching between design system libraries. The available styles come in Strong, Medium, and Weak weights. By implementing these adaptive color styles, we provide a seamless way for text and other graphic elements (like icons) to adapt to the theme being used.

Adaptive texts styles in the Once UI 1.1 design system
Adaptive text styles

Instance Swap

We've added the instance swap property to all slot elements, enabling you to seamlessly switch slots at the top level to any pre-defined Pattern library element or custom component you've created. This minor enhancement will speed up your workflow when using slotted elements.

Adaptive texts styles in the Once UI 1.1 design system
Instance swap property updates

Page structure

To improve the onboarding experience, we've reorganized the page structure of the main design system file. The Knowledge base now appears as the first page, with a stripped-down version also available in the Individual plan. This reordering helps new users get started more quickly and easily, ensuring that essential information is readily accessible right from the outset.

Pattern library updates

In this release, we've made several updates to the Pattern library, enhancing existing components and introducing new ones to provide a more comprehensive toolkit for designing with Once UI 1.1. Here's a rundown of the key updates:



Previously a local component exclusive to the Knowledge base, NavigationButton is now available for broader use. With many interfaces utilizing sidebars, this left-aligned button with customization options is perfect for various products built with Once UI. It features optional properties like prefix icon, toggle icon, and tag element, as well as two size options.

New button for better navigation in the Once UI 1.1 design system
New NavigationButton component


ControlButton is a new component that wraps around a pre-configured Button, allowing you to design segmented controls and other button-controlled layout navigations with ease.

New button for better navigation in the Once UI 1.1 design system
New ControlButton component


Formerly a local component used by OptionButton and Select components, Options is now published for broader use in designing interactive elements with dropdown-like behavior. We've also added a description property for easier customization.



We've introduced an XS size with full border radius, inspired by its popular usage on the Once UI landing page.



We've added an optional prefix icon for enhanced versatility and refactored the paddings of the original size. We've also introduced a slightly larger size as a new variation.



The new "Adaptive" variant adjusts to the theme being used, displaying a light logo in dark mode and a dark logo in light mode.

New adaptive logo for better maintainability in the Once UI 1.1 design system
New adaptive Logo variation


One of the most anticipated improvements is the optional description prop for the Input base, now available for use with Input, Select, and Textarea components.

New description element added to Input in the Once UI 1.1 design system
Description element added to Input, Select and Textarea components


We've refactored the background and border style of all variations and changed the default button size to the new XS variation for a leaner and more visually appealing look.

New feedback style introduced in the Once UI 1.1 design system
Restyled the FeedbackMessage component


We've fixed a bug that occurred when swapping slots, where some of the slot's styles were accidentally added to the swapped element. The addition of a new wrapper inside the slot eliminates this unwanted behavior.

Knowledge base updates

We've made several improvements to the Knowledge base, focusing on creating a more visually appealing and informative experience for users of Once UI 1.1. Here are the key updates:


Getting started

We've completely redesigned the Getting Started page to create a more comprehensive and informative onboarding process. We've introduced a carousel that explains each section of the design system and added an onboarding list and a change log to help users dive into Once UI 1.1 with ease.

Reworked getting started page in the Once UI 1.1 design system
Reworked the Getting started page


To highlight the changes in the 1.1 version, we've added tags in the navigation. We've also included a tag next to the logo element to indicate the current version. Additionally, we've added a button at the bottom of each page that scrolls to the top, making it easier to navigate through the documentation.


What's new

To showcase the updates in components, we've added a FeedbackMessage element to each component that has changed. This makes it simple for you to identify the modifications and understand how the components have evolved.

Introduced what's new component in the Once UI 1.1 documentation
Added Feedback component to changed elements


We've updated the file thumbnail to provide better aesthetics, ensuring a more visually engaging experience right from the start.

Utility toolkit

We've made several improvements to the Knowledge base, focusing on creating a more visually appealing and informative experience for users of Once UI 1.1. Here are the key updates:



We've added a new checklist component that can be used to indicate project progress, include to-do items, or mark important milestones. This versatile component helps designers display important information related to the project in a clear and consistent way.

Introduced new Checklist component in the Once UI 1.1 design system
New Checklist component


We've introduced an optional Tag component next to the title, which can be used to convey concise yet important information. We're using it within the Pattern library to indicate changes introduced in the 1.1 version.


Page structure

To improve readability and provide a cleaner structure, we've reorganized the components in the Utility toolkit. This reorganization makes it easier for users to locate the components they need and navigate the toolkit more efficiently.

πŸ”₯ Dark edge MOD - EXTRA

Introducing the Dark edge MOD for Once UI 1.1 - a sleek and stylish modification that showcases the customization capabilities of the design system. With this MOD, you can create Linear-style applications with a glassmorphic touch, providing a cutting-edge solution for modern user interfaces.

We created the Dark edge MOD to demonstrate the ease and speed at which the Once UI design system can be customized, making it a truly flexible and scalable solution for all your design needs. Experience the versatility and customization possibilities of Once UI with the Dark edge MOD!

Introducing the new Dark edge MOD extension for the Once UI 1.1 design system
Our brand new Dark edge MOD included in Individual and Organization plans

Upgrade your Once UI design system with the Dark edge MOD, now included as an extra with every Individual or Organization license.

Shaping Once UI 1.1 together

We would like to take a moment to acknowledge the invaluable role that user feedback has played in shaping Once UI so far. Your insights, suggestions, and comments have been instrumental in driving the improvements and enhancements that we've introduced in this update.

We are incredibly grateful for the continued support of our user community. Your engagement and collaboration have not only inspired us but have also helped us create a more robust and versatile design system. Thank you for being a vital part of our journey.

As we continue to innovate and evolve Once UI, we invite you to share your feedback and suggestions for future updates. Your input is vital in helping us refine the system and ensure that it remains a valuable resource for designers worldwide. Once UI for Figma - Join our Discord community Join our Discord community
Promo image for Once UI design system

The $900,000 design system mistake you can’t afford to make

A staggering 90% of startups fail. We're exposing the secret mistake that can doom your business for good.

Once UI for Figma - design framework for prototyping on Product Hunt

Updates from the creators

Stay in the loop with our weekly newsletter

Β© 2023 Once UI - All rights reserved.

Once UI is an independent framework and is not affiliated with, endorsed, or sponsored by Figma or any of its subsidiaries.