Generating flat React components with Figmagic "Elements"

Galloping ever onwards, we'll wave our magic wand and summon our low-complexity components.

Okay, so what's the deal with "flat" and "nested" elements? Let's remind ourselves that elements in the context of Figmagic are not components; they are specifically structured Figma components that we use to generate React code. In this lesson, we are going to make the "flat" ones.

Make sure you have updated your configuration as per the last lesson.

Distinguishing a "flat" from a "nested" Figmagic element#

Flat elements are meant to correspond to how typical HTML elements work. Examples of this could be inputs, buttons, DIVs, forms... As a front-end developer, you compose these elements into complex things that we tend to call "components." One problem that Brad Frost tried to solve with his "Atomic Design" concept was that we should not think of these components as a single mass where everything is of the same size. In fact, as you know, some components are hugely complicated and big, while others are tiny.

Atomic Design

The one big difference between a flat and nested element is very simple: nested elements contain groups. Unless it contains a group, it can only be a flat element. We've actually already made several of them from the ProductCard we took apart!

A flat element normally uses two layers: one that defines the surface area, and the other that defines text within that area.

What the nested element affords you is a richer way to express states and variations. For example, a button with a hover state and a normal state.

In the next lesson, we'll create those nested ones. For now, our attention will instead go to the remaining flat elements.

The new ones we will need are:

  • Header

  • Footer

  • Label

  • Form (just the outer container)

Config#

Ensure that your configuration contains the following settings:

Figma#

Let's go make quick work of the elements!

Make a text snippet, and set it to the Heading text style. Rename the layer Header and make it into a new component. Center-align the text.

Header element

Time for a magic trick: we can actually tell Figmagic what HTML element we want something to be generated as. Finish off by setting element=h1 in the Documentation panel (click the "component details" button to open it) on the right.

Creating the footer will follow the exact same steps we just did for the header. Copy the Header element, detach it, rename it Footer, and make it its own new component. Let's again center-align the text, but this time we need to set element=footer in the Documentation box.

Footer element

Lay out the new components neatly as you work.

Start a new discussion. All notification go to the author.