After the release of MasterUI 1.0, Figma introduced a significant update regarding component functionality — and later, a substantial update on variables. We knew that our improved UI kit needed to work in tandem with these changes fully, which led us to develop MasterUI 2.0. Upon the release of MUI 1.0, we sought feedback from our designers and developers to ensure that the next edition would be even better.

The objectives from MUI 1.0 remained unchanged — we wanted to create a product that was fully adapted to our designers and developers, ensuring that the implementation of new projects and services, especially Phase0, was as efficient as possible.

How did the debut version of MasterUI perform?

Before we delve into MUI 2.0, let's look at some numbers to evaluate our predecessor’s performance. With more than 2,300 downloads on Figma Community, the previous version of MasterUI has certainly made an impact. Six projects at MasterBorn used the tool.

One of our clients even surprised us by independently downloading the file and creating simple wireframes to share his initial project ideas. This showcases the versatility, quality and user-friendliness of MasterUI, extending beyond its conventional business uses.

Bridging the Gap Between Design and Development — Tailwind Naming Convention

Figma tries to bridge the gap between design and development through updates like Dev mode or variables. We adopted this same approach while developing MasterUI 2.0. Our developers commonly work with the Tailwind framework, which offers clear and logical documentation of components and naming classes for different styles, including spacing, corner radius, typography, and colors. We decided to use this and base the naming of Figma variables on this scheme. This solution will make the deployment of projects using MUI 2.0 even faster and smoother, which ultimately means shorter implementation time and greater consistency between code and design for our clients.

Power of Figma Variables — “Let There Be Light, There Was Light”…

While the AC/DC song continues with "let there be drums…," we're gonna sing "let there be dark,"... because dark mode is now a click away.

In the past, some UI kits offered a dark mode. Unfortunately, this doubled the number of components, resulting in a more complex file and the need to maintain two versions of fully editable components — a practice contrary to our principles. Thankfully, Figma's update on variables enabled us to introduce a dark mode based on tokens. This feature allows a simple mouse click to switch between light and dark modes, eliminating the need for duplicate components.

What Fundamental Components Will You Find in MasterUI 2.0?

Now let’s take a closer look at the fundamental components in MUI 2.0. We want to highlight the key elements and educate our younger colleagues and clients about component naming and functionalities. Following the principles of the previous version, we sort the new components again according to Brad Frost's Atomic Design concept, which we detailed in our previous article.

Atoms ⚛️

Toggle switch

This allows the user to change a setting between two states, typically "on" and "off." It offers an intuitive way to switch between options, with actions taking immediate effect instantly.

Radio button

A basic circular UI control that allows users to select one option from a predefined set. When one radio button in a group is selected, others are deselected, ensuring only a single choice within the group.

Checkbox

Checkboxes allow users to select one or more items from a set. Unlike radio buttons, checkboxes allow multiple selections.

Button

A fundamental, clickable UI element initiating actions. Its states include primary (main action), secondary (alternative action), text (tertiary, less emphasized), destructive (warns of potential negative outcomes), and destructive secondary (a subtler warning action). It can contain icons or appear in the form of a single icon button.

Tooltip

A small, informative overlay that appears when users hover over or focus on an element. It provides extra information about the functionality or purpose of the element, enhancing the user experience without cluttering the interface.

Link

A clickable piece of text that directs users to another location, either within the same document or to an external resource. Typically differentiated from surrounding content by a color change, underlining, or both. Occasionally, it may be accompanied by an icon to further indicate its position, purpose, or destination.

Badge

Small indicators or labels are used to represent status, notifications, or numerical counts. Often round or pill-shaped, they are created to draw attention to updates or important information associated with an app or interface element.

💡 In some design systems or UI kits, badges are called “pills” when they have fully rounded corners.

Other: Divider, Loader, Avatar

In addition to the fundamental components mentioned, we have also added some less essential but some examples of the same components most frequently used.

Molecules 💠

Input and Select

A field where users can enter data or information. It can be used for various types of content, such as text, numbers, or dates, and typically includes placeholders or labels to guide user input. In MasterUI, for example, we combine Input and Select into one component and differentiate them with an input content component. This component offers a variety of defined styles such as prefixes, suffixes, or groups of chips.

Dropdown

A selectable list that collapses and expands upon interaction with a select component, allowing users to scale and easily choose from multiple options without occupying excessive screen space.

Chips

Compact elements for user input, complex entities, or selectable choices. Common in contact lists, filters, or input fields, they may include a small icon or image for more visual representation.

Toast

A Toast is a brief notification that temporarily appears to convey information or confirm actions. Typically auto-dismissing, it may include text or actions and is usually positioned at the top or bottom of the screen. Common in web and mobile apps, it provides quick, contextual feedback and helps visualize a project faster.

Alert bar

Alert bars are horizontal strips for important messages. Typically at the top, bottom, or within containers, they may include text, icons, or actions. Common in web and mobile interfaces, they offer a less intrusive way to inform.

Tab

A set consists of layered sections used for navigating between multiple panel variants, components, or views within the same context or window. Tabs can be labeled with text, icons, or both, providing users with a clear indication of the content or functionality contained within each section.

Breadcrumbs

A linear navigation trail showing a user's path within a website or application. It displays the hierarchy of the current location with clickable links, allowing easy backtracking and understanding of the navigational context to easily edit your wireframes.

Organisms 🦑

Alert dialog

Alert dialogue is a popup window that conveys critical information or requires immediate action. Displaying a concise message with options like “Accept” or “Cancel,” these dialogues can't be dismissed by simply clicking outside the window, pressing an “X” button, or “esc,” ensuring users fully engage with their content before proceeding.

Popover

A transient UI element that appears above other content, often triggered by a click or hover action. It provides additional information, options, or actions related to the initiating element without navigating away from the current view.

Pagination

Pagination is a navigation element that allows users to traverse through multiple pages of content. Typically found at the bottom or top of a page, it includes numbered links or buttons for direct access to specific pages.

MUI 2.0 - A Journey of Collaboration and Innovation

MUI 2.0 is here, and it's all thanks to a fantastic blend of fresh Figma features, honest feedback from our MasterBorn crew, and the daily grind that drives us. This latest version is all about keeping up with the times and making sure we're in tune with what teams need.

After creating MUI 1.0, we turned to our designers and developers for their thoughts. Their insights were incredibly valuable and helped us tweak and polish MUI into something even more remarkable than before. We're big believers in never standing still, so expect to see MUI getting better and better.

And hey, don't be shy — share your thoughts in our survey. Your opinion is super important in shaping MUI's future. We want it to be something you love using.

Big shoutout to the whole MasterUI dream team: Damian Fejdasz and Janusz Magoński, and myself – Konrad Parasiński. Hats off for our incredible work.

Give MasterUI 2.0 a try!