Frames X v2.3: Enhanced Tools for Data-driven Design

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

This major update introduces new UI components, website blocks, and a brand-new variables structure! Frames X 2.3 focuses on improving your workflow with complex, data-heavy designs, such as dashboards, control panels, widgets, and tables

Frames X 2.3: New widget components, UI charts, and spacing variables

Along with new content, This update introduces a better approach to structure components in Figma. We've busted larger components into smaller, better-clarified variants. This change offers two key benefits:

• Faster design operations without losing any connections with component instances

• Optimized Figma memory usage. By partitioning our components, Figma reduces the memory load on calculations, resulting in faster operations

New Figma variables structure and updated documentation

We've moved Spacing variables out of the Theme collection. Spacing variables are now a standalone Sizing collection that includes Compact and Spacious modes.

Note: We've readjusted the Figma Variables Scoping for all collections, making only the correct variables appear on the canvas elements.

We've also updated our variables documentation in Figma with more details and use-case examples. This update bridges the gap between design intent and implementation when working with Frames X Figma variables.

New UI colors style guide in Figma

We've added a new color guide to help visualize the colors used in the current Themes (Theme A and Theme B).

This new piece of documentation aims to help communicate the currently used colors in your project. In other words, you can share it with your Team to explain what actual colors are used and for what purpose.

We hope this new style guide will help you. It helps us see the bigger picture without explaining how to navigate and use local Figma variables for every person involved in the project. You can find this new guide on the 'Colors' page of the file.

→ Preview Frames X Color Style Guide

New layouts and improvements to the site builder UI component

We've added 48 responsive layouts to our UI kit, including blocks for the Blogs and FAQs categories. We've also redesigned the Features, Social Proof, and Hero UI layouts with new elements, better resizing, and improved support for Figma variables modes.

→ Preview Figma Website Templates

New Widget UI component

We've added 52 highly customizable UI Widgets. These new widget components aim to display complex data in a compact card design. Widgets are used in dashboard designs, control panels, and other web applications.

Note: All widgets are made from existing Frames X UI components and have variants to support different screen resolutions/sizes (Breakpoint variables).

The video below teaches you how to operate these new widgets using the latest Figma variables feature to fit multiple screen resolutions ↓

→ Preview Widget Components

Updated UI templates and new Sales dashboard

We've added a new sales dashboard as an example of new widget components that are in action. The sales dashboard includes new Line Chart and Bar Chart widgets with a design showing current balance and trades completed in a preset period.

We've also revamped the Repository, Reports, Analytics, Kanban, Account, Settings, and File Manager dashboards, with all UI templates better reacting to new Figma variables.

→ Preview Frames X's Figma Templates.

Updated UI shadow effects and style guide in Figma

Our UI kits now feature automatically adaptive Shadow styles for Light and Dark color modes. While shadows are optional in dark mode, you can easily disable them by removing the opacity variable from the Local Styles panel.

→ Preview Figma Effects Style Guide

Restructured Figma Components

We've updated all variant sets across the file with a better, more granular component segmentation.

We've divided our largest Figma component into smaller, more manageable structures. This allows for easier customization and manipulation. When changes are needed, you can implement them more easily since the new variants are not as big as before.

Tabs, Menus, Dropdowns, and modular UI sets now include better-structured variants with less overwhelming properties yet the same great functionalities.

We've reworked our UI Tables by refining the Table Cell components and removing unused variants. This update makes our Tables more manageable while preserving full customization options through overrides

New File Uploader UI component

We've added a new File uploader component to help integrate file uploading functionality into your interfaces. The Uploader components include variants for multiple sizes and states to display the status of uploading progress.

As a bonus, we've added file upload UI examples as Modal component variants in Figma.

→ Preview Figma Uploader Component

New Heatmap charts

We've added 12 new Heatmap charts to enrich your design with resizable diagram examples.

Heatmap charts display data using color intensity on a two-dimensional grid. Heatmap diagrams are commonly used to visualize patterns, trends, and correlations between different types of data.

The more saturated colors in Heatmap charts usually represent higher volumes of values compared to less saturated colors.

→ Preview Heatmap Charts

New Semi Circular charts

We've upgraded our Charts component and introduced new Semi Circle Pie charts and Semi Circle Gauge chart variants.

You can use these new Semi Circular charts to design widgets, dashboards, and other data-dense interfaces.

→ Preview Semi Circular Charts

That's a wrap! We can't wait to see the incredible designs you create using our new web design system and UI kit. Stay tuned for more exciting updates!