Discover and read the best of Twitter Threads about #designsystems

Most recents (16)

1. Google

Design and build beautiful, usable products with Material 3

m3.material.io"
2. Apple

The Human Interface Guidelines contains guidance and best practices that can help you design a great experience for any Apple platform

developer.apple.com/design/human-i…
Read 12 tweets
My post impressions from 2022:

Twitter: 6,824,000

LinkedIn: 2,292,897

I wonder how much this will shift in 2023 from to the combination of my post frequency, Twitter leadership change, and LinkedIn algorithm changes 🤔 👀

Here are my top 3 tweets/threads from 2022 🧵:
#3: My top tip about #designsystems (and design, and work, and life): do less.
#2: My daughter noticed a correlation between the pattern on a basketball and on a basketball court. Coincidence or design?
Read 5 tweets
What is a #designsystem? You’ve probably heard lots about them. You may have even worked on one, but you still struggle to define it.

Here’s how I talk about #designsystems to anyone who will listen: 🧵
There are many great design system books out there. Let’s see what their authors have to say about design systems:
“A design system is a set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.” — @craftui, Design Systems Design Systems, by Alla Kho...
Read 15 tweets
One of the biggest pain points for #designsystem teams is naming (components, patterns, tokens… anything).

Here are my most useful tips for naming design system things (part 1).

🧵
A few years ago, I was lucky enough to help @RFERL with their design system. They had—and still have to this day—this component all over the site. What would you call this? A carousel? A banner? A slider?

Wanna know what they called it?
They called it “Fred.”

Seriously.

Look at the source code. The element is called <div class="fredContent">. HTML showing an element wit...
Read 9 tweets
I’ve worked with #designsystem teams at companies like Amazon, Netflix, Google, and more. The most common blocker about #designsystems I hear from them is, “I never really looked at it that way.”

My biggest tip for reframing #designsystem work to make it more approachable:

🧵
Do less.

Almost every team I work with tries to make their design system do everything. They stress themselves out, trying to tackle too much and end up accomplishing nothing.

Pick a handful of things, and do them really well.
Many mature #designsystem teams I talk to have one thing in common: they’re REMOVING components from their design system. They’ve realized they can’t support everything, so they’re trimming down to just the things they know they can fully support.
Read 4 tweets
Warren Buffet once famously quipped, “Risk comes from not knowing what you’re doing.” If improving your #designsystem is one of your goals for 2023, make sure lack of knowledge isn’t one of your blockers.

A new resource for you in this thread 🧵 Phone showing design system...
There are so many resources out there now for learning more about #designsystems! A wealth of public information is great, but it often comes with analysis paralysis. Where do you start? How do you separate the signal from the noise?
I’ve been working on a simple resource to help with this. I’m launching my Design System Advent Calendar today, my own customized lesson plan of 24 valuable and short lessons to help improve your knowledge of #designsystems.
Read 5 tweets
UX design systems & guidelines you have to take a look at 👇💫

Add your favorite below

#uxdesign #design #designsystems #productdesign #UIUXDesigner
1. Atlassian Design @Atlassian
atlassian.design Image
2. Carbon Design System @ibmdesign
carbondesignsystem.com Image
Read 9 tweets
The Ultimate Design Systems Resources List
designstrategy.guide/design-managem…

*Some insights for the most clicked links >

#designsystem #designsystems #designtokens Image
THE MOST POPULAR PLUGINS:*

Figma Tokens for managing design tokens by @six7 and @EstherCheran

figmatokens.com
THE MOST POPULAR TOOLS FOR COLORS:*

Farbvelo by @meodai generates colors, palettes; awesome color inspiration
farbvelo.elastiq.ch

and

Supa-palette
supa-palette.com
@angeloldesigns
Read 6 tweets
🧵Thought I'd post just a quick round-up thread of a few recent #designsystems articles I've written in the last few months. (1/6)
🥾In the early stages of design systems, you probably don't have a lot of budget or people, so you bootstrap where you can. Here I talk about how we audited the health of our system manually. (2/6)
medium.com/onfido-tech/au…
📊 After the initial build phase of a design system, getting adoption is the next big hurdle. We automated a lot of our metrics here, and I talk about that process in this piece. (3/6)
uxdesign.cc/how-to-measure…
Read 6 tweets
Para crear una librería de components en #reactjs siempre te recomiendan:

1. Empezar de cero 🤢
2. Usar una librería y cambiar los estilos 😢

