Hey there,

Figma announced some great updates at Config 2022 last week, particularly around auto layout and component properties. We've been working non-stop since to make Untitled UI even better than ever.

✨ You can preview version 2.7 at untitledui.com ✨

To make the most of Figma's new features, we've completely refactored the entire library. Almost every single component has been simplified and improved upon, making it the biggest update to Untitled so far. Was this a lot of work? Yes. But we're really excited about the changes Figma are making and we're already working on v2.8.

We were halfway through this update when these new features were released, so you'll also find a bunch of useful new components and expanded existing pages. We've also got another announcement further down...

What’s new in version 2.7

As we mentioned, almost every single component has been changed so we won't cover everything. Here are some notable updates:

The entire library has been simplified and improved with the new boolean component property features, drastically reducing the number of variants without losing any of the functionality. A few highlights:
- Buttons down from 1,320 (with 25 base components) to 760
- Inputs down from 336, including new input styles to 56
- Application page headers down from 144 to 12
- Application card headers down from 96 to 16
New command menu (⌘+K) components 🔥 — these were highly requested
New section footer components + added to all example pages
New tags components
New inputs with trailing button and multi-select tags
New simplified dropdown components + added hint text and multi-select tags
New log in and sign up pages
New verified tick component + added to avatar components
Expanded library with 40+ new useful hand-drawn scribbles
Completely refactored and simplified all button components + removed base component 🔥
Completely refactored and simplified all input components + removed base component 🔥
Added instance swaps across core components (buttons, inputs etc.)
Replaced dividers throughout the entire file with new independent borders (where it makes sense)
Drastically improved table components and layouts (no more dividers!) 🔥
Avatar groups, page sections, page headers, and example pages simplified with new negative margin feature
Drastically simplified core shared components (button groups, inputs etc.) taking advantage of component properties and independent borders.
Improved "X" close button and updated every component it's used in (e.g. banners and notifications) with the new absolute positioning feature
Added new "X" close button to modals and slideout menus
Pagination improved and simplified with independent borders
Refactored card and section headers with component properties
Improved and simplified date picker components
+ Much more...

We’ll be publishing future changes to Untitled UI on our new changelog.

Preview version 2.7

You can preview Untitled UI v2.7 via our website here.

–––

We have a favor to ask...

We put a lot of time and effort into making Untitled UI as great as it can be. Could you please rate us ★★★★★ on Gumroad when you download the new files? It really helps us out and the more support we get, the more time and resources we can spend on making Untitled even better for you!

Leave a rating

–––

What’s planned for version 2.8?

We're excited to announced we've spent the last few months chipping away at an icon library! We've always loved the Feather icons included in Untitled UI. They're high-quality, scalable, and neutral enough for any project. However, there's only ~300 of them...

We want the official Untitled UI icon library to be of the absolute best quality. We're taking our time but are getting very close. It will include thousands of icons, multiple styles, and built specifically for Figma, in Figma.

What does "specifically for Figma" mean?

When we were building Untitled UI, we looked at dozens of icon libraries. Not a single one was set up to respect component overrides in Figma. For example, when you use an icon in a component and change the color, as soon as you swap out that icon instance, you'll lose those overrides and have to add the color again. We actually had to fix the Feather icons one-by-one to make this library work for Untitled UI.

The new icon library will be 100% Figma native, which means it'll remember overrides and you'll be able to customize it right in Figma. We never want to open Illustrator again and we hope you don't have to either.

Will it cost money?

Yes, but we're making it 100% free if you've bought Untitled UI Pro and rated it ★★★★★ — our way of saying thanks!

We're also going to swap out the default icons in Untitled UI with the new line icons. We'll also send you a 100% discount code to download the other styles, IconJar files, and individual SVGs as well.

Something else...

We're also working on another exciting project for Untitled UI in the background. It's mostly done and we hope to announce it soon. We can't say much more just yet!

–––

Why we're not using the new text properties feature (yet)

We're stoked at Figma's updates and the direction they're heading. One of the component properties updates was the addition of text properties. This feature allows you to edit text from the properties panel. In this example, you can see text properties added to edit ✏️ Label etc.

We made the decision to not implement this new text properties feature just yet. The reason for this is two-fold:

