How to iterate at the speed of light using components ⚑

A simple 4 step process that I use 20+ times a day πŸ‘‡ Image
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πŸ‘‡
1. Duplicate my main frame and select all of the instances of my component.

2. Then run the Master plugin by typing cmd + / + master

3. Drag my main component into the auto layout and delete the duplicate

4. Make any style tweaks that I want to try on the main component!
Running the master plugin automatically creates a new main component and makes all other components an instance of that main component

This way I only have to adjust my style one time and the changes automatically reflect throughout my entire component group.
This allows me to move faaaassstt πŸ’¨

In general I'm a big believer in @Julian 's "Creativity Faucet"

Sometimes you have to crank out the bad ideas to get to the good ones. This workflow just speeds up the time it takes me to get through the bad ones πŸ˜‡
I try not to think too much. Just duplicate and try the next idea in my mental pipeline. Repeat.

If I am doing UI work I'll crank out 10-20 iterations of something. Then I can take a step back, narrow down my list, and either continue the process or loop in other stakeholders.
Here's a link to @zyumbik 's Master plugin.

Try it for free. I promise you... you're going to love it. I'd probably pay him $20/mo to keep using this plugin but don't tell him that πŸ˜‰

dominate.design

β€’ β€’ β€’

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

Keep Current with Ridd

Ridd Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

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

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @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 πŸ‘‡ Image
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. Image
Read 17 tweets
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
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%πŸ‘‡
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
7 Feb
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 πŸ‘‡
01 β€” Webflow teaches you how to think in terms of responsive units.
02 β€” Webflow teaches you exactly how to use Flexbox in your interfaces (and is the perfect extension to the new @figmadesign auto-layout updates).
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(