Tweet

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

May 10

Wow, instance swapping is about to blow the roof off of what we can do with components 🤯

Here's how 👇 #config2022

Yesterday, many people would have said they prefer to avoid nested components...

Why?

Because it's not always clear what is "swappable".

You can use emojis like in the layer list below, but it'll always be a bit confusing when you can edit a component at many different levels.

As a result, people often prefer to expose EVERY variant option at the parent level.

This is super convenient for the design system consumer because all configurations are available at a glance.

But it leads to these massive variant matrixes which are such a pain to manage...

Read 10 tweets

Ridd 🏛

@Ridderingand

Apr 20

Being able to think like a developer is a superpower for designers 💪

And this mental model is the perfect starting point👇

Almost everything that you would create in a “Style guide” should be thought of as an object.

An “object” is really just a folder that holds a set of variables inside.

Seeing things as "objects" + "variables" is a massive unlock for designers.

Let's look at an example 👇

Often times objects (read: folders) are nested inside of each other...

`interfacePallete` is an object that holds the `green` and `red` objects

And then `green` is an object that holds the `default`, `light`, `dark`, `hover`, and `gradient` values

Let's see it in Figma 👇

Read 15 tweets

Ridd 🏛

@Ridderingand

Apr 19

@figma

How to make sure this never happens again in @figma 👇

Interactive components are crazy powerful but holy smokes can they be a pain when your overrides are constantly breaking...

It's by far the most common mistake I see in prototyping and this walkthrough will make sure it never happens again 👇

Strategically naming your layers is ESSENTIAL in interactive components.

Because if a layer name in your "Hover" state doesn't match your "Default" state...

When you trigger the interaction it will revert to the original layer content (i.e. what's happening in the video above)

Read 11 tweets

Ridd 🏛

@Ridderingand

Apr 14

I've used the exact same process to build countless color systems over the years...

It's EASY to reproduce and it works every time 💯

5 steps for building your next color system 👇

Most great color palettes are comprised of 3 groupings:

1. Brand colors
2. Neutrals colors (your grays)
3. Interface colors (your status alerts)

We're going to walk through a repeatable process for creating each one in a way that ensures your palette is cohesive and flexible 👇

Step 01 — Find a starting point

Inspiration can come from anywhere (I'll link some of my favorites at the end of this thread).

We just need at least one solid color to start. Then write out the HSB! This will lay the foundation for our color system.

Read 15 tweets

Ridd 🏛

@Ridderingand

Apr 14

@NotionHQ

In ~6 hours I'll be promoting a group of designers to some of the most exciting teams in tech 👀

If you want to get in front of companies like @NotionHQ @BankMercury @dapperlabs @onuniverse and @Polywork

This is your chance 👇
ridd.pallet.com/talent/welcome…

You can join anonymously and even hide your profile from specific companies.

Since this is pretty early stages I want to be upfront by saying most opportunities are for US/Canada/Europe at the moment 👍

But all experience levels are welcome!

ridd.pallet.com/talent/welcome…

Here's a little video for candidates to explain a bit more of the "why" behind the designer talent network 👇

Read 5 tweets

Ridd 🏛

@Ridderingand

Mar 19

@figma

How to create "Primitives" in @figma using "Slot" components

Consistency 🤝 Flexibility

A step by step video walkthrough 👇

First, let's define our terms:

A "primitive" is the simplest form of a common component.

Think about how often we use cards in our UI. A card "primitive" would define things like:

• border styles
• shadows
• padding
• hover states
• headers
• etc.

The important thing about "primitives" is that they are NOT overly prescriptive and rarely go beyond the basics.

They only define what remains consistent while allowing all of the content within them to remain flexible.

This is where "slot" components come into play 👇

Read 15 tweets

Share this page!

Ridd 🏛

People who liked this thread also liked...

Try unrolling a thread yourself!

More from @Ridderingand

Ridd 🏛

Ridd 🏛

Ridd 🏛

Ridd 🏛

Ridd 🏛

Ridd 🏛

Did Thread Reader help you today?

Don't want to be a Premium member but still want to support us?