| Figma Concept | React Component or Concept | Notes |
|---|---|---|
FigmaApp |
ReactApplication |
Represents the overall React app, holds the pages and router. |
Document |
Page |
A Figma Document, or a figma page, is mapped to a React Page which represents a single page in the app, holds its content and route path, and is a child of the React application. |
Canvas |
div |
Renders the parent elements of a Page. May need further styling depending on the Document structure. |
Frame |
div |
Represents a container element. We will be using CSS flexbox for layout (handling layoutMode is the tricky part). Attributes like itemSpacing, primaryAxisAlignItems, counterAxisAlignItems will be translated to CSS flexbox properties. cornerRadius, cornerSmoothing will translate into border radius. |
Rectangle |
div |
Represents a basic rectangular shape, will be translated into div with the proper background, dimensions, border radius (from cornerRadius, cornerSmoothing properties) and other styling. |
Text |
p or span |
Renders text content. We might use <p> for paragraphs and <span> for inline text, depending on context. We have to map the Style properties to React inline styles. (e.g. fontFamily, fontSize, fontWeight, letterSpacing, lineHeightPercent, etc). Also paddingBottom, paddingLeft, paddingRight, paddingTop should be mapped to style. |
Line |
div or other HTML elements (e.g <hr/>) |
A line element. It should be rendered as a <hr/> or div styled with border-top or border-bottom (depending on its position) |
Component |
FunctionalComponent |
Maps a Figma component definition to a React functional component, this will require the mapping of the children, props, states. |
Instance |
Component Usage | Maps to the usage of React component with the right set of props (component properties) and overrides. |
COMPONENT_SET |
div |
Represents a set of components with a layout. We can map it as a div with the style property that manages the layout. |
Style |
inline style attribute | Figma text style definitions will be translated to inline styles in the react component. (font properties, line height, text alignment, etc.) |
Color |
string (CSS color) |
The color information will be converted to CSS color strings (e.g., rgba(r, g, b, a)). |
LayoutGrid |
No Direct Mapping | Layout Grids will not have a direct mapping, as grids can be achieved by CSS Flexbox. It will need some logic to translate to CSS flexbox properties, that will be applied to its parent element. |
Constraints |
CSS Flexbox properties | Constraint properties like vertical and horizontal will be used to align the element with the flexbox properties on its parent. |
PrototypeDevice |
No Direct Mapping | This can be used to define viewport size or add custom styling for a device. For now, we will ignore this property, but later can be taken into account for responsive design. |
Trigger / Action / Transition |
Event Handlers and Navigation | We will try to map actions like onClick events on buttons or navigation on menu items. We should revisit this when we have the basic UI done. |
Background |
CSS background properties | The properties of the background will be mapped to CSS properties in its parent element. |
Dimensions |
Inline Styles (width, height, etc.) | Attributes like x, y, width, and height will be mapped to inline style attributes, which will help position and size elements. |
BlendMode |
CSS properties | The properties of blend mode will be mapped to CSS properties in its parent element. |
Stroke |
CSS border properties | The properties of strokes will be mapped to CSS border properties in its parent element. |
Effect |
CSS filter properties | The effect property will be mapped to CSS filter property on its parent element. |
Key Considerations:
- Abstraction: This is an abstract mapping and it is only intended to be a starting point. We might need to add extra elements for specific cases.
- Flexibility: The mapping is designed to be flexible, where it's possible to map the same Figma element in different ways, based on the design and development requirements of our project.
- Simplifications: The table is simplified and does not consider all Figma elements, or React features. We will add more as required by the transformation.
- CSS Styling: We are initially targeting inline styles for simplicity.
- Data Handling: We need to clarify how component properties are handled, specially how to translate the emaps to props.