Dmitriy Bunin
•
Jun 13, 2024
Frames X v2.5: World-largest UI Kit Updated
What's new in Frames X UI Kit v2.5
figma ui kit
design system
Hey there! We are excited to share the release of Frames X 2.5!
This update extends our toolset beyond any other UI framework! With new robust components added and upgrades to existing ones, our design system is now more universal than ever, solidifying FramesX's position as the best UI kit for Figma to date.
Frames X 2.5: New components, UI interactions, refined Figma variables and Community chat
Our newly updated library now boasts over 42 versatile UI component categories, providing an extensive collection of interface elements for your projects. Key additions in this release include:
Refined Variables and Token naming conventions to better align our UI kit with the code export and latest LLM AI models.
New community chat for collaborative design, feedback sharing, and problem-solving.
33% Reduction in file size and performance improvements in working with UI kit components.
Updated Slider UI component
We've expanded our Slider component to include range-based and single-value sliders. We've also restructured these complex UI components to optimize every nested slider element for optimal performance in your designs.
→ Preview Figma Slider Component
Updated Breadcrumbs UI component
We've reworked the Breadcrumbs component, introducing new pill-shaped variants and expanded sets with extra size variations. New Breadcrumbs are designed to better react to variables and modes, ensuring they adapt and help users navigate through your interfaces.
We've also added new variants to make the Breadcrumbs component more universal. This allows you to switch between breadcrumb separators and fit the navigation into any part of your user interface.
Updated Charts and Grid components
We've rolled out enhancements to our Charts and Grid components, introducing new Sharp Line charts with updated Grid and Legends components.
New improvements include restructuring charts, eliminating unused layers, and optimizing resizing. You can now expect better consistency between elements when resizing charts.
→ Preview Figma Charts Component
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 useful for your form designs duties.
Date Picker component
We've added a new Date Picker component, which consists of an input field and a calendar pop-up element.
Just like most components, Date Picker input comes in three different sizes and two distinct visual styles to adapt to any interface. The Date Picker component enables users to enter, edit, and select dates using a text-based input.
→ Preview Date Picker Component
Updated Badges and Chips components
We've enhanced Badges and Chips UI with new, compact-size variants to help you use them in any situation and under any screen resolution. Additionally, we've added a new type of badge: a Ghost badge.
Ghost badges feature a subtle, semi-transparent background with lower contrast. The foreground text is highlighted using one of the primary brand colors, creating a more understated appearance compared to standard badges.
→ Preview Chip & Badge Components
Updated Pagination component
We've updated the Pagination component with new functional variants, increasing the number of available steps per element.
This enhancement aims to help you detach the pagination UI less and give more control over its properties. You can now more confidently use pagination UI to split the content into separate pages, sections, and interface steps.
→ Preview Pagination Components
Updated Feeds component
We've enhanced the Feeds component with new smaller size variants and removed redundant properties, making it more user-friendly and useful for your designs.
With this update, Feeds UI is now easier to use for making dashboards, activity panels, and social media posts.
To better demonstrate its full power, we've also added a new Activity Feed template to our UI kit's Templates section.
→ Preview Figma Feeds Components
New activity feed template
We've created a responsive Activity Feed template utilizing recently added Feeds, Selects, and Date Picker components to battle-test them and show them in action.
This Figma template serves as both a practical demonstration and a rigorous test of these new UI elements.
The Activity Feed template helps you create social and media news feed interfaces. Its design features a UI with a real-time user activity stream, calendar events, and ongoing updates.
→ Preview Activity Feed Template
Updated variables and naming convention
We've streamlined the code export process for our UI kit, making it more developer-friendly. This update features refined variables and token names, along with optimized naming conventions for smoother export of CSS properties.
Updated prototype Interactions
We've updated our set of interactive UI components with new interactions and improvements to animation easings.
Our team has dedicated significant effort to standardizing prototype easings throughout the design system, ensuring consistent interactions across all Frames X interactive components.
We've also introduced new interactions for Select and Date Picker UI components. You can explore all interactive components in our Interactive Components Playground.
→ Interactive Figma components in action
Access to Frames X Community Chat
In this update, we are thrilled to introduce our new Design Chat. If you're a Frames X customer, you can now access the community chat on Telegram.
Our new community chat is your hub for sharing feedback, getting help, and proposing ideas for future releases. You'll also enjoy connecting with professional engineers and designers from all over the world.
