Tweet

Ridd

24 Jun, 8 tweets, 4 min read

@figmadesign

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 💪

https://twitter.com/Ridderingand/status/1406718622488088579?s=20

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 👍

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 💪

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!

@figmaacademy

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)

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @Ridderingand

Ridd

@Ridderingand

20 Jun

@figmadesign

There's a right way and a wrong way to use variants in @figmadesign.

When used correctly, they can be the most powerful part of your entire workflow.

These are the 5 steps I do for every single component I create 👇

01 — Create a "base" component

This will function as the single source of truth for all of your variants. So include everything you think you'll need.

I like to follow this naming format 👇

".base—[ComponentName]"

(using a . in front of the name hides it from your libraries)

02 — Duplicate your .base component 2x

Careful... don't duplicate it once, and then duplicate that new instance the 2nd time.

Both instances must come directly from the .base component to preserve all of your overrides when you switch between variants in the future.

Read 10 tweets

Ridd

@Ridderingand

8 Jun

How we organize components is one of the biggest missed opportunities for designers

Stop putting everything in bloated files and start creating systems that benefit your entire team.

Here's my strategy for organizing components for Maven 👇

I like to think about components as falling into one of three categories:

01 — Design System
02 — Product-Level
03 — Flow-Level

Let's look at each category and then I'll detail how they fit into the larger organization 👇

01 — Design System Components

These are top-level components that are used across many projects in your organization.

Most of the time these are simple atoms/molecules that become part of larger, more complex components:

ex: buttons, inputs, icons, etc.

Read 17 tweets

Ridd

@Ridderingand

2 Jun

I've created the foundations of a component/library system that I'm quite proud of at Maven.

It decreases the # of levers I need to pull to make changes so that we can iterate more quickly in the early days

Here's a little peak under the hood of a real-world example 👇

We're in the early stages of building an admin dashboard so we're making changes left and right...

My goal is to make those changes only one time so I can be as efficient as possible

For example, we realized the other day we wanted to decrease the sidebar width 👇

Think about how many frames you can have in a dashboard... easily 100+! I just started and already have 30+

If I only have a sidebar component, my layout breaks in all 30+ mockups as soon as I change the width 🤦‍♂️

Here's how I updated every layout automatically 👇

Read 13 tweets

Ridd

@Ridderingand

27 May

How to iterate at the speed of light using components ⚡

A simple 4 step process that I use 20+ times a day 👇

If you're like me, you spend a good amount of time tweaking the design of component groups while trying all sorts of different approaches.

But most designers I talk to don't use components until AFTER they pick the final design direction.

I'm here to propose a better way 👇

But before we get into the details... here are the two goals of this workflow:

1. Create a bunch of iterations side by side for easy comparison

2. Work as efficiently as possible (don't make the same design tweak twice)

Ok now that we got that out of the way... let's dive in👇

Read 8 tweets

Ridd

@Ridderingand

15 Mar

I like to think of portfolio projects as a recipe video you'd see online🥙

It starts with a beautiful visual of the finished plate to draw people in.

And then 95% of the video documents how you make the dish from scratch.

Here's a list of questions to help fill in that 95%👇

@shiftnudge

There's been a lot of Q&A around portfolio pieces in @shiftnudge recently. So I decided to compile some question prompts into a bit of a list.

Not every project produces answers to all of these questions. But hopefully, these spark some ideas of your own.

Let's take a look 👇

TEAM/PROJECT INFO

Who was the project for?
What was your role on the team?
What were you directly responsible for?
How did you collaborate with other team members?
What business context is needed to understand the project?

Read 11 tweets

Ridd

@Ridderingand

7 Feb

@webflow

I truly believe learning @webflow is one of the best investments you can make as a product designer

It's a master class in understanding how your @figmadesign UIs will ultimately be built.

So I created an animated walkthrough of the 5 main things I've learned from Webflow 👇