Why is it cool to hate on design systems? 🤔

I'm starting to think the pendulum has swung too far and we're missing the point...

Some thoughts 👇 I’ll admit… I never use the phrase “design system” anymore.

Somehow the term has become synonymous with scale

And one reason is b/c we're constantly referencing the biggest systems (Polaris, Spectrum, Material, etc.)

But our tools are also to blame 👇

The @outerbase website is an interesting case study in design trends right now

some (slightly nerdy) thoughts 👇 Idk when it happened exactly but dev tools have had a huge impact on web design trends over the last few years

But we reached a point where they all used glows, gradients, transparency, blurring, etc.

So it's interesting to see brands like Outerbase take a hard left 👇

I've been thinking too much about what it looks like to design with "soul" 💭

It's a tough concept to pin point.

But I think I've narrowed it down to 4 signals 👇 1 // Unreasonable quality

Designing with soul means at least one thing you ship will be unreasonably good... like WAY more than you're required to do.

The example that comes to mind is the Figjam unfurling interaction 👇

Talk about going beyond the brief...

It's taken me over 4 years...

But I think I finally have the perfect method for nailing ☀️/🌙 modes in @figma

Here's my step-by-step process 👇 To create a themeable system like this I like to start with Tailwind's 50 → 950 scale

Then we update it in three phases:

1) Nail the hue (easy)
2) Pick your saturation level (easy)
3) Use UI to derive brightness values (this is where the magic happens)

Let's dive in 👇

What are we doing in Figma today that we’ll regret 6 months from now? 🤔

There's been some BIG regrets over the years...

And I think it's starting to happen again 👇 Let's begin by looking at two of the biggest Figma regrets over the past few years

Then we can identify trends 🔍

Sound good? ✌️

The story starts in 2020 shortly after the release of variants...

Have you ever presented your work and the meeting kinda went off the rails?

Ya… same 😅

Here are 3 ways to crush it the next time you share on Zoom 👇 1// Nail the intro slide

Before jumping right into UI, problem statements, etc…

Start with a visual outline of what you’re going to be talking about over the next ~X minutes.

Notice below how I’m calling out the primary feedback I’m seeking before showing any concepts 👀

Trying a new thing...

I'm going to share ALL of my (messy) process while designing the new @joindiveclub website 👀

The goal is to:
1) Hold myself accountable
2) Inspire others with a behind-the-scenes

So here's a breakdown of my progress for day 1 👇 When I'm designing a product/website I mostly start the same way every time...

1) List out what I KNOW that I'll need (both in terms of content and pages)

2) Start writing out the big questions I know I'll have to answer

Here's an example of a couple of big questions 👇

I think it’s time to take a step back from the typical portfolio structure.

You know… the one where the home page is mostly a grid of cards that all point to individual case studies 👀

Here's what I'd do instead of this 👇 Instead of settling for individual project thumbnails and burying the bulk of your work on nested pages…

What if your home page was your sizzle reel?

Then you could showcase all of your best UI, accomplishments, prototypes, etc. all in one place 👇

Obviously, auto layout, prototyping, dev mode, etc. is a huge deal...

But there were a LOT of amazing features released at Config that are easier to miss 👀

Creating a running list of some of my favorites as I find them 👇 01 // Section statuses

Sections were already becoming one of my favorite tools in Figma...

This little status marker is such a nice touch and I can't wait to use it 👌

Is anyone else a bit worried about the level of complexity creeping into Figma?

Balancing "make design accessible" with constant feature requests from a vocal power user base has to be TOUGH...

FWIW I think they're doing great. But each Config they steepen the learning curve 🤷‍♂️ AI could go either way 🤔

It could make the tool 10x easier for newer designers and be the most significant advancement in "make design accessible" ever...

Or it could be yet another feature set in an increasingly dense product lol.

Have a ton of faith in this team though 🙏

Some thoughts on:

✦ AI
∞ Malleable interfaces
❖ The future of design systems

A (kinda crazy) thought exercise 👇 AI is going to turn everyone into an engineer.

Not just designers, PMs, or other "non-technical" team members...

I'm talking about the USERS of your product.

This is color sorcery 🪄

1) The website is so fun to use
2) The colors come out incredibly every time Play with it yourself 👇

meodai.github.io/poline/?utm_so…

In a world of dark mode Linear copycats...

This new site from Compound is a breath of fresh air 🤩

Here are my favorite design details for inspiration 👇 01 // Art direction

This hero section animation is pure elegance. I know this site will be high quality within the first 2 seconds 🤌

Lots of new faces over the last year...

So I want to say thank you ❤️

Here's (almost) everything I know about product design 👇 The easy way to build a color system in Figma 👇

https://twitter.com/ridd_design/status/1514655233040785415

I remember years ago thinking that I HAD to include sketching in my design process.

No respectable portfolio piece could exist without sketches... right??

Lol.

Here's my design process instead 👇 When possible, I like to start with spatial writing.

I just start typing about the problem without any real idea of where my thoughts will lead me...

Eventually I start dragging things around, grouping by theme, clustering questions/ideas/etc.

But this doesn't always work 👇

Seeing a lot of people making the same mistake with slot components...

Here's what to avoid 👇 You might look at these two cards and think...

"Hmm... seems like we're using a consistent card primitive! What a great use case for a "slot" component!"

And you'd be right 😉

But there's a right and a wrong way to set up this system 👇

The component properties beta is 🔥

Here are 3 ways I'm using the new features to level up my Figma game 👇 01 // Exposing subcomponent state

This is super valuable with high-touch components like forms...

❌ Before:
You still had to drill into the subcomponent layer to change state every. single. time. 🙁

✅ After:
You can surface that state at the parent level for easy access 🙌

Variants pro tip incoming 👀

Create a single set of height variables.

And then apply them across all of your core "atoms" (buttons, inputs, etc.)

3 reasons why 👇 1) Developers can define this size object in a single place in the codebase.

This makes it easier to build but also makes it easier to make changes in the future.

Because you only have one knob to turn to update all of your core atoms (buttons, inputs, selects, etc.)

I'll only ever design for startups.

10+ years in and I'll never go back.

Not only is it ridiculously fun...

But I believe working at a startup is the FASTEST way to grow as a designer.

11 reasons why 👇 (also at the end of this thread I have a little teaser about what's coming next and I think you might like it)

Ok let's dive in 👇

Arc is a masterclass in product design 🤯

It's so inspiring and I feel like we can all learn a TON from how it's designed.

So I've been taking all kinds of notes...

Here are the 9 design elements that stand out the most 👇 If you're not familiar, Arc is a new browser from @browsercompany

This isn't an incremental improvement on Safari/Chrome/etc.

It's a fundamental rethinking of what it means to surf the internet.

And @joshm has built a stellar team that is pushing the boundaries of design 👇

I had so much fun jamming with @FonsMans on the branding for Dive 🤿

We started from 0 and it was a heck of a journey...

So I thought it might be fun to give a behind-the-scenes look at the entire branding process 👇 The first thing Fons had us do was start working on a Manifest.

For a full week we wrote and then re-wrote...

It forced us to clarify the vision for the brand and align on some key differentiating factors.

Btw at this point notice how [Name] was still a placeholder? 👀