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.2 - πŸŒ€ Elastic slots are here

Author avatar
Lorant Toth | Design & Development
7 months ago


We are thrilled to announce the release of Once UI 1.2! This update primarily focuses on the introduction of our groundbreaking slot management system called Elastic slots. This innovative feature is designed to make your workflow more streamlined and faster than ever before. In this blog post, we will explore the key changes in version 1.2, with a special emphasis on Elastic slots, as well as improvements to the Pattern library and the Knowledge base.

Global changes


Adaptive Styles

To make version 1.1's new Text color styles more versatile, we have renamed them to "Adaptive" styles. This change reflects the fact that adaptive styles can be applied to other graphic elements as well, allowing you to easily swap between light and dark modes.


Preferred values

We've added preferred values to every component that contains a slot, streamlining your design process even further.

Preferred component values help you design faster
Configure slots faster with the new preferred values.

Pattern library


Elastic slots

In version 1.2, we have incorporated new slot variations and a revolutionary layout technique named "Elastic slots". This method allows you to work with slotted components without the need to detach them or employ a content component to replace the initial slot.

New elastic slot mechanics
Effortlessly create straightforward grids of slots using the innovative Elastic slot method, and then seamlessly swap the slots with components.

The Elastic slot method is highly effective for basic layout structures, but it's essential to be aware of its limitations. One significant constraint stems from Figma's component functionality: you cannot nest the same component within itself. This means that you cannot reuse a vertical x2 slot inside another vertical x2 slot even if it's not the direct ascendant.

To work around this limitation, you can swap it to x3 and hide one row or create another copy of the newly introduced slots. However, these strategies lead to a more complex structure and are not recommended.

Advanced Elastic slots example
An example of a complex layout structure created using the Elastic slot method demonstrates that, in some cases, it might be more straightforward to stick to the standard slot mechanics and employ a content component instead.
Advanced Elastic slot demonstration
The previous example before swapping the slots to the actual components.
Image caption of Learn more about Elastic slots in the Once UI documentation

Learn more about Elastic slots in the Once UI documentation



We've enhanced the Table component in version 1.2 by integrating the new slots, which improves its flexibility and adaptability. You can now set the number of columns on the mt-32evel component and configure the number of rows for each column element.



The Options component has also been updated to use the new slots, ensuring a smooth configuration process.



We've added a new Text component that allows you to swap a slot to a text, which is an essential component when using the new Elastic slot method.

Knowledge base


Getting Started

To make it easier for you to stay informed about updates, we've created a more transparent change log. Now, you can view earlier updates as well, sorted by version. This way, you can always stay on top of the latest improvements and modifications.

Improved change log of Once UI
The new change log lists all prior Once UI releases as well.
Image caption of View the new Change log in the documentation

View the new Change log in the documentation



To help you make the most of our new slot functionality, we've added a dedicated page to explain how both standard and elastic slot mechanics work. This comprehensive guide will enable you to harness the full potential of slots in your designs.

Image caption of Learn more about Elastic slots in the Once UI documentation

Learn more about Elastic slots in the Once UI documentation



At Once UI, our top priority is providing an exceptional design and developer experience while fostering smooth collaboration between different departments. The two key features introduced in this release, Elastic slots and Change log, serve to enhance these experiences.

Elastic slots empower designers to work more efficiently, while the added transparency of the Change log improves the developer experience. Together, these updates reinforce our commitment to delivering an outstanding user experience for all.
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.