Hello everyone,

I hope you're having a great week. We’ve made some updates to Untitled UI that I’m excited to share!

Preview at untitledui.com

What’s new in version 5.0

We've released v5.0 of Untitled UI to support Figma’s exciting new features released at Framework 2024 and Config 2024. These updates include support for typography and effects variables, meaning variables are officially out of beta.

Typography variables allow you to define values such as font families, font weights, font sizes, and line heights and apply them consistently across your entire system. We’ve updated the Untitled UI to include these new typography and effects variables.

We also made significant improvements to core components, focus states, and effects styles, and added a bunch of useful new components and assets.

As always, we won't cover every pixel, but here are the main updates:

Carefully designed and easy-to-use typography variables (more on this below).
Simple and powerful shadows and effects variables.
Improved button components with subtle skeuomorphic effects (more on this below).
New “focus” and “active” styles with updates across all components, notably buttons and inputs (more on this below).
Improved and expanded placeholder logos (180+ high-quality logos to use in your designs or for your project/business).
Big improvement to Input field, Textarea input field, and Input dropdown components to support a dynamic * to indicate when a field is required, as well as a help icon.
Similarly, simplified Section label component and added a dynamic * to indicate when a section is required, as well as a help icon.
Improved and simplified Date picker dropdown component.
Added a disabled state to the Input dropdown component to match the Input field component.
Improved featured icons and new “Gradient” style, as well as the addition of preferred values for icon instance swaps for faster changes.
New Folder icon and Award components.
Simplified and improved tabs components and new modern “Button minimal” style.
Simplified Avatar component.
Replaced every single bitmap (image) inside the files, including avatar styles, with improved and compressed images (more on this below).
Minor tweaks to color palette.
Improved Table components with “first on top” canvas stacking for easier prototyping.
Improved Tooltip component, adding text string and more dynamic resizing.
Simplified and improved _Metric item components.
Improved and updated documentation across all pages to new UI3 + updated images.
Expanded Badge modern component to include full spectrum of colors.
Removed several variables not needed with new focus and active state styles.
Simplified and improved dozens of other components so they look nicer, are easier to use, and/or are more accessible + much more…

All of these updates are included for free in all three different versions of Untitled UI:

Untitled UI PRO VARIABLES: Color (including dark mode!), spacing, radius, width, typography, and effects variables.
Untitled UI PRO STYLES: Does not include variables for those who prefer to keep their workflow simple.
Untitled UI PRO LITE: Our lightweight version of the full Untitled UI PRO STYLES kit. It’s 55% lighter and faster and is designed to include everything you need.

Preview at untitledui.com

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

We’ve also created some new pages on the site so you can quickly copy useful design assets from Untitled UI right into your design projects:

Please share them on X (Twitter) if you find them useful! They’re 100% free to use in personal and commercial projects, even if you’re not a customer of Untitled UI.

New skeuomorphic style components

Many elements in Untitled UI, including buttons and featured icons, have recently been updated with a subtle skeuomorphic style.

Skeuomorphism incorporates depth, shadows, and textures to simulate the physical world, making components like buttons more “real” looking and visually engaging. We’ve intentionally kept this effect as minimal and subtle as possible.

Here’s an example with buttons:

Skeuomorphic design was popular in the early days of digital interfaces, especially with the introduction of Apple iOS. Over time, UI and web design have shifted towards minimalism and flat design.

Recently, skeuomorphism has made a noticeable comeback. Is it a trend? Yes, but so are many visual decisions in UI design. As long as accessibility fundamentals are maintained, we’re all for it.

As you can see in the example above the skeuomorphic effects we’ve added are extremely subtle and simple. They are achieved with a couple of shadow effects:

How to remove skeuomorphic effects

If you prefer the flat style of Untitled UI v4.0 buttons, it’s incredibly easy to remove skeuomorphic effects from your buttons and components. We’ve set it up that way.

These effects are set up as individual effects styles. Just change the effect style at the master component level to add or remove skeuomorphic effects:

You can even delete the shadow-xs-skeuomorphic effect style if you don’t need it!

Why the new focus state style?

Another major visual update to Untitled UI is a new “focus” and “active” state style:

A focus ring (also known as a "focus indicator") identifies the currently focused element on your page. Focus rings are important for accessibility when providing interfaces for users who are unable to use a mouse. Focus rings act as a stand-in for their mouse pointer.

