Skip to content

Figma Layers Recommendations

Figma Layers Recommendations

Layout

Any component which should contain one or more children, should be converted to Auto-Layout frame. Any element which has padding should be wrapped by Auto-Layout frame, and positioned by it. Any absolute offsets must be excluded.

Text

Text should be created as usual, after converting by Reactor it will be converted to React-MUI-component called

Typography

If you need to create text with different styles use different text layers instead of using any mixed styles for text. See Text Example 1. If you want to create a list of text strings, use different layers instead of using a single layer. Also for lists you can use the MUI List component. See Text Example 2.

Images

Images should be used as usual. It will be converted to HTML img.

  1. The image must have a unique name.
  2. Do not use masks for image cropping.

Icons & Vector

Icons should be used as usual. It will be converted to SVG image. Figma VECTOR layers should be merged to a single layer, also you should reduce nested layers if possible. See Icons Example 1. For better results use MUI Icons, or create project icon packs for similar icons. See Custom Components Example 1.

Components

In order to better understand how to use components, please refer to the official Figma documentation.

Custom components should be created as usual. It is just a layout-based element which should be converted to component, and will be used as a component variant in design. Custom Components are typically used to create elements that are repetitive but may have some differences in content or structure. You must use component properties ( Variant/Text/Boolean/Instance Swap) to customize them. See Custom Components Example 1. Custom Components Example 2.

You can also see an example of creating a custom component

CreateCustomComponent

If there is an INSTANCE of the component while the owner component itself is missing, you can restore the missing component by using the “Restore Component” Figma option. Otherwise it will be converted as an ordinary FRAME element, not as a component.