Design Guidelines Overview

This document provides the recommendations for all designers who are willing to use Reactor Figma Plugin (hereinafter, Reactor) to convert their design into React code. The quality of the resulting React code fully depends on how you followed these guidelines. These guidelines can also be used to convert the existing Figma designs into the one that’s ready to be converted by Reactor.

The main goal of these guidelines is to provide as much metadata as possible inside the Figma design elements, so Reactor understands how to properly convert UI elements into the meaningful React components ready for further development. Altogether, these guidelines and Reactor plugin — is a bridge to speedup the transforming from the design to the development.

One of the options to provide the required metadata to the plugin is Material Design library for Figma: MUI for Figma. This library is supported by Reactor from version 1.0.

Metadata will automatically be provided when designer uses MUI components. For example, if there is a search form on page, it’s better to use MUI input field accordingly in the design, instead of drawing a native figma rectangular. Although the rectangular may look like the input field, it doesn’t provide any information about what kind of functionality it should have in the developed application. Thus, the designer should provide more meaningful information about the design elements he’s making, so the plugin and later the developer understand better what should be done with it.

The document has recommendations for some native Figma elements as well as for using MUI components. If you change MUI component properties, please make sure first there are no remarks about this property in these guidelines (see section MUI Components Recommendations). If there are no recommendations nor restrictions of using elements, you can use it as usual with no restrictions.

Special attention should be paid to absolute positioning of the elements in the design. For better conversion and further development it’s better to use relative positioning made by “auto layout” in Figma element properties. Auto Layout is one of the most important features in Figma, with a versatility that sets it apart from the ones in other design tools. In brief, it allows you to structure components and frames in a way that can automatically grow, making the container adapt to the size of its contents, or the other way around. Auto Layout is friendly for the developers and easy to understand by Reactor plugin. While absolute positioning in most cases is not obvious to be transformed into the React code and still has to be done by hand by the developers. There are cases though when absolute positioning is still good. For example, it can be used for background image positioning.

If the output React code has poor quality or has issues, please make sure the initial design is properly adapted according to these guidelines first. Please make sure you are using the right versions of the plugin and MUI library specified in the requirements section.

For better understanding of the guidelines there is a specially designed Figma Design Guidelines for Reactor document where you can check in detail some of the Figma element properties friendly for Reactor conversion.

In case of questions or if you have any feedback about using Reactor, please contact the plugin development team.