#Development #Tools
CSS Design Tokens Analyzer · Uncover design tokens from your stylesheet https://ilo.im/1652ji
_____
#DesignTokens #DesignSystems #Webpage #Design #WebDesign #WebDev #Frontend #CSS
#Development #Tools
CSS Design Tokens Analyzer · Uncover design tokens from your stylesheet https://ilo.im/1652ji
_____
#DesignTokens #DesignSystems #Webpage #Design #WebDesign #WebDev #Frontend #CSS
Created some tests for web components that retrieve a required design token value and check if the rendered elements have the equivalent computed value. For example, if the element is showing the correct values for a focus ring.
design like it's 1997. code like it's 2025.
Figma Variables and Design Tokens—Variable Architecture, by @lurkmoophy (@zeroheight):
https://zeroheight.com/blog/figma-variables-and-design-tokens-part-one-variable-architecture/
Practical UI Design with tokens | Penpot Hands-On Demo
https://peertube.kaleidos.net/videos/watch/9a714b33-2bd4-4a95-8930-2646ab6343c0
This Week in Design Systems News!
Explore articles on design tokens, localisation, planning, and content. Check out resources from Penpot and Circle UI
Stay up–to–date: https://news.design.systems
#DesignSystems #FrontEnd #WebDesign #DesignOps #DesignTokens
I've almost got an issue of the Design Systems Newsletter without a single link to medium. Almost.
If you want a weekly slice of the best curated Design Systems resources - be sure to sign up - https://news.design.systems
#DesignSystems #DesignTokens #FrontEnd #WebDesign #WebDev
Had to tackle a couple of niche, tricky things for our #DesignSystem at work recently. Would like to blog about them and the solutions we found.
Help me prioritise. Which one(s) would you be most interested in?
What's new | Penpot release 2.7 - Design Tokens enhancements and more
https://peertube.kaleidos.net/videos/watch/05f64309-0375-4059-a980-02fe16349999
Tokens Studio est un outil de gestion de design tokens qui permet de centraliser et de synchroniser les décisions de design entre les designers et les développeurs, notamment via Figma.
Il facilite la cohérence visuelle à l’échelle des projets et des équipes.
Une solution particulièrement utile pour les équipes qui travaillent sur des design systems à grande échelle ou des plateformes multisites !
Need help with your design system?
Struggling with design tokens?
Looking for a front-end developer?
Let’s tackle it together!
www.alwaystwisted.com
#Design #Launches
Design Tokens Name Generator · Design token naming conventions for your design system https://ilo.im/163l9d
_____
#Generator #Naming #DesignTokens #DesignSystems #Development #WebDev #Frontend
Need a quick start to creating some design tokens with a ready-made naming convention?
Romina has made this pretty neat tool:
https://namedesigntokens.guide
Where do design tokens actually come from and why they matter in modern #webdevelopment
During our last #Frontend and Friends meetup, Nils Wiere, Freelance Design System Consultant) walked the audience through the evolution of #designtokens - Watch the recording on our YouTube channel to see the full session: https://youtu.be/uMb4M7VCRCE?si=5tqcd94i0Dx2Aq7K
London pals! Come hang out with me and cool Penpot folks in SE1 on the 13th of May.
We’ll be discussing all things design tokens and collaboration in a fab venue with lovely food and drinks.
And it’s free! Limited spots available:
https://app.hi.events/event/370/penpot-after-hours-london
(Non-Londoners also very welcome )
Design Tokens Themes | Penpot 2.6
https://peertube.kaleidos.net/videos/watch/516f0695-d288-45e5-bd34-fb752bf21f8f
Importing & Exporting Tokens (JSON) | Penpot 2.6
https://peertube.kaleidos.net/videos/watch/3849341e-62a8-4bc0-bc9c-5b2c88f21ef3
What are Design Tokens? | Penpot 2.6
https://peertube.kaleidos.net/videos/watch/63dce79f-b771-4337-8462-c61ac59b4d72
Creating Design Tokens | Penpot 2.6
https://peertube.kaleidos.net/videos/watch/5cee36d7-7f6b-4954-89c5-94f23c962bbe