Frames X v2.6: Universal UI kit and component library

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

In this release, you will discover a brand new mono-styled lite version of our UI kit — FramesX Mono. It features new components, interactions, and improvements to the styling system to streamline your design process in Figma.

FramesX 2.6 greatly expands its toolkit, introducing 13 new components that align more precisely with popular frontend frameworks like Shadcn and MUI UI. Our design system now includes 57 categories of components, marking it the largest, most diverse, and largest assets library to exist!

New Feedback UI component

We have added new Feedback components that can be used to design UI for user opinion and reaction designs. Additionally, we have included a new feedback modal component as an example of how feedback can be implemented and to show how it can be used with other components.

New Checkbox & Radio UI groups added

We've added Checkbox Group and Radio Group components by partitioning the previously used Choice List component. This new checkbox and radio group structure allows for the inclusion of extra horizontal variants and easier operation of each variant individually.

New Dialog UI component

We have introduced a new Dialog component that can display essential system information and assist users in navigating through your product's features, interfaces, and updates.

New Combobox UI component

We've added the Combobox component. This type of input combines a text field with a pop-up, offering users the option to choose from a predefined list of options or enter a custom value.

New Command Panel UI component

We've added the Command Panel component. This component can provide users with access to quick actions and system commands in a separate compact floating interface. The command panel aims to speed up workflow, allowing users to execute tasks faster than traditional menu navigation

New InputOTP UI component

We've added the InputOTP component. The OTP Input design supports a copy-paste functionality and allows users to enter a one-time password code that the system may send for verification or login measures.

The OTP Input also helps prevent errors by limiting input to the correct number and type of characters.

New Side Label Input component

We've added the Side Label input. This handy component is great for designing forms when you're short on vertical space. It keeps things compact by putting labels right next to the input fields, instead of above them. It's a smart solution to save space while keeping your forms clean and readable.

New Drawer UI component

We've added the Drawer component. The Drawer component includes side and bottom panel variants that slide into the user's view. The drawer provides quick access to navigation options and system settings without cluttering the main interface.

New Menubar UI component

We've added the Menubar component. The Menu Bar component is a top-placed bar that provides quick access to product navigation links, login options, or filters.

New Menu Navigation UI component

We have added the Menu Navigation component. This mega menu component provides a set of organized links for navigating your website or applications, along with your branding elements.

Additionally, it is flexible enough to showcase all your children and parent pages, offering a more precise way of exploring your interface product.

New Skeleton UI component

We've added the Skeleton component. This component displays a graphic placeholder of your content before it loads on the user's side, reducing the user's tension while waiting for the product to load.

Note: The skeleton component is animated and can be easily integrated into prototypes.

New Carousel UI component

We've added the Carousel component that can display multiple pieces of content within one frame. Its design allows cycling through the content with nested controls and swipe gestures.

Carousel is ideal for showcasing products, featuring testimonials, or cycling through key information without cluttering your UI. It adjusts to different screen sizes, ensuring a consistent experience on both desktop and mobile views.

Updated Counter UI component

We've updated the counter component with prototype interactions. The counter can now be used in your prototypes to dynamically increase or decrease displayed value.

Updated radius and sizing style guides

We've updated the Radius and Sizing style guides documentation, showcasing all available variables and usage options on dedicated pages, providing designers and developers with a more precise overview of our styling system.

Updated token names for UI color theme

In this update, we've contextualized our token names: Variable names that are used to represent colors (e.g., $primary-color and $secondary-color) have been revised to better reflect their purpose or context. This means the names now more clearly indicate where or how they should be used, which helps to understand their function.

New stroke variables

We've added new stroke variables and tokens. This update gives users a centralized way to control the thickness of borders and outlines across all components in our design system.

New Frames X Mono UI kit

We're excited to introduce Frames X Mono—a streamlined, lightweight version of our UI kit designed for seamless integration with Figma's AI functionality and the Shadcn UI library. This compact kit is perfect for enabling only the core Frames X components, making it ideal for rapid mockup prototyping and design using Team Libraries.

The Frames X Mono UI component library includes 76 versatile components, meticulously crafted to deliver exceptional design outcomes for web, desktop, and mobile applications.

Each component adheres to Figma variables, ensuring consistent results and optimal usability across projects.

Click the link below to learn more ↓