Hay una tercera y MEJOR opción:

✨ Componentes primitivos ✨

❤️ ¿Me ayudas con un RT?

🧵 HILO
Los components primitivos son accesibles y sin estilo para construir #DesignSystems y #webapps de alta calidad.

Proporcionan todas las bases necesarias para que desarrolles tus propios components con el diseño que quieras rápidamente.

Empieza lista...
Reach UI busca convertirse en la base accesible de tu #DesignSystem basado en React.

reach.tech
Read 8 tweets
We are currently working on 5 #DesignSystems simultaneously. This wouldn’t be possible without #FigmaTokens by @six7 In addition we built a headless Design System to copy paste basic components in #Figma 👌🏻 Reduced client work: 3 months -> 1 month. Clients safe 75% time 🚀
What still takes a lot of time:
- UI Inventory
- check all the stuff clients have
- back and forth to refine UI Design
- Documentation ☠️
- Teach people #Figma especially Autolayout 😬
- The client to decide on a Figma plan
- structure & workflow in #Figma
- #DesignTokens naming conventions Figma vs development sync
- The client to understand that a Figma library is not really a Design System
- everything related to Design system management e.g Roadmap, governance and why you need this ☠️
Read 4 tweets
I've got my ☕ and it's a beautiful morning. Let's talk about how to actually hire the first two engineers for your #designsystems team.
As a reminder, the two types of engineers I'd hire are:

1. A senior frontend engineer who has focused on design systems before
2. A senior frontend infrastructure engineer
Type 1 is probably slightly easier to hire than Type 2, so let's start with that this morning.

If I were to write a job description for the role, I would emphasize the following skills/experience:
Read 19 tweets
Yesterday, I tweeted about the two first eng hires I would make if I were starting a new #designsystems team.

Today, I want to dive deeper into the type of work each of those engineers does, and how to discover what kind of eng you're talking to in an interview.
The two types of engineers are:

1. A senior engineer who specializes in CSS, component architecture, and design tokens.

2. A senior "frontend infrastructure" engineer, who specializes in versioning and publishing, bundlers, and automation.
Let's talk about engineer type 1 first. This is the engineer people think of they hear "design systems". And for good reason, because having this person on your team is invaluable. I've got a list of questions that this person can answer for your team.
Read 12 tweets
Years of experiences and learnings packaged into a 50 minute talk by @danmall at #uxplus2020 on “Design System Pitfalls & How to Avoid Them”.

Rather than just tweeting out the transcripts, here‘s a 🧵 of my takeaways and semi-raw thoughts on the talk.

#designsystems
@danmall started the talk with a great storytelling — the tale of Prometheus gave fire as a tool to mortals and how civilizations expanded as the result of that.

The takeaway here (for me) is a story is a good way to get audiences to get excited and immersed into a talk
I‘m just looking at my notes here so forgive me if I miss few details but what stands out next was when Dan shared about this survey asking “For the question [“Show me your design system“] what‘s the first thing you‘d pull up?”
Read 35 tweets
Localized avatars to be more representative of the end user in each country. So cool @MinaMarkham #clarity2019 #localization #designsystems
. @MinaMarkham on her process for localizing styles for @SlackHQ in Japan:
1. Design research
2. First iteration of designing the webpage
3. Design with cultural elements
4. Hide animation unless you have JavaScript enabled in browser
Note: localize w/ extreme care #clarity2019
It's important to localize styles with extreme care, respect and cultural appreciation (not cultural appropriation).
@MinaMarkham
#clarity2019 #designsystems #localization #culturalappropriation
Read 4 tweets
Now that Adobe is creating clusters of app chunked from Desktop Softwares, it's even more important to distinguish between, Instrument, Apparatus, Tool, Equipment, Device and Appliance from Product Management's view point. #app #Software #productmanagement #UX #productdesign Image
#Semantics are very important for #Discoverability by the user in the marketplace and Market Positioning of Software Products by the company. It have a great role in defining the Product Vision. It's the right words that shapes the right reasoning, that streamline
the perspective, that streamline the #strategy and so on. #Software #industries have borrowed a lot of terminologies from traditional #domains. Semantics also attract or distract a lot of regulatory bodies like the word "cookies". Who cares about #cookies unless you
Read 7 tweets

Related hashtags

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.00/month or $30.00/year) and get exclusive features!

Become Premium

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

Donate via Paypal Become our Patreon

Thank you for your support!