Sam I am Designs 🫶 🇨🇦
@samiamdesigns.bsky.social
Freelance Design Systems Lead 🎨📐 Host @ Into Design Systems 👩🎨 Creative weirdo 🖤 🏡🎶 House music selectress 🌅 Sky chaser (She/Her)
Nature's ombre 🍁 My favourite time of year to wander my neighborhood and take in magic of color changing skyscapes and trees.
November 4, 2025 at 4:16 AM
Nature's ombre 🍁 My favourite time of year to wander my neighborhood and take in magic of color changing skyscapes and trees.
Reposted by Sam I am Designs 🫶 🇨🇦
We can also have a nice entry animation by adding the following code:
```
img {
transition: 1s 1s;
@starting-style {
offset: circle(0px) 0% 0deg;
}
}
```
Demo: codepen.io/t_afif/full/... via @codepen.io
```
img {
transition: 1s 1s;
@starting-style {
offset: circle(0px) 0% 0deg;
}
}
```
Demo: codepen.io/t_afif/full/... via @codepen.io
July 18, 2025 at 9:41 AM
We can also have a nice entry animation by adding the following code:
```
img {
transition: 1s 1s;
@starting-style {
offset: circle(0px) 0% 0deg;
}
}
```
Demo: codepen.io/t_afif/full/... via @codepen.io
```
img {
transition: 1s 1s;
@starting-style {
offset: circle(0px) 0% 0deg;
}
}
```
Demo: codepen.io/t_afif/full/... via @codepen.io
A systems thinking approach to Theming in design systems 🫶
How to scale theming in Figma without losing your mind 🤌
Working on Design Tokens or Theming?
You’ve probably seen the chaos that comes with scaling variables 🙈
At Into Design Systems Conference @samiamdesigns.bsky.social shared a powerful method to structure themes
substack.com/home/post/p-...
Working on Design Tokens or Theming?
You’ve probably seen the chaos that comes with scaling variables 🙈
At Into Design Systems Conference @samiamdesigns.bsky.social shared a powerful method to structure themes
substack.com/home/post/p-...
How to scale theming in Figma without losing your mind
What do you do when the message says: "We need light and dark mode across 5 brands… for web and mobile.
substack.com
July 16, 2025 at 7:48 PM
A systems thinking approach to Theming in design systems 🫶
Reposted by Sam I am Designs 🫶 🇨🇦
This is amazing: A reference manual for people who design and build software. Written and illustrated by Dan Hollick. www.makingsoftware.com
MAKING SOFTWARE
A reference manual for people who design and build software.
www.makingsoftware.com
July 16, 2025 at 1:37 AM
This is amazing: A reference manual for people who design and build software. Written and illustrated by Dan Hollick. www.makingsoftware.com
Today, Anthropic made my dreams come true. MCP between Claude and Airtable is a GAME CHANGER! 🤖
I'm OVER using token management tools for reasons best discussed over a strong coffee or a negroni. My motivation is going to be for your benefit very soon. 🚀
I'm OVER using token management tools for reasons best discussed over a strong coffee or a negroni. My motivation is going to be for your benefit very soon. 🚀
July 14, 2025 at 11:51 PM
Today, Anthropic made my dreams come true. MCP between Claude and Airtable is a GAME CHANGER! 🤖
I'm OVER using token management tools for reasons best discussed over a strong coffee or a negroni. My motivation is going to be for your benefit very soon. 🚀
I'm OVER using token management tools for reasons best discussed over a strong coffee or a negroni. My motivation is going to be for your benefit very soon. 🚀
Today I discovered that Claude allows you to select a section of it's output and ask for clarification based on the selected part. 🤯 Up until today I've been describing these things in the chat (left side) only. 🙈 This is going to make things work sooo much faster!
July 12, 2025 at 1:17 PM
Today I discovered that Claude allows you to select a section of it's output and ask for clarification based on the selected part. 🤯 Up until today I've been describing these things in the chat (left side) only. 🙈 This is going to make things work sooo much faster!
Reposted by Sam I am Designs 🫶 🇨🇦
We ran a randomized controlled trial to see how much AI coding tools speed up experienced open-source developers.
The results surprised us: Developers thought they were 20% faster with AI tools, but they were actually 19% slower when they had access to AI than when they didn't.
The results surprised us: Developers thought they were 20% faster with AI tools, but they were actually 19% slower when they had access to AI than when they didn't.
July 10, 2025 at 7:47 PM
We ran a randomized controlled trial to see how much AI coding tools speed up experienced open-source developers.
The results surprised us: Developers thought they were 20% faster with AI tools, but they were actually 19% slower when they had access to AI than when they didn't.
The results surprised us: Developers thought they were 20% faster with AI tools, but they were actually 19% slower when they had access to AI than when they didn't.
I've got Claude trained up on my design token architecture and naming templates. Yesterday, it was creating tokens from open-source code files. 🤖 We are still struggling with referencing other tokens and using math, but I'm sure that's a prompting issue on my part. 🤯 Wild times
July 3, 2025 at 1:31 PM
I've got Claude trained up on my design token architecture and naming templates. Yesterday, it was creating tokens from open-source code files. 🤖 We are still struggling with referencing other tokens and using math, but I'm sure that's a prompting issue on my part. 🤯 Wild times
Reposted by Sam I am Designs 🫶 🇨🇦
Figma going public means new industry tooling coming because they will slow down, focus on 1/4 by 1/4 numbers before eventually being swallowed by a PE firm or sold for little to Adobe who will rename it.
Be on your toes design folk. Now is the time to try everything and use what works.
Be on your toes design folk. Now is the time to try everything and use what works.
July 2, 2025 at 1:07 PM
Figma going public means new industry tooling coming because they will slow down, focus on 1/4 by 1/4 numbers before eventually being swallowed by a PE firm or sold for little to Adobe who will rename it.
Be on your toes design folk. Now is the time to try everything and use what works.
Be on your toes design folk. Now is the time to try everything and use what works.
TIL I was mentioned in this article by these LEGENDS in the development community 🤯 Why? Turns out my simplified approach to describing a three-tier token structure as 1-options 2-decisions 3-components is considered their preferred way of teaching these concepts. 🥹
NEW POST
Design tokens are fundamental design decisions represented as data. Andreas Kutschmann explains how they work and how to organize them to balance scalability, maintainability and developer experience.
martinfowler.com/articles/des...
Design tokens are fundamental design decisions represented as data. Andreas Kutschmann explains how they work and how to organize them to balance scalability, maintainability and developer experience.
martinfowler.com/articles/des...
Design Token-Based UI Architecture
Describing established patterns for organizing design tokens and practical approaches for automation
martinfowler.com
July 2, 2025 at 4:29 PM
TIL I was mentioned in this article by these LEGENDS in the development community 🤯 Why? Turns out my simplified approach to describing a three-tier token structure as 1-options 2-decisions 3-components is considered their preferred way of teaching these concepts. 🥹
Reposted by Sam I am Designs 🫶 🇨🇦
SmashingConf is coming to Amsterdam! 🇳🇱
Join us April 13–16, 2026, for a brand-new conference on design systems, CSS, AI, UX & more — made for designers & UI engineers who love the web.
Views, vibes, and gezelligheid included. 💙
Early Bird tickets are available now! smashingconf.com/amsterdam-2026
Join us April 13–16, 2026, for a brand-new conference on design systems, CSS, AI, UX & more — made for designers & UI engineers who love the web.
Views, vibes, and gezelligheid included. 💙
Early Bird tickets are available now! smashingconf.com/amsterdam-2026
A Smashing Conference on UX and Web Design. April 13–16, 2026. Conference and workshops for web designers, design engineers and UX professionals. — SmashingConf Amsterdam
Join us April 2026 in Amsterdam for our friendly and inclusive conference for UX designers, web designers and design engineers. Boost your web design and development skills, the smashing way.
smashingconf.com
June 23, 2025 at 2:56 PM
SmashingConf is coming to Amsterdam! 🇳🇱
Join us April 13–16, 2026, for a brand-new conference on design systems, CSS, AI, UX & more — made for designers & UI engineers who love the web.
Views, vibes, and gezelligheid included. 💙
Early Bird tickets are available now! smashingconf.com/amsterdam-2026
Join us April 13–16, 2026, for a brand-new conference on design systems, CSS, AI, UX & more — made for designers & UI engineers who love the web.
Views, vibes, and gezelligheid included. 💙
Early Bird tickets are available now! smashingconf.com/amsterdam-2026
TIL if you mute a channel in Slack, you only see the BOLD channel name (signal to check what's new) if you are @ mentioned. 🤯 As someone trying to limit notifications, this is a game changer! #ADHDdesigner
June 23, 2025 at 2:56 PM
TIL if you mute a channel in Slack, you only see the BOLD channel name (signal to check what's new) if you are @ mentioned. 🤯 As someone trying to limit notifications, this is a game changer! #ADHDdesigner
Reposted by Sam I am Designs 🫶 🇨🇦
Based on a conversation yesterday about custom events, I was playing around with strongly typing events for #WebComponents and decided to do a little write-up on it.
#html #javascript
dev.to/stuffbreaker...
#html #javascript
dev.to/stuffbreaker...
Creating Strongly Typed Events for Web Components
Learn how to implement strongly typed custom events in web components with TypeScript. Eliminate type assertions, improve developer experience, and maintain type safety across frameworks like React, V...
dev.to
June 19, 2025 at 12:24 PM
Based on a conversation yesterday about custom events, I was playing around with strongly typing events for #WebComponents and decided to do a little write-up on it.
#html #javascript
dev.to/stuffbreaker...
#html #javascript
dev.to/stuffbreaker...
The best part of ADHD time blindness is when you find a time stamp for a thing you could have sworn you *just* did.
Last time I did a hard backup of my computer files 🫣
In my mind = a few months ago.
Timestamp = Feb 2023
I only design, write, make video content and DJ for a living...🤦♀️
Last time I did a hard backup of my computer files 🫣
In my mind = a few months ago.
Timestamp = Feb 2023
I only design, write, make video content and DJ for a living...🤦♀️
a drag queen with orange hair and red lips
Alt: a drag queen with orange hair and red lips makes a facial expression that communicates a mistake or oops sentiment.
media.tenor.com
June 18, 2025 at 2:37 PM
The best part of ADHD time blindness is when you find a time stamp for a thing you could have sworn you *just* did.
Last time I did a hard backup of my computer files 🫣
In my mind = a few months ago.
Timestamp = Feb 2023
I only design, write, make video content and DJ for a living...🤦♀️
Last time I did a hard backup of my computer files 🫣
In my mind = a few months ago.
Timestamp = Feb 2023
I only design, write, make video content and DJ for a living...🤦♀️
Reposted by Sam I am Designs 🫶 🇨🇦
Now we have text-box in CSS, understanding font metrics is even more important so you know what you’re trimming. This is a very handy little website that allows you to upload a font that you plan on using, along with a Google font picker.
vertical-metrics.netlify.app
vertical-metrics.netlify.app
Vertical Metrics
Testing vertical metrics typography across browsers.
vertical-metrics.netlify.app
June 17, 2025 at 1:03 PM
Now we have text-box in CSS, understanding font metrics is even more important so you know what you’re trimming. This is a very handy little website that allows you to upload a font that you plan on using, along with a Google font picker.
vertical-metrics.netlify.app
vertical-metrics.netlify.app
Reposted by Sam I am Designs 🫶 🇨🇦
Releasing Theemo v1.0
the end-to-end design token workflow tool:
✨ Generates Modern CSS: @property, light-dark() and color functions
✨ Integrations with @vite.dev, @emberjs.com, @svelte.dev and @vuejs.org
➡️ theemo.io
Release posts (!) in the thread.
the end-to-end design token workflow tool:
✨ Generates Modern CSS: @property, light-dark() and color functions
✨ Integrations with @vite.dev, @emberjs.com, @svelte.dev and @vuejs.org
➡️ theemo.io
Release posts (!) in the thread.
June 12, 2025 at 2:07 PM
Releasing Theemo v1.0
the end-to-end design token workflow tool:
✨ Generates Modern CSS: @property, light-dark() and color functions
✨ Integrations with @vite.dev, @emberjs.com, @svelte.dev and @vuejs.org
➡️ theemo.io
Release posts (!) in the thread.
the end-to-end design token workflow tool:
✨ Generates Modern CSS: @property, light-dark() and color functions
✨ Integrations with @vite.dev, @emberjs.com, @svelte.dev and @vuejs.org
➡️ theemo.io
Release posts (!) in the thread.
Blocking political bot followers on Blue sky is the new unsubscribe from marketing emails... 🙄 To whichever bot ring added me to your list, you should know I'm a zero inbox kinda person so it's not worth your time... As my niece would say, "You're done" 🤖
June 12, 2025 at 6:49 PM
Blocking political bot followers on Blue sky is the new unsubscribe from marketing emails... 🙄 To whichever bot ring added me to your list, you should know I'm a zero inbox kinda person so it's not worth your time... As my niece would say, "You're done" 🤖
I'm not a sports-ball kind of person but I'm sharing this infographic because I think it's a brilliant display of data I haven't seen before. 😻
🌈 🏒 🎀 Day 0
2024-2025 Playoffs. This thread updates every day.
Cup final in the centre, each rectangle shows the chance of winning each round.
2024-2025 Playoffs. This thread updates every day.
Cup final in the centre, each rectangle shows the chance of winning each round.
June 6, 2025 at 10:43 PM
I'm not a sports-ball kind of person but I'm sharing this infographic because I think it's a brilliant display of data I haven't seen before. 😻
Anyone else really over fighting with instance swap issues in their component libraries? I recorded my wack-a-mole workflow in hopes it helps someone else. If you've got tips, I'm all ears!
youtu.be/RaBCdduRp7Y
youtu.be/RaBCdduRp7Y
Troubleshoot Figma Component Instance Swap Issues with Tokens Studio
If you are working in design systems in Figma using Tokens Studio and running into issues where swapping instances isn't working, you are not alone! I'm expe...
www.youtube.com
June 4, 2025 at 10:07 PM
Anyone else really over fighting with instance swap issues in their component libraries? I recorded my wack-a-mole workflow in hopes it helps someone else. If you've got tips, I'm all ears!
youtu.be/RaBCdduRp7Y
youtu.be/RaBCdduRp7Y
Coming home this week from Europe on the first day of Pride month had me beaming with pride to be a Canadian 🇨🇦 🌈
📸 YYZ - Terminal 1 Baggage Claim
📸 YYZ - Terminal 1 Baggage Claim
June 3, 2025 at 3:55 PM
Coming home this week from Europe on the first day of Pride month had me beaming with pride to be a Canadian 🇨🇦 🌈
📸 YYZ - Terminal 1 Baggage Claim
📸 YYZ - Terminal 1 Baggage Claim
Reposted by Sam I am Designs 🫶 🇨🇦
The great migration to @penpot.app is underway... And I'm here for it.
I have some general annoyances with Figma that I've just lived with for a bit, but this has convinced me to move over to @penpot.app instead.
I've sort of wanted to for awhile anyway, but lacked the motivation to actually do it... until now.
I've sort of wanted to for awhile anyway, but lacked the motivation to actually do it... until now.
During my livestream yesterday, I talked about Figma Sites for a little bit. I've broken it off into a short, stand-alone video.
I don't normally like bashing a company, but when a company of Figma's size makes a product this bad, I think it's important to call them out on it.
youtu.be/ZsFIvULxkHI
I don't normally like bashing a company, but when a company of Figma's size makes a product this bad, I think it's important to call them out on it.
youtu.be/ZsFIvULxkHI
May 9, 2025 at 11:23 PM
The great migration to @penpot.app is underway... And I'm here for it.
Reposted by Sam I am Designs 🫶 🇨🇦
Just discovered penpot.app holy crap this is exactly the local self hostable OSS Figma replacement I’ve been looking for!
Penpot: The Design Tool for Design & Code Collaboration
Penpot is the open-source free design software that connects designers and developers with no handoff drama. Prototyping, UI design and code - all in one app.
penpot.app
May 9, 2025 at 8:13 PM
Just discovered penpot.app holy crap this is exactly the local self hostable OSS Figma replacement I’ve been looking for!
Opened my laptop to see this surprise on the same day that WTF Figma Month starts on my calendar. Any predictions on how the rest of my day is going to go? 🙃 In all seriousness, stoked to be watching the Config keynote from home and excited to see what's new!
May 7, 2025 at 2:14 PM
Opened my laptop to see this surprise on the same day that WTF Figma Month starts on my calendar. Any predictions on how the rest of my day is going to go? 🙃 In all seriousness, stoked to be watching the Config keynote from home and excited to see what's new!
This resource though!! 😻 And I'm not just saying that because I can see my face in this beautiful chaos of Design Systems gold 😂
Update time! Fresh batch of videos added to DesignSystems.media, closing in on 700 🔥
And a big thank you to @zeroheight.com for sponsoring us! Go check it out here zeroheight.com 🙌
And a big thank you to @zeroheight.com for sponsoring us! Go check it out here zeroheight.com 🙌
May 7, 2025 at 12:59 PM
This resource though!! 😻 And I'm not just saying that because I can see my face in this beautiful chaos of Design Systems gold 😂