We found it easier to simply command+click on the text you want to edit in a component, rather than having to scan through the already busy properties panel to find the correct property; and
While experimenting with this feature, we noticed that if a text property is added to a component and then later removed/changed, every single instance of that component reverts back to the master component text and you lose any changes you've made. Obviously this would be a huge pain if you have hundreds of inputs instances across your designs...

As with all Figma features, we're closely monitoring this. We'll 100% implement it if we believe it's a better workflow. The good news is that it's super easy and fast to add if you decide that you'd like to use it. Here's a guide on how to use text properties.

A quick note on boolean properties

We've thoughtfully implemented Figma's new boolean properties feature in Untitled UI where it makes sense. Boolean properties are a huge step forward for Figma and have allowed us to drastically reduce complexity and the number of variants for common components.

For example, if a design system contains buttons with and without an icon, instead of creating 2x variants for each state, you can now apply a boolean property to the icon’s layer visibility and combine them.

This is useful, but we wanted to note a few shortcomings with this feature that will help you in your decision whether to use variant properties vs. boolean properties in your own design systems:

Boolean properties only show/hide layers. With the button example, when the icon boolean property is switched OFF, the icon is still there. It's just hidden from view. While this might reduce the number of variants at the master component level, it means that every instance of that button has an extra hidden layer (or dozens of layers) that adds to the total number of layers in a file. For components like buttons that can be used thousands of times across companies, this can add up quickly. Sometimes it makes more sense to just set it up as 2x variants.
Unlike variants, you can't influence spacing using boolean properties. For example, this button component has different left and right padding so the icon-only button is square. This means you can't simply add a boolean property to the icons and text and remove the variant because the icon only button (right) will have 18px padding.

We've thought very carefully about this and believe we've struck a good balance between flexibility and simplicity with Untitled UI. We'd love to see in a future update that Figma removes the layers completely when a boolean property is switched to off instead of hiding them — we'll monitor this closely!

Thanks for the support!
Jordan

Follow me on Twitter and Dribbble.

–––

FAQ

View more FAQs here.

I’ve already purchased Untitled UI, how do I access the new files?

After each update, we’ll send you an email (like this one) with what’s new. If you like what you’re reading, you can download the new files:

From your Gumroad library if you made an account.
If you don't have an account, you can click View content or Access Untitled UI in your original email. These are sent from noreply@customers.gumroad.com with the subject You bought Untitled UI – Figma UI kit and design system!
If you get super stuck, just shoot us an email via hello@untitledui.com and we'll resend the original purchase receipt for you :)

How do I update my Figma file with the new updates?

There are three ways to go about this, depending on how you’re working with the file:

Figma recently announced a swap library feature and you can learn how it works here. We recommend making a backup before.
If you’re not interested in everything that’s changed, it’s likely easier to copy+paste any new components into your current file and then simply swap the styles out in those components to your local styles.
If you’re using a copy of Untitled UI as a base for each project, start fresh with the new version next time you kick one off!

Can I split up the library?

Absolutely! Figma recently introduced a move published components feature to deal with just this.

This allows you to split up the library into smaller libraries that can be published independently. For example, you may want to split the file into four libraries:

Styles and shared components
Marketing components
Application components
Page examples

Why isn’t the library split up already?

Good question! Currently, it isn’t possible to import more than one file at a time into Figma without breaking links to instances in the design system across the files.

Because of this, the file needs to be imported together and then split up into separate libraries (if you want to do that) after it’s imported. Hopefully, this functionality will be introduced soon!

–––

That’s all for now. Thanks for the support. Stay tuned for more updates soon! 🤗

Preview at untitledui.com

–––

Did you know we have a 30% affiliate program?

A simple and easy way to make money for referring people to Untitled UI. Get 30% of every sale you refer. There's no limit on how much you can earn — many of our affiliates have earned thousands of dollars.

Become an affiliate

Untitled UI v6.0 — New components + color palette + examples ✨

Untitled UI v5.0 — Config 2024 + typography and effects variables + new components ✨

Untitled UI v4.0 — Dark mode, variables & Auto Layout 5.0 ✨

We've released an update to Untitled UI PRO + PRO LITE ✨

We've released an update to Untitled UI PRO + PRO LITE ✨

See all posts from Untitled UI