Generating nested elements
Now, we leave the easy flat components for the more detailed nested ones!
Welcome back. In this lesson, we will talk about "nested elements," the Figmagic term for any elements that contain variants or visual stateful behavior.
Support for Figma Variants?
Let me open by saying that Figmagic version 4 does not have support for the recent feature called "Variants", a very powerful way of allowing rich stateful behavior to be built inside of Figma. It is a solution to many of the conventions that previous generations of tools, like Sketch, had to work around. I am always keen on finding new improvements, and Variants is probably the single biggest thing I'd like to see a future Figmagic version 5 be able to support. Until that's available, however, we need other ways of expressing variations and takes on specific components.
Back to our work. The ProductCard component is missing something: the button that allows users to buy the product it's attached. For the checkout view, we also need Input elements so that we can compose a form from them.
The scope of this lesson is, therefore, to create:
A Button element
An Input element
Creating the Button#
We already have a raw template for our button. To make it a proper nested element, we will need to modify our existing Button.
Navigate to your Button and open up the layers for it. Group the two layers (text and layout) and rename the group normal. When generated, this will mean a class called normal will contain these styles.
Also, edit the description to element=button, so we generate it as a button and not a div later.
Using groups in elements#
We can use groups to denote our behaviors and states. You can currently add at most two layers deep, but you can have any number of groups at the same level. This is to support cases like classes with independent states (for example, :hover or :invalid states).
If you use more classes or states, the shared values will be lifted to the top of the CSS, so there is no useless duplicate code. Sweet!
Figmagic needs to have a text layer and a layout layer in every group, or you will get poor results.
Copy the normal group and call it :hover. If you hover over the layers, you can use the eyeball icon to toggle the visibility of groups. Hide the normal group. Change the background color of the layout object in :hover to our deep blue color.
Redlines seem a bit overkill for something this obvious, so skip them here.
Run npx figmagic. Inspect the generated code at src/elements/Button/ButtonCss.js:
const ButtonCss = `
width: 100%; box-sizing: border-box; border: 0; border-style: solid;padding-left: ${spacing.small};
padding-right: ${spacing.small};
height: ${spacing.tall};
border-radius: ${radii.rounded};
color: ${colors.pureWhite};
font-size: ${fontSizes.regular};
font-family: ${fontFamilies.roboto};
font-weight: ${fontWeights.bold};
text-align: center; :.normal {background-color: ${colors.purple};
} ::hover {background-color: ${colors.deepBlue};
}`;Notice that because we used the text element together with the layout element, Figmagic was able to infer the exact padding you want!
This page is a preview of The newline Guide to React Component Design Systems with Figmagic