The new focus state style is much more noticeable, switching from your brand-100 color to brand-500. We decided on this update for a few reasons:

It’s much better for accessibility. The new focus state style is much higher contrast and easier to identify for low-vision users (who are most likely to need it). @kajetanizycki created the perfect low-vision simulation/comparison.
Simpler to use and for developers to implement. While Figma doesn’t offer the best support for focus:ring styling or multiple effects styles, CSS does. The new focus state style is simpler to use both in Figma and development.
Simpler effects styles and variables. The new focus state style allows us to simplify variables into just two aliases; focus-ring and focus-ring-error.

A quick note on typography variables

We’ve noticed a few minor issues with typography variables since implementing them and using them in real projects. Notably, editing or adding modes to typography variables can noticeably impact performance, even in small files (we’re not the only ones).

It’s important to note that variables is still a new feature and typography variables were only released a few weeks ago so bugs and missing features are to be expected. Improvements have already been made and we’re hoping that Figma’s engineering team can make more soon.

The good news is that if you don’t want to use typography variables, you don’t have to! Text styles work the same as they always have in Figma. The introduction of typography variables simply means that the values in these text styles can now reference variables if needed.

Every designer and team works differently and the decision whether or not to use variables is entirely up to you. This is one of the reasons we released two different versions of Untitled UI in version 4.0 after Config 2023 — one using variables and one using styles. Try them both and see which suits your workflow better! We wrote more on this in the Do I need to use variables? section within the files.

Unless you have a specific need for typography variables, we actually suggest editing your text styles and detaching typography variables from your text styles, at least until performance bugs are fixed. This doesn’t delete the variables, so you can always add them back into your text styles if you need to.

Why did we replace every single image in the file?

This one is a bit of a doozy. When we released Untitled UI v3.2, we swapped every single bitmap image in the file from JPEG and PNG to compressed WebP images (much smaller), including in all avatar styles etc.

When you use Dev Mode in Figma and select an image, you can see the URL where the actual files are hosted on their servers. It turns out, Figma doesn’t actually support WebP but instead converts WebP images back to PNG with large file sizes.

As part of this update, we swapped everything back to compressed and optimized JPEG and PNG images. How long did this take? Yes. But this reduced the overall filesizes by ~25%!

You can preview Untitled UI v5.0 via untitledui.com. We’ll be publishing future changes to Untitled UI on our changelog.

Have a great week,
Jordan

Follow me on X (Twitter), Layers or Dribbble.

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 UI even better for you... with new products and 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:

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!

Your unique download links update regularly. Once you've got the updated link, just re-download the PDF with the updated links.

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!

Why don't my links work any more?

Don’t stress! Please don't panic email us. Your unique download links update regularly but you can always access the most up-to-date link via your original receipt email.

Just re-download the PDF and it will have updated unique links.

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

There’s a more detailed breakdown of how this works on the Getting started page within the actual Figma files.

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!

Do I need to split up the file?

Absolutely not! You may decide it’s easier to simply delete the components you know you won’t need at the start of each new project.

Do you really need to keep 20 different footer components once you’ve chosen one? Probably not! But it’s entirely your decision whether or not you want to keep them.

We personally find it easier to work from a single library rather than across several, removing components we don’t need as we go. Large files can be slower to work with, especially when Figma isn’t performing as well as it usually does or you’re experiencing a slow internet connection.

Did you know we have a 30% affiliate program?

A simple and easy way to make 30% of every sale you refer to Untitled UI. There's no limit on how much you can earn — many of our affiliates have earned thousands of dollars. Earn up to $299.70 on each sale!

Become an affiliate

TL/DR

Thanks for reading this far! On a more personal note, I’ve been traveling for the last ~18 months with my partner and a carry-on backpack. We’ve hit up 22 countries and it’s been an incredible experience.

Doing the nomad thing has been great and something I think everyone fortunate enough to work remotely should try. That said, anyone who tells you it’s easy is lying to you. It’s much harder to get any deep work done when you’re moving every few days and there are much more exciting things to see.

We’ve just moved back to Australia to set up a base. I’m excited to 5x my productivity and start working on Untitled UI more seriously. I truly appreciate the overwhelming support for this li’l side project — I genuinely love working on it and look forward to dedicating more time to it. Exciting things to come!

Thanks again,
Jordan

Untitled UI v7.0 — New components + ready for React! ✨

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

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