Once UI 1.1 - Library updates + 🔥 Dark edge MOD!

Introduction

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:

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.

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.

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.

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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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

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. Join our Discord community