Flexma-react NPM

flexma-react is a set of React components that enable you to go from Figma design to React code quickly and easily.

1. Installation

Using npm:

npm install flexma-react

To use the flexma-react components in your React app:

import { FmRow, FmColumn } from 'flexma-react';

// ...
function MyReactComponent() {
  return (
    <FmRow showBorders vCenter hSpaceAround>
      <div>Row cell 1</div>
      <FmColumn gap={5} showBorders>
        <div> Row cell 2, Col cell 1</div>
        <div> Row cell 2, Col cell 2</div>
      </FmColumn>
    </FmRow>
  );
}

The above code would render this simple example that includes a column layout within a row:

2. Motivation

When working through our own projects, we saw an opportunity to better align the way we were turning Figma designs into React code. We wanted to avoid having our developers trying to replicate designs by "eyeballing it", and instead provide a more programmatic way to move from design to code.

Figma's auto layout feature is a pretty close approximation of the way CSS flexbox works, so we built the flexma-react components to compliment this method of laying out UI elements -- flexma-react abstracts away the flexbox details to allow a developer to look at the specifications of a Figma mock up and easily implement it in React.

3. Examples

Let's use a simple example to quickly illustrate the design-to-code workflow enabled by flexma-react.

We can see the container uses a vertical/column layout, with a 15 pixel gap between each child (cell), and a padding of 5 on all sides of the container.

To implement this in React using flexma-react, we'll use the FmColumn component:

<FmColumn gap={15} style={{ padding: 5 }}>
  {/* Icon and main text will go here */}

  {/* Date and chevron will go here */}
</FmColumn>

We can see this block is using a horizontal/row layout, with a gap of 10 between each child. To implement this in React, we use the FmRow component and we'll use some hypothetical custom components that will provide the actual content:

<FmColumn gap={15} style={{ padding: 5 }}>
  <FmRow gap={10}>
    <IconBullhorn />
    <OfferDetails />
  </FmRow>

  {/* Date and chevron will go here */}
</FmColumn>

<FmColumn gap={15} style={{ padding: 5 }}>

  <FmRow gap={10}>
    <IconBullhorn />
    <OfferDetails />
  </FmRow>

  <FmRow gap={15}>
    <OfferDate style={{ width: '100%' }}>
    <ChevronLink>
  </FmRow>

</FmColumn>

Note that this is a simple example, and flexma-react components include additional optional props to help accommodate various spacing and alignment requirements. For further details, please see the prop interfaces in the flexma-react component files.

4. Features

To make the transition from Figma to React as efficient as possible, flexma-react components support the following features:

Vertical and horizontal alignment (in CSS speak: flex-start, center, flex-end)
Spacing between child elements (Packed, Space between or gap in Figma, space-between, space-around, or gap in CSS)
Setting child element size to replicate Figma's Hug contents and Fill container behaviors.