Home > Blog > The REM Revolution in Figma: A New Paradigm for Designers

The REM Revolution in Figma: A New Paradigm for Designers

Introduction

In recent years, Figma has been a benchmark in the UI/UX Design world. And last year, Figma introduced a feature that revolutionizes how designers and developers collaborate: the development mode. This mode not only introduced measurements and numbers for developers but also brought a detailed version history and the ability to select sections ready for development. One of the most significant changes was introducing the REM unit, which enables a seamless transition from Figma designs to CSS, providing a new dimension of flexibility and consistency to the development process.

Unveiling the Mystery of REM Units

The concept of the REM unit, short for "root em," is crucial to understanding the innovation brought about by Figma. Simply put, the rem unit is a CSS measurement that defines the font size of the root element of a web page, usually represented by the <html> tag. For example, when 1rem equals the current size of the root font, we establish a flexible and consistent scale for font sizes across different devices and screens.

The Dilemma between Pixels and REM: An Issue of Accessibility and Control

While pixels (px) are widely used in Figma as absolute units, they have limitations when translating design to web development. While pixels offer designers desirable precision and control, they can compromise accessibility by disregarding users' font size preferences. On the other hand, rem units provide a more adaptable solution, allowing developers to adjust text size according to user preferences, thereby promoting a more inclusive and personalized browsing experience.

Undeniable Benefits of Using REM

In addition to promoting accessibility and customization, rem units offer several additional benefits. They facilitate the creation of responsive designs that are adaptable to different devices and screen sizes, ensuring a consistent experience for all users. Furthermore, rem units maintain relative proportions between page elements, avoiding layout and design problems that may arise when using pixels.

Challenges Beyond CSS: The Context of Native Applications

While rem units are a powerful tool in the arsenal of a web development-focused designer, it is essential to recognize that not all projects are limited to CSS. Native applications, for example, operate in a different context where considerations about root font size and CSS units may not be relevant. Thus, while REM represents a significant advancement in web design, it is crucial to consider its application context and limitations.

Conclusion: Embracing a Holistic Approach

In summary, the use of rem units in Figma represents more than just a technical change; it is a step toward a more inclusive and adaptable approach to digital design. By recognizing and addressing the challenges of accessibility and responsiveness, designers can create more engaging and accessible experiences for all users. While the path ahead may present unique challenges, integrating rem units into the design process promises a more promising and inclusive future for the digital design community.