Typography variables, new components & charts: Frames X v2.4

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

This update introduces long-awaited Typography variables, new components, and responsive charts. It focuses on elevating your workflow with text and widens the UI toolset with new features and data visualization elements.

The new release also includes a major improvement to file performance, reducing the memory usage of our UI kit.

New typography variables in Figma

We've added a new Typography variables collection that includes groups for defining global text parameters, such as font size, line height, font width, and letter spacing.

With these new typography variables, you can precisely control every text style applied to your projects since all of them are bound to these global parameters. What's more, you can now use Fonts as separate modes to switch from using one font to another.

Note: As a second system font, we've chosen Lora, a memorable serif font that is available for free from Google Fonts.

We've implemented text variables as separate collection of primitives to improve the consistency of your work without breaking your current workflow around text styles. We've also updated the typography guidelines page and removed redundant text styles such as thin (3xl-light) and black (3xl-bold).

Note: Before working with the UI kit's new typography, we recommend checking this official video for extra insights on new text variables.

→ See the new text variables in action

New scatter charts

We've added 12 new Scatter charts to enrich your project designs with fully resizable scatter plot diagrams.

Scatter plots are commonly used graphs to show the dynamic relationship between two numeric values (X vs. Y). They can be used in your analytics or dashboard designs as a solid, responsive layout.

→ See new scatter charts in action

New WYSIWYG component

This release adds the Rich-Text editor component (WYSIWYG). WYSIWYG stands for "what you see is what you get." It refers to an interface that allows users to see exactly how content will look when editing text and images before publishing it.

The rich text editor component can help you create text and image editing interfaces and integrate these editing functionalities into other parts of your interface. The WYSIWYG component is available for three resolutions: Desktop, Tablet, and Mobile.

→ See new rich text editor component in action

New Color Picker component

We've added the Color Picker component. The Color Picker component enables users to select a specific color by interacting with various controls, such as inputs or buttons.

The Color picker is available in linear and radial variants. It appears as a floating window and provides a range of pre-saved colors and color models that can be modified by changing nested components.

New Popover component

We've added the floating Popover component. The Popover component is used to place additional content on top of another. It pops up when the anchor element is clicked or focused. The component is a floating window that offers relevant information on the current user's task.

Popovers can be modified to point in any direction, enhance user experience as walkthrough elements, and provide easy access to additional details or actions within an application or website.

New Counter component

We've added new Counter component. The Counter component is a form element containing a number label and buttons that allow users to increase or decrease the displayed input value.

Updated UI controls components

We have updated and expanded several component sets, such as Toggles, Radios, Checkboxes, and Dropdown components.

These updated components offer greater flexibility for creating more complex UIs. We have included additional variants to support various sizes and help them adapt to different states and display sizes within your project.

Updated Interactive components

We've polished our component interactions and added new ones to the interactive playground.

We've added new interactions to commonly used control elements, including Text buttons, Checkbox buttons, Radio buttons, Outline inputs, and Material inputs. You can find the new interaction examples on the Interactive Components page in Figma's Frames X file.

→ See new component interactions

Memory usage improvements

We have significantly reduced the memory usage of Frames X's file by removing the previous version history and all previously published "ghost" layers/components. As a result, you can expect a smoother experience when working with any file's contents.