Design Tactics #7 — How to communicate intent

Welcome to the 274 new readers (1702 total) 👋

The first step to start thinking like an engineer

There’s a reason that “Thinking in variables + objects” is the very first lesson in Figma Academy. It’s a mental model that lays the foundation for so much of our work (whether we realize it or not).

So if you want to learn more about establishing a language that you can use to collaborate with engineers and create frontend systems, this thread is for you 👇

Ridd 🏛 @ridd_design

Being able to think like a developer is a superpower for designers 💪 And this mental model is the perfect starting point👇

Communicating intent in our components and systems

Speaking of frontend systems… I wanted to pull back the curtain and give a (pretty raw) glimpse into how I’ll communicate the intent behind my components at Maven.

Because the more I collaborate with developers, the more I realize that my designs are less intuitive than I think. Just because I’m using a component from a different library doesn’t mean that others will be able to identify it correctly.

So if I’m strategically using components in a way that I think can benefit my engineering friends, I’ll create a quick Loom video to communicate that intent.

Here’s an example of a recent Loom I made to help developers minimize the sources of truth and establish parity between design and code 👇

`ProfileCard` and `StudentBio` components

Often times I will embed little explainer videos like this in my `Note` component at the beginning of a flow. I used to think this level of documentation was over the top, but I’m starting to view it as a core competency of being a product designer in a remote-first world.

It doesn’t always have to be a Loom video either…

Sometimes I’ll drop an unprompted message into Slack to over-communicate how I’m thinking about a certain component so that developers can plan around that strategy from the get-go.

This is super helpful especially if design and development are working in tandem. One of our jobs is to make sure that the efficiencies we’re establishing in Figma get translated into code so that everyone can benefit.

Example Slack conversation from April

The best way to create a color system from scratch

Sometimes I think that figuring out how to structure Figma Academy and break down complex topics taught me more than anyone else…

Establishing a color system is a great example of that.

This thread walks you through the process of creating a new system from scratch and over 10,000 people read the whole thing last week 🤯

Ridd 🏛 @ridd_design

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 👇

P.s. yesterday a Figma Academy student introduced me to my new favorite tool for color inspiration

Get promoted to companies like Notion, Paramount+, Mercury, and more...

Last month I released the first drop of the Designer Talent Network! It was a massive success and I’m so excited about the quality of the companies (we have everything from household names to top startups to the hottest Web3 projects).

If you’re curious about how it works, here’s a 1 min video 👇

Designer Talent Network

And then here’s the link to join the network (takes 30 sec) — Click HERE

Want to get to know me

I recently joined a couple of podcasts to share more about my journey, what it took to create Figma Academy, and

That’s all for today! Don’t forget… I’m always looking for ways to make this the most valuable design email that hits your inbox, so don’t hesitate to use the feedback buttons below or reply to this email to let me know what you think! I read and respond to each one :)