Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Guidelines" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Guidelines</span></a><br>Design systems need a color space · Ignoring color spaces is no longer an option <a href="https://ilo.im/162qtm" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/162qtm</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Color" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Color</span></a> <a href="https://mastodon.social/tags/ColorSpace" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorSpace</span></a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ProductDesign</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/VisualDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>VisualDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a></p>
mastodon.world is one of the many independent Mastodon servers you can use to participate in the fediverse.
Generic Mastodon server for anyone to use.
Administered by:
Server stats:
8.1Kactive users
mastodon.world: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.0
#designtoken
0 posts · 0 participants · 0 posts today
Lukas Oppermann<p><a href="https://mastodon.social/tags/designToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designToken</span></a> operations are not hear yet, but feel like an integral part of design tokens, without which they will not be sustainable in the long run. <span class="h-card" translate="no"><a href="https://social.design.systems/@donnie" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>donnie</span></a></span> has a neat writeup: <a href="https://buff.ly/3BsZ5nd" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">buff.ly/3BsZ5nd</span><span class="invisible"></span></a> </p><p>Personally, I gravitate to the simpler solution suggested in the w3c repo: <a href="https://buff.ly/4dmoOeg" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">buff.ly/4dmoOeg</span><span class="invisible"></span></a> as it makes it easier for tools to adopt quickly and covers most cases.</p>
Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Resources" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Resources</span></a><br>Design systems glossaries and primitive tokens · The ideas driving conversations about design systems <a href="https://ilo.im/160gmd" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/160gmd</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Glossary" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Glossary</span></a> <a href="https://mastodon.social/tags/Jargon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Jargon</span></a> <a href="https://mastodon.social/tags/Terminology" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Terminology</span></a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a></p>
Lukas Oppermann<p>Interesting post on <a href="https://mastodon.social/tags/decisionTrees" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>decisionTrees</span></a> for <a href="https://mastodon.social/tags/designSystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designSystems</span></a> <a href="https://mastodon.social/tags/components" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>components</span></a>: <a href="https://www.linkedin.com/pulse/decision-trees-ui-components-vitaly-friedman-chgae/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">linkedin.com/pulse/decision-tr</span><span class="invisible">ees-ui-components-vitaly-friedman-chgae/</span></a> </p><p>They are a great way of helping folks pick the right component or <a href="https://mastodon.social/tags/designToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designToken</span></a>.</p>
Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Proposals</span></a><br>Design token ugly mode · An approach to uncover hidden design flaws <a href="https://ilo.im/15zd8o" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/15zd8o</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Consistency" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Consistency</span></a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ProductDesign</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Framework</span></a> <a href="https://mastodon.social/tags/TechDebt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TechDebt</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Approaches</span></a><br>A structured approach to custom properties · How can we manage CSS variables effectively? <a href="https://ilo.im/15zcqz" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/15zcqz</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/CustomProperty" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CustomProperty</span></a> <a href="https://mastodon.social/tags/Typology" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typology</span></a> <a href="https://mastodon.social/tags/Naming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Naming</span></a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Approaches</span></a><br>Better know a design system: CSS frameworks! · “Arguably, CSS frameworks are design systems for the web.” <a href="https://ilo.im/15z72v" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/15z72v</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Framework</span></a> <a href="https://mastodon.social/tags/Tooling" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tooling</span></a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
James Nash<p>Our <a href="https://mstdn.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a>'s <a href="https://mstdn.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> pipeline has become more of a hydra...</p><p>Figma vars & styles<br> |<br>+-> DTCG file<br> |<br> +-> CSS custom properties<br> +-> CSS utility classes<br> +-> Storybook stories for util classes<br> +-> TS code<br> +-> TS interface</p><p>...and there's more to come: React Native components, docs, etc.</p><p>Also, longterm I want to make Figma an output from the DTCG file (or have some kind of 2 way sync), rather than it being the source.</p>
James Nash<p>I know it's been done a million times (incl. a few by my past self), but it still feels like magic when demoing a <a href="https://mstdn.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> pipeline.</p><p>In our case, the demo was:<br>- Static HTML, React & Angular web apps are all open in browser windows, displaying some of p<br>our <a href="https://mstdn.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> components<br>- An Android emulator running a React Native app, also using DS components, is open too.<br>- I open a Figma library, edit the color of a variable<br>...</p>
James Nash<p>Quite pleased with the <a href="https://mstdn.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> pipeline I've just cobbled together:</p><p>Figma vars ➡️ Tokens Brücke ➡️ DTCG file in a git repo ➡️ Cobalt UI (configured to output CSS vars) ➡️ PostCSS (with CSSNano) ➡️ CSS file</p><p>The hard part was that our source Figma lib has *multiple* modes AND I wanted the final output to only include semantic tier tokens (so all the brand-specific color ramps and whatnot are just internal implementation details of our theme). Had to make a custom Cobalt plugin for that.</p>
Lukas Oppermann<p>Very neat approach to <a href="https://mastodon.social/tags/designToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designToken</span></a> visualizations/annotations in <a href="https://mastodon.social/tags/figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>figma</span></a> by <span class="h-card" translate="no"><a href="https://mastodon.social/@Disco_lu" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Disco_lu</span></a></span> <a href="https://twitter.com/disco_lu/status/1615367950285901825" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">twitter.com/disco_lu/status/16</span><span class="invisible">15367950285901825</span></a>. Personally I feel it is a bit too much work, but what do you think? I guess if you have issues with hand-overs it may be worth it. 🤔</p>
Siwat<p>Has anyone succeeded in automating design tokens (system) from the designer to developers? I try Specificy but it can extract Figma token just first level in group? I am interested in Style-Dictionary but not sure it’s going to work. <a href="https://mstdn.social/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>react</span></a> <a href="https://mstdn.social/tags/designsystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystem</span></a> <a href="https://mstdn.social/tags/designtoken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designtoken</span></a></p>
James Nash<p>Thinking about <a href="https://mstdn.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignToken</span></a> documentation lately as we'll be doing a lot of that at work soon.</p><p>Have you seen any great examples? What about them stands out to you?</p><p>Beyond the obvious listing tokens with names, descriptions and previews, what *else* are people doing?</p><p>For themeable systems there are potentially different audiences too:<br>- theme makers<br>- component implementers<br>- componnent consumers trying to tweak styling</p><p>How do you help each find what they need to know?</p>
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload