Breaking up the design into smaller elements

Let's put the Figma-first approach to the test by taking the step to turn a design into code.

In the last lesson, we created a product card component using our design tokens page while storing many of these token values in Figma's styles. The workflow demonstrated using a stable basis of design tokens that we made explicit together with their styles, and then we iterated and built on a simple component with these, refining tokens and the actual design as we went along.

This module will deal with how we generate code from our design. More specifically, we will focus most of our attention on the React code generation and spend less time on the other files as those are more straightforward.

For this lesson, I hope you are ready for a bit of a longer session since we'll:

  • Go full circle from the previous design, taking it apart into smaller components that (soon) can be generated into code

  • Learn more about optimum ways to set up our work in Figma for Figmagic

  • Create redlines to communicate non-visual aspects of our design

We'll have ended up with a more granular Figma design ready to build UI kits from, and we'll have actual code for the product card. Sweet!

Disassembling a design into smaller elements#

Okay, time to work. I want us to go back to the ProductCard component we made in the last lesson.

We used a frame to contain the area of the component. In the frame, we have a top-to-bottom sorting of the individual pieces that shape the entirety of the card. This "architecture" of sorts is very simple at the moment. However, because it's not been made into a component within Figma, it's not reusable; you'd have to copy-paste it everywhere, and nothing would stay in sync except your styles.

ProductCard component, original

Further, if you put on your "front-end developer glasses," notice that there is nothing particularly reusable about the internals either. For example, the heading is just a text snippet. If this were React, wouldn't we want to have some kind of component for that? Same story for the other parts—we can easily improve this situation, so let's do just that.

Making components from the internals#

For each of the internal parts (Image, Heading...), select them and press CMD + OPT + K to make them into components, one by one. With that done, all the internals can now be reused on their own. Do remember that the ones out in the work area are the "master" components! You can see this with the four-piece diamond icon.

ProductCard component, breaking up into components

Lastly, make the frame itself into a component. You'll see that Figma understood that the internal parts of the ProductCard were instances of the components you broke out into, so the "full" component just references those instances.

You will need to adjust the layer stacking that Figma just created for you a bit so that it has the same order.

ProductCard component, completely broken up into components

One final fix: Turn off "clip content" for the ProductCard component. This makes the shadow comes across, even if it's in the layer named Card.

Turning off "clip content" for the ProductCard component

Naming is hard, and if in doubt, give contextual names For this course, the scope is very limited, but I guess you can see how a component called Heading will quickly be contested. How do you know if it's a page heading or a product heading...? Is it contextually specific or not...? Many questions that a simple name does not solve. Therefore—unless you are in such a highly contained environment like we are in here, where you aren't creating any issues by naming things poorly—make sure to give good, proper, contextual names.

A page to collect Elements for Figmagic#

Create a page called Elements. Cut (CMD + X) your new small components (so, all of them except the big ProductCard) and paste (CMD + V) them into this new page.

Product card assets

Okay, so that's all good with Figma then. But what about Figmagic? Once again, it can't currently handle components that are this complex, composed out of many other components. What it can do, though, is use the more granular ones we just extracted.

Clean up and improvements#

Re-apply soft corners#

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