Thread by @ridd_design

Building complex nested components is one of my favorite parts of working in @figmadesign

I love seeing how people think about the building blocks!

So this is me peeling back the curtain and showing you exactly how I built this menu component below 👇

First, let's visualize where we are going.

There's a lot happening here... 😳 Specifically, there are many different levels that future changes can be made within this component.

So let's start building with our smallest possible legos 👇

01 // `IconType` component

We know that we'll have an icon for each question type and we know that we'll be wrapping them into an `IconType`to display in our rows.

So let's start here.

Pro tip: use the same layer names inside to preserve overrides when switching color 💪

02 // `QuestionType`component

Next we want to build out an individual row within our questions menu

Notice how I'm using a .base component to power my variants? (thread below if you want to learn more!)

Also this is where I add my hover interaction 👍

03 // `QuestionTypeMenu` component

Now we're ready to build the menu that is revealed onClick. We already have all of the pieces so it's as simple as assembling our legos into an auto layout and overriding the text/icons.

We can easily adjust the spacing as we add more types 💪

04 // `QuestionsHeader` component

This is the final component that I'll use in the designs.

There are two states: 1) Default 2) Expanded (and I'm using interactive components to switch between them).

Note the fixed width of the component even in the expanded state!

If you like getting into the nitty gritty of building in Figma make sure you're on the list for @figmaacademy 😇

figma.academy

Benefits to using a "legos" approach like this 👇

1. I'm can nest interactions like hover states
2. I can make a single change at any level of the hierarchy and it populates everywhere
3. My end component is really simple! Only an open and closed state (which will match a code)