It's Live!
50+ resources on Variables and Advanced Prototyping!
🤯 twitter threads of pro-tips with link backs
👩💻 Free video tutorials
💡
@figma
community files for inspo and further learning
Documenting breakpoint design just got really nice! Build with the Breakpoint plug-in for
@figma
using the design system I'm building from scratch using
#FigmaTokens
plug-in. Only 1 token change between SM and LG viewports (and some CSS notes)! 😍
#designtokens
#responsivedesign
Today my
#designtokens
obsession became my dream job. 🤩 Super excited to be joining the Tokens Studio team (officially) to help the community better understand this powerful tech!
I'll still be sharing my non-tokens, nerdy designer pro-tips as per usual. 😜
Hey Designers 👋 Overwhelmed by all the new things that were just released? It's ok. Me too. And I didn't even watch all the talks yet.
It's ok to take your time and learn the new things one at a time, your brain will actually thank you for it.
#adhddesigner
Here's a
@figma
variables pro tip for "numbers" 👀 Use the EDIT menu to select which dimension properties your number variables can be applied.
In this example, I am using the
@tailwindcss
dimension token via
#tokensstudio
to power my variables and applying through Figma.
Tokens and variables friends 👀 I'm creating a list of alternate names for the positions in token/variable hierarchy.
What do you call yours?
Top level
- global
- primitive
Mid
- Semantic
Lowest
- Component
Turns out ya'll have a LOT to say about
@figma
Variables! 🤓 I'm at the stage in my research where I'm compiling resources to add to this community file. So if you came across any gems lately, please drop them below ⬇️
Aiming to share End of Week 🥰
1 component library, 5 brands, each with light and dark mode, switching via variants only in Figma, powered by
#tokensstudio
and synced to github under the hood.
Multidimensional theming is possible WITHOUT AN ORG PLAN. 🤯
This is 4 days of stubborn Sam I am on a mission
Designers 🎨 Let's talk Variables!
Where are you stuck? What is confusing? What delights have you discovered? What use cases are you excited about? What workflow hacks can you share?
I'm putting something together to share with the community (:
👀 Min/Max Sizing Tokens Are HERE! 🤩 How much effort does it change to swap your sizing tokens to the new type?
Just a couple clicks and less than 1 min...
#tokensstudio
Watch me refactor the CTA buttons from my "dusk mode" personal design system library.
Exploring design system documentation this morning. 💡
I created a utility component that allows you to quickly map out design decisions.
Ideally, you create your primitive ramps, then duplicate when a decision is made and tweak with a new name.
4/5 Even more information on components!
…but wait there’s more! You can also compare detached components to their main component to see exactly what’s changed.
Unpopular opinion: finding it hard to find work as a designer or in design systems? Specialize in something no one loves to do, like documentation. I'd hire someone to take over all my doc tasks because its kind of a black hole for me.
Remember that time I asked a silly question about what y'all name the tiers of your token hierarchy? 🙈
Seeing as it was such a hot topic, I thought I should share what I found.
Token Structure - Alternate Names Research by SamIam_Designs on
@figma
:
Curious about the difference between Figma Variables and Design Tokens? Confused about how
#TokensStudio
features map to Variables? 🫣 I was too!
👀I tried to break it down for ya'll.
#figmavariables
#designtokens
Sometimes the solution is simple. 👀
I also love that many people call out that no one cares about optical balance problems and sometimes we gotta just let that shit go and worry about other things... 🙋♀️
#teamgoodenough
@ridd_design
You could wrap your label in an auto layout with 4px padding, and use 8px padding on the button itself.
Should always add up with/without the icon.
Tokens Peeps 👀 Did you know all token types + names/IDs applied with
#tokensstudio
are visible from the inspect panel in DevMode, and you can copy them in a single click?
Documenting could get really fast, and handover is so much nicer!
#designtokens
It's getting close to being ready to share!😻
A sneak peak of a 100% tokenized community file of
@tailwindcss
primitives in
@TokensStudio
which powers Variables and Styles for dimensions, color, and typography in
@figma
@markacianfrani
has been testing in code for y'all 🙌
RE: Modes as a
#designteamofone
🤬
Note that
@figma
only supports 1 mode for Drafts, and 4 modes for Pro/Org plans. If you need more modes, you will have to upgrade to Enterprise.
Fun fact, you need. min 3 licences to upgrade to enterprise with Figma.
Cool... Cool... NOT!
Feeling the
@figma
🫶 today!
The first time I've won anything ✨
Thanks to
@disco_lu
for always being so generous with his time and left over Config swag.
Today's vibe recording a Token Structure 101 video for my
#tokensstudio
peeps. 🫠
If words like taxonomy, hierarchy, component tokens, or alias/semantics make you feel like you have no idea what you are doing, this one's for you!!
Is there anything more oddly satisfying than watching thousands of changes roll through a design file like a cascade? 😍 This is how I stress test the new builds from
#TokensStudio
🧐 According to the new node counter, I applied changes to 30k nodes in 40 seconds.
I've got a crazy idea to build a design system from 0-1 using tokens live/in public so people can follow along, ask questions etc. 🤔 Have you participated in such workshops? What worked well? What didn't you like? Any thoughts on this idea?
Using the
@figma
#masterplugin
just allowed to to wire up a 60 screen app prototype in under an hour... 🤯 Why have I never thought to do this before? Inspired by
@Ridderingand
@figmaacademy
tutorials on iterating static designs with master lead to this "how might I" moment
DS peeps 👀 Who has their documentation living in Figma, but a separate file away from their components?
I'm playing with the idea of docs as components where instances can be pulled next to components or linked.
WHY? Living docs for tokens = a LOT of extra nodes per file.
In prep for my
@intodsconf
talk, I've been publishing some of my personal templates as a Design Team of One to the
@figma
+
@airtable
communities to share! 👀
Up first - Design Ops Workbook
I know it's Friday, but.... 👀 BULK apply variables in
@figma
!!!! AND it doesn't even need to be from the same library. 🤯
I'll do a deep dive post on Monday, but check out my demo video, linked in the thread ⬇️
p.s. Its a FREE PLUG-IN 🤑
Been working on a thing with
@SamIam_Designs
👀
We called it Apply Variables, here's why you need it
🔄 Swaps out Styles with Variables of the same name (of a Collection of choice)
💫 Applies Variables to layer properties that have a matching value
@jsngr
Convince the person issuing the ask not to reinvent the wheel. Mapbox is a great way to have digital maps within the product that saves a ton of time and energy
I'm considering starting a youtube channel. I don't have an appetite for fancy editing or scripts.
My idea - Any time I get frustrated the stubborn Sam I am can't let it go until I solve it. I could quickly record the fix and share it.
Thoughts?
Are you trying to create "nice" documentation for your
#designtokens
? Do you have a lot of token sets?
Hot tip 🔥 Create an "other" token for the set name and set the value to = your set name. Then use
#documentationtokens
to populate.
⬇️ Why?
It's been a while since I shared a WIP ✏️ Introducing 🌛 Dusk Mode
My first project using tokens + variables.
🎨 It's super easy to create variable collections & modes using
#TokensStudio
.
😫 Anyone else frustrated working with color styles now that there are variables?
"If you can't communicate your idea on a piece of paper, it's too complex." - old boss ✏️
Thankful the pub had old printer paper to help this IPA fuelled planning session for my next piece of
#designtokens
content. 🍻
Any guesses on the topic?
I just used an AI Agent to scrape the Tailwind CSS docs to generate
#DesignTokens
for me and had them live in
#TokenStudio
tested they worked, and synced to my Github repo in less than 5 mins. 🤯🤖
This would have taken me 1 hr previously.
@CognosysAI
is a game-changer!
Shits getting real around here 😜
Here's hoping the trolls who comment "blood in my ears" are going to bleed out when they hear my voice with even more clarity on the upcoming videos I've got in the pipeline for
@TokensStudio
and my own YouTube channel 🎙️
PSA for designers 🫶 collect screenshots/quotes of positive feedback about you as a person and your skills as a designer. When you are facing your inner saboteur or having a low day, you can look at that for validation and a pick me up.
I'm loving all these intro to tokens articles that folks are writing, but why lock them behind a paywall or post on a members only platform? 🤷 If we are sharing in the spirit of open source knowledge transfer, why are we gate keeping? I want to fix this...
Tokens Peeps 👀 I Noticed a little quality of life improvement in Tokens Studio this am, then went and checked out this MONSTER changelog. 😻
Context on hover 🫶
🔔Join us for our debut hybrid meetup 🦄🌍, streamed live from
@volvocars
in Stockholm 🇸🇪!
👋🏻 Learn how Volvo Cars, Spotify, Atlassian are crafting their Design Systems & How Design Systems can be useful even for the smallest teams. 🚀
🔗Join us online 🧵👇🏻
Sprint 1 of building a Design Token driven, multi-brand design system. What have I learned so far this week?🤔
Big design systems have too many options. I inspected each component in the M3 and iOS 16 UI kits and found 15 different (but similar-looking) corner radius values.
🧵
Ever looked at us tokens studio folks with lots of sets and wondered, "how do they remember which set those tokens came from?" 🤔 We don't.... There's a handy reminder in the inspect feature. 😜
#tokensstudio
#designtokens
#designsystems
TIL I can double-click on the icon next to an item in my layers list (right-hand menu) and
@figma
will automagically bring me to that layer on my canvas... 🤯
I was trying to expand a collapsed item and stumbled across this...
Stoked to share that I've joined
@molly_hellmuth
as a TA in her latest cohort of Design Systems Bootcamp!
Helping folks starting on their design systems journey has already been super rewarding for me. 🫶
Shout out to my TA partner in crime and encouragement
@sochar__
😜
Looking for a video walkthrough on the new
@figma
autolayout wrap features to make some awesome responsive designs? 👀
This one by
@thefemijohn
is really well done and absolute-beginner friendly. 👌
Plus, his voice is soothing to listen to, IMO.
Well, I made it 3.5 months before
@LC_Finch
and
@six7
convinced me to use actual coding programs to collab with the
@TokensStudio
team. 🫠 My denial of "I'm a designer, I don't code" apparently ends today...
So what academia-ish title can I put in my portfolio? 😜 I'm excited to be joining the DSU community and hosting a study hall on VARIABLES!
I'm collecting feedback from ANYONE to create something I can share with EVERYONE after study hall but here's why you should join DSU ⬇️
Wanna learn how to use
@figma
’s new Variables functionality? We’re holding our next monthly Study Hall, an open working session for everyone to level up together! This one’s gonna be facilitated by the spectacular
@SamIam_Designs
!
#designsystems
#dsu
#dsustudyhall
Thank you to
@zeroheight
for recognizing us in the "Best Plugin" category at tonights Design Systems Awards 🏆 All the plugins nominated are worth checking out! 👀⬇️
@six7
and
@LC_Finch
were captured by our friends
@intodsconf
accepting the award🤩
If you were looking at the portfolio for someone with a niche in design systems/design tokens, what would you want to see?
#designsystems
#designtokens
@joenatoli
"Here's a fully mocked up version on PowerPoint, a user flow diagram, and the copy. Please make it look good and have good UX but don't change much."- PM
How long does it take to create an explainer video for design tokens?
This is 1/3 of the assets for the Tokens Structure 101 video I'm working on for
@TokensStudio
Storytelling, analogies, translating dev-speak, and zero references = months of touch-and-go work.
I love seeing how folks communicate abstract concepts visually. Learning to draw is something I'm slowly chipping away at, so this entire thread is just 🤤🤯
This year, I was fortunate to join the leadership team to shape our new design system—a milestone for any talented design org in hypergrowth.
My love letter, in a thread: 7 ideas about design systems that have impressed me the most 🫠
1. Design systems are everybody’s business.
@joshuapekera
Design leads and mentors - reminder to teach others that renaming each layer should become a habitual part of your flow.
Yes, there are exceptions. But if you want to be a part of big things, it's important to do things properly to make it easier for everyone to collab.
Design twitter 🎨 You are tasked with introducing a design system to help unify a product with 10+ unique tools under its umbrella. What's your approach?
Popular ideas are:
🔨Tool by tool
💠Component based (all buttons)
But I'm curious on other ideas 💡
Oh well the documentation plugin from
@eightshapes
is wonderful 🪄
It generates inline docs for components on the canvas, saving *tonnes* of manual work
Here, I'm generating docs then copying into FigJam as a searchable canvas docs house 🏡
Hanging out with 600+ design systems friends online. 🙃 What do we talk about during the break?
🍕 Pizza toppings as tokens/variables
@intodsconf
is the most friendly online design systems community. Please join us next time!
I'm so proud to be among the incredible lineup at this year's
@intodsconf
confirmed live talks. 😻
I'll be representing the designers who don't have large teams to lean on. 🙌
Thank you,
@svorklab
for seeing something in me worth sharing with the awesome IDS community!
The wait is finally over!
The Future of Design Systems Conference 2023 is launching today!
@intodsconf
Absolutely proud of the massive line-up of
#DesignSystem
experts & pioneers🚀
Massive shoutout to our main sponsor: Tokens Studio🙌🏻⚡️
🗓️June 8-9 Online
I'm coworking with a friend at a new cafe. I arrive and the cafe window is being painted...while I am revisiting the "paint store" analogy to explain token hierarchy and naming... 🤯
Signs from the universe I'm working on the right thing at the right time I suppose 🎨
Y'all think naming frames is controversial... Just wait until to cross into token naming. 😶🌫️ Once your token is built and in code, you can not change it.... 🤦♀️ This realization has drastically changed my approach to naming moving forward,and how I structure my tokens.
Every time I read a token naming article, my imposter syndrome kicks in and I can't finish reading it. Instead I chatted with my team and we came up with something that worked for us. If I didn't understand it and it wasn't intuitive to me, it wasn't going to work. Period. ⬇️👀
#DesignSystems
Hot Take 🌶️
All these “token naming” articles are wrong. You need to look at your system and rationally develop your own *taxonomy system*, then use that to name your tokens.
Why?…
Got the stamp of approval from
@KGronboldt
during the "dry run" of my
@intodsconf
talk this am 🫶
Here's a sneak 👀 of some of my Pro Tips from a Design Team of One.
Featuring some practical tips on how to feel less alone + explain what you do to others 🎨
Soon soon! The content is going to mention some tokens stuff but as I put it together I realized I have a ton of tips to share whether you are using tokens or not (:
Drum roll, please! 🥁
Super excited to reveal that Samantha Gordashko
@SamIam_Designs
will have a talk: Design Tokens Pro Tips from a Design Team of One 👏
Get ready to soak up some firsthand tips about design tokens. 🙌
Stay tuned. 💥
#designtokens
Yesterday was my last day at my previous full time job! Looking forward to what's next. 🙌 I'm open to freelance and consulting for all things design + tokens 🎨
Quit your current job if you're not:
1. Earning
2. Learning
This is especially true for creatives.
Who tend to be undervalued.
And focus more on the work itself.
Rather than how it's being sold.
Earn or learn!
I'm super excited to be joining
@molly_hellmuth
as her TA for the next cohort of Design Systems Bootcamp with
@joindiveclub
🤿 starting this Monday Jan 8th.
My network gets $100 off using SAM100 at checkout 🤑
The MAGIC 🪄 When you apply variables to frames in
@figma
using the native properties panel that are synced with
#designtokens
via
#tokensstudio
, the tokens are also applied!
I've got 1 ticket to GIFT to a Design Team of One who wasn't able to get budget to attend the
@intodsconf
next week! 🫶
Enter the random draw:
🤔 Tell me what you hope to get from my talk + why you want to attend ⬇️/RT/DM
Monday, I'll share who won. 🥳 Please spread the word!
Drum roll, please! 🥁
Super excited to reveal that Samantha Gordashko
@SamIam_Designs
will have a talk: Design Tokens Pro Tips from a Design Team of One 👏
Get ready to soak up some firsthand tips about design tokens. 🙌
Stay tuned. 💥
#designtokens
📣 Thrilled to announce
@debstination
Lead Product Designer
@Atlassian
#DesignSystem
as a speaker at our upcoming meetup! 🚀🎨
The future of UI Foundations at Atlassian - 🟢LIVE with
@debstination
Join us live from Stockholm 🇸🇪
👋🏻Sign-up! Limited Spots:
Tokens peeps 👀Are you using component specific tokens?
🫶 Yes - please tell me the benefits
🚧 Not yet - I'd love to know the reasons why
Feel free to DM me if you prefer.
I'm researching benefits & blockers for piece of content I'm working on about token structure
Me "I'm a designer, not a developer!"
Also Me ⬇️🙈
That's a lot of git activity! 100% via Token Studio.
This is just my personal repos because I need a safe space to create without being terrified of messing up developer code. When I'm ready, I duplicate the JSON in theirs.
Tokens friends👀 For those of you using component-specific tokens, when did you decide they were "right" for your project? What went into that decision?
P.S. I'm doing more research for open-source docs, so please share!
PSA - all design roadmaps from June 26 - Aug 1st are to be blacked out with 🤬🤷♀️ because no one knows how badly our workflows will be crushed due to
@figma
#config24
releases...
Save the Date for
#Config2024
June 26-27
San Francisco
Very early bird tickets get you 75% off and first dibs to save your (guaranteed) seat.
Register at
I've got a curiosity for a piece of content I'm working on for Tokens vs Variables with
#tokensstudio
🧐
I would love your anonymous feedback on these 3 questions if you've got a moment. 🫶
#tokenstuesday
🎨 is now a thing 😜
Talk 1 down and the
#TokensStudio
team did NOT disappoint. 🤯 You thought the tokens visualizer was insane, you have no idea whats coming next.....
@six7
@EstherCheran
@mikekamminga
+ team - WELL DONE! This is the future of design.
Ever had to wireframe a TABLE?🤬 > 🥳 using this kit!
It's 100% worth the $15 to buy back my time and reduce the cursing while working on early-stage projects.
Created for Designers in Figma by a Designer Advocate for Figma🫶
@megaroeny
knows his stuff + he's a gem of a human💎
📣 My
@figma
Wireframe Kit 2.0 is officially LIVE! 🎉
So excited to offer this to the community! It's been a labor of love, over many months, during challenging times in my life. It brought me much joy and inspiration when I got to work on it... 🧵 👇
Hey Design Systems peeps 👋 does anyone have an ADS case study the would be willing to share that I could use as inspo for my portfolio?
If you were hiring a DS person, what would you want to see? One project per foundations, component, template etc?
#designteamofone
Anyone who was curious about my
#tokensstudio
documentation vaguetweets earlier this week 👀
@nathanacurtis
has been working hard with some of us TS power users to ensure this feature is EVERYTHING we need it to be 👌
Getting excited yet anxious as the moment approaches (as soon as this weekend?) that launches the first paid feature of the Specs plugin: displaying applied Token Studio tokens.
How might I brain dump a year of token pro tips onto a single page to organize my
@intodsconf
talk outline?
75 "ah-ha" notes to myself from along the way + 10 pages of convo transcripts with other "design team of one" peeps.
✅Sketch talk flow
🔳IA in Airtable
🔳AI analysis
Testing an AI tool for converting my
@intodsconf
talk outline via GDocs to a slide template format... I'm impressed 😻
@MeetGamma
helping me prep for
@intodsconf
🫶
DS real talk. Are there design systems folks who don't test their components in product design before releasing them to consumers? 🤯 Every time I test a new component in a design, I realize at least 3 things I fucked up when creating it.
#designteamofoneconfessions
Today I learned I can apply a documentation token to multiple text frames at the same time... It only took me 4000+ tokens and 90% of a design system to "discover" this... 🤦♀️
#tokenstudio
#figmatokens
#designsystems
Anyone need a demo video?
#worksmartnothard
Where the "other" creative magic happens 🏡🎶
Everytime I step away from music and come back, I'm reminded how easily I find a flow state compared to my other creative passions.
P.s. I'm playing in Toronto on Sat! DM me if you wanna come dancing 💃🕺
I chose not to watch most config online so my ADHD brain would have a hope in hell of grasping all the new things. 🤯 So, design keeners...what should I watch first?
Watch the first episode where
@six7
and
@KrennMarco
are rebuilding the Tokens Studio DS using resolvers.
🧵Learn more about Generators & Resolvers in the thread below 👇
How's your 2024 planning coming along?
My career goal is to empower more designers to become token masters. And this is the high level plan on how I'm going to make it happen.
Good thing the
@TokensStudio
team trusts my process, which always starts on paper... 😹
Super excited to be a part of the hosting and planning team for the IDS conference this year! 🫶 What do you want to learn about? Do you have something you want to present? Let's chat!
Working on: the most practical hands-on online Design Systems Conference 2024
@intodsconf
@intodsconf
2024: hands-on, unique content, casual friendly & most adorable supportive community, introvert friendly networking. 🚀
A conference for DS Makers 🎨⚒️
Actual screenshots from the first 100% tokenized DS I built for a CICD pipeline project handed over to a designer who knew 0 about tokens and STILL has not had to use
@TokensStudio
to iterate or build. How? DIY pieces already tokenized in template files.
#designteamofone
And this is what that looks like.
Image 1: Our commonly used components
Image 2: Put into practice.
Outside of the Material Design calendar, this is all existing elements, getting reused because someone went through the effort of creating baseline components.