Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Ridd 🤿 Profile picture
@ridd_design
May 10, 2022 • 7 tweets • 2 min read • Read on X
Scrolly
Dylan talking about auto layout as if we're paying attention to anything other than dark mode lol #Config2022
Death to the 0px frame! Absolute positioning is here 🙌
Negative spacing??
Oh do it. Do it Dylan. Give me individual strokes. DO IT.
Yesssssss. Death to inner shadows as borders!
Component props 🎉

Finally we can stop wasting so much time with variant matrixes.

This will be so much more intuitive to consume too 👏
"Spotlight" mode is genius too. So glad to not have to say "ok click on my little avatar in the top right" anymore lol

• • •

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 @ridd_design

Ridd 🤿 Profile picture
Sep 16
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 👇 Image
Many of Figma’s new features cater to enterprise customers (and it makes sense why 🤷‍♂️)

But what about YOUR product?

Do you reeeeally need to define typography primitives as variables?

So let's take a step back... b/c design systems don't have to be so "enterprise-y" 👇 Image
Read 12 tweets
Ridd 🤿 Profile picture
Sep 6
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 👇
Image
Image
They lean all the way in on this generative image style 👀

Some use cases I've seen before like using custom images to frame mockups

But they're also doing some things I've never seen before...
Image
Image
Read 10 tweets
Ridd 🤿 Profile picture
Apr 18
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...
There is no chance this was a requirement in a PRD.

Quality like this only comes from an "intrinsic place of motivation"

I can feel the care put into this interaction every time I drag a new sticky onto the canvas. That's what makes it memorable.
Read 9 tweets
Ridd 🤿 Profile picture
Feb 26
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 👇 Image
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 👇
1// Nail the hue

The best way to ensure your grays work well with your brand palette is to use the hue from your primary color

This is part of why it's so important to use HSB or HSL instead of hex codes (I'll use HSB in this walkthrough)

That sets us up for step 2 👇 Image
Read 17 tweets
Ridd 🤿 Profile picture
Jan 25
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 👇 Image
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...
Variants made it 10x easier to make components and swap between them.

So we made all the variants—literally every single possible combination 🤯

The larger the variant sets, the more painful they were to update, which led us to regret #1 👇 Image
Read 15 tweets
Ridd 🤿 Profile picture
Jan 4
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 👀 Image
1//

That way people can use your feedback prompts as a lens through which to view your demos.

This typically leads to higher-quality feedback once the floor opens for discussion 💪
Read 11 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

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

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(