Largest UI kit in the world updated: Frames X v2.5

Hey there! We are excited to share the release of Frames X 2.5!

This update extends our toolset beyond any other UI kit available! With new robust components added and upgrades to existing ones, our web toolset is now more comprehensive than ever, solidifying FramesX's position as the largest UI kit for Figma to date.

With over 70 different categories of UI components available, Frames X covers a wide range of interface patterns and solutions for your design projects.

With this update, we've improved our variables and style naming convention, opened access to a new community design chat, reduced the size of our file by 30%, updated exportable Tokens into a single .json file, and more!

Updated Slider component

We've expanded the Slider component with new size variants and partitioned the set into range-based sliders and single-value sliders. We've restructured and optimized nested elements, layers, and synced properties for optimal performance.

The updated slider is now available in three distinct sets, each sized to accommodate the full range of screen resolutions.

Updated Breadcrumbs component

We've reworked the Breadcrumbs component, introducing a pill-shaped type and expanding the default set with new variants. The New Breadcrumbs are designed to better respond to variables, ensuring these components can adapt and help users navigate through different parts of your project UI.

We've also added extra types of separators to make Breadcrumbs more useful when adapting to your project's branding.

Updated Charts and Grid components

We've enhanced Charts and Grid components. We've added a new type of Line chart and upgraded the Grid and Legend components. To ease the work with all chart components, we've eliminated redundant paddings, groups, and constraints.

You can now expect better consistency when resizing elements from all chart component groups.

New Select component

We have introduced a new functional Select component. When interacted with, the Select displays a nested dropdown with a list of available actions. The Select component is available in three sizes and two different styles, making it versatile to fit various situations and allowing users to choose from available interface options.

New Date Picker component

We've added a new Date Picker component, which consists of an input field and a calendar pop-up. Just like most components, it comes in three different sizes and two distinct visual styles to adapt to any interface.

The Date Picker has two configurations: a single date input and a range with two inputs and calendars so that the user can define the start and the end of the needed date. By default, the date picker design allows the selection of a date, month, and year.

Updated Badge and Chip components

We've updated Badges and Chips with new, smaller variants to accommodate any contextual information these components provide to other UI elements. Additionally, we've added a new type of badge: a Ghost badge.

A ghost badge has a lower background contrast or semi-transparent background, where the foreground text is highlighted with one of the primary brand colors, making it more subtle compared to the default badge.

Updated Pagination component

We've updated the Pagination component with new size variants, increasing the number of steps available per nested element. This enhancement gives the paginations more options to split the content into separate pages, sections, or steps when operated.

Updated Feeds component

We've enhanced the Feeds component with new size variants and eliminated redundant control properties, making it more user-friendly and versatile for creating feeds. With the updated Feeds, it's easier to design activity, news, and content-sharing projects for a full range of screen resolutions.

New Activity feed template

We've created a responsive Activity Feed template utilizing recently added Feeds, Select, and Date Picker components to better show them in action.

This new template is designed to help you create an activity feed, news page, or collaboration layout for your project, where users share or generate content. The default design features an activity stream that displays real-time information in a list format. The information can include user actions, system events, and data being published in real time.

Updated variables and styles names

As we prepare our UI kit for export to code, we've updated variables and style names across the system. Our new naming conventions and global properties are now simplified with less redundant groups/tags for more seamless export to CSS.

When exporting to code, the collection/file name results in: CollectionName + ModeName;

And for token: GroupName + TokenName/VariableName;

So, we've decided to optimize our variables and removed redundant tagging based on this logic. For example, for Sizing: Filename: sizing-compact.css; Token: spacing-0. And if there is no GroupName (such as with Radius), the token name should have a prefix. e.g. radi-x;

New UI interactions

We've improved our interactive components by unifying prototype settings across all sets, making all interactions perfectly consistent between components. We've also added new Select and Date Picker components to the interactive playground.

→ See updated interactive components

Access to Design Chat

In this update, we are thrilled to announce that you can now access the community chat on Telegram. If you have purchased a Frames X license, you can gain access by visiting the "Get Access" page from your purchase email.

In this community chat, you're we're all free to share feedback, seek assistance, and suggest ideas for future releases and improvements. Plus, you'll enjoy connecting with fellow engineers and designers.