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 👇
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 👇
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 💪
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 👍
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 👍
https://twitter.com/Ridderingand/status/1406718622488088579?s=20
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 💪
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!
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
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)
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)
• • •
Missing some Tweet in this thread? You can try to
force a refresh
