Profile PictureUntitled UI

We've released an update to Untitled UI ✨

Hello everyone,

Hope you're having a great week! We've released an update to Untitled UI.

This update is a little different from previous releases... but it's one we've wanted to do for a while. While there are a few new components as always, the majority of changes are subtle aesthetic and accessibility improvements.

Preview at untitledui.com

What’s new in version 2.9

We won't cover every tiny detail, but here are the main updates:

  • Refactored and simplified all badge components (removed base component) + added new styles 🔥
  • New content components for blog posts, content sections, and rich text 🔥
    • This is something we haven't seen something like this done before in Figma, but after testing it on another project we can confirm it's a game-changer for quickly designing consistent content sections such as blog posts.
    • It's a simple but scalable system of rich text components (headings, paragraphs, quotes, and images) so you can consistently adjust content styling and padding everywhere at once, kind of like CSS.
    • These components include super smart pre-defined top and bottom padding and spacing guides that you can show and hide with a single toggle.
  • Text default has been changed from gray-500 to gray-600. This was surprisingly a huge amount of work to change everywhere, but we live for these 1% improvements:
    • While gray-500 text on a white background is WACG 2.0 accessible with a contrast ratio of 4.95 (AA), gray-600 is significantly higher-contrast at 7.65 (AAA).
    • Changing default text to gray-600 helps differentiate it from placeholder text (e.g. inputs) which remains gray-500.
    • This one is subjective, but we think gray-600 looks a little cleaner and modern, especially when used in big blocks of content.
  • Improved styling of all dropdown components, notably menu item hover states which now have independent padding.
  • Headings across all components and layouts are now semibold by default. This includes obvious section headers and card headers but also spans across most smaller components (e.g. avatar label groups, charts, checkbox groups).
  • Similarly, buttons are now semibold by default.
  • All cards have a slightly larger 12px corner radius by default.
  • + Many more small improvements...

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

Preview at untitledui.com

That's all for now! This update isn't as big as the last one (Figma's new component properties 🫠), but we're excited about these 1% incremental improvements. Stressing these small details compounds over time.

They also tie into something we're working on that we hope to announce soon...

As always, if you're reading this — I appreciate your time and attention.

Thanks for the support!
Jordan

Follow me on Twitter, Dribbble, or Bebo.


We have a favor to ask...

Could you please rate us ★★★★★ on Gumroad? 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... with free updates for life.

Leave a rating

If you don't have a Gumroad account, you can find your link to this page by clicking Access Untitled UI in your original purchase email. These are sent from noreply@customers.gumroad.com with the subject You bought Untitled UI – Figma UI kit and design system!


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:

  1. From your Gumroad library if you made an account.
  2. 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!
  3. 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:

  1. Figma recently announced a swap library feature and you can learn how it works here. We recommend making a backup before.
  2. 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.
  3. 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

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

We've launched an Untitled UI Webflow component library ✨

Please be careful of scam emails 😔

Introducing Untitled UI Icons + updates to v2.8 ✨

We've released an update to Untitled UI ✨

See all posts from Untitled UI

Powered by