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? 👀

The best designers never stop learning 💪

But most of the resources out there are only for beginners...

So I've partnered with 7 other (absurdly talented) designers to launch something totally new:

introducing Dive 👇 Dive features advanced courses where you can learn directly from the most qualified instructors on the planet.

Each week a new instructor will be revealed 👀

I CANNOT WAIT for you to see who these 7 others are...

They are the absolute best of the best 👇

Want to learn more about component properties?

Here are 7 resources to take you from beginner to veteran 👇 I've done my best to order these resources from beginner -> advanced

So feel free to jump in at the level that makes sense for you 💪

Ok here we go...