Flipboard

0 posts0 participants0 posts today

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Guidelines" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Guidelines</a> Design systems need a color space · Ignoring color spaces is no longer an option <a href="https://ilo.im/162qtm" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/162qtm</a>_____ <a href="https://mastodon.social/tags/Color" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Color</a> <a href="https://mastodon.social/tags/ColorSpace" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ColorSpace</a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProductDesign</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/VisualDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VisualDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a>

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Resources" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Resources</a> Design systems glossaries and primitive tokens · The ideas driving conversations about design systems <a href="https://ilo.im/160gmd" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/160gmd</a>_____ <a href="https://mastodon.social/tags/Glossary" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Glossary</a> <a href="https://mastodon.social/tags/Jargon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Jargon</a> <a href="https://mastodon.social/tags/Terminology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Terminology</a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a>

Lukas OppermannInteresting post on <a href="https://mastodon.social/tags/decisionTrees" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#decisionTrees</a> for <a href="https://mastodon.social/tags/designSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designSystems</a> <a href="https://mastodon.social/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a>: <a href="https://www.linkedin.com/pulse/decision-trees-ui-components-vitaly-friedman-chgae/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.linkedin.com/pulse/decision-trees-ui-components-vitaly-friedman-chgae/</a> 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 noreferrer" target="_blank">#designToken</a>.

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Proposals</a> Design token ugly mode · An approach to uncover hidden design flaws <a href="https://ilo.im/15zd8o" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15zd8o</a>_____ <a href="https://mastodon.social/tags/Consistency" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Consistency</a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProductDesign</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</a> <a href="https://mastodon.social/tags/TechDebt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TechDebt</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Approaches</a> A structured approach to custom properties · How can we manage CSS variables effectively? <a href="https://ilo.im/15zcqz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/15zcqz</a>_____ <a href="https://mastodon.social/tags/CustomProperty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CustomProperty</a> <a href="https://mastodon.social/tags/Typology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typology</a> <a href="https://mastodon.social/tags/Naming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Naming</a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Approaches</a> 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 noreferrer" translate="no" target="_blank">https://ilo.im/15z72v</a>_____ <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</a> <a href="https://mastodon.social/tags/Tooling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tooling</a> <a href="https://mastodon.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> <a href="https://mastodon.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

James NashOur <a href="https://mstdn.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a>'s <a href="https://mstdn.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> pipeline has become more of a hydra...Figma vars & styles | +-> DTCG file | +-> CSS custom properties +-> CSS utility classes +-> Storybook stories for util classes +-> TS code +-> TS interface...and there's more to come: React Native components, docs, etc.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.

Lukas OppermannA fresh and interesting take on <a href="https://mastodon.social/tags/designToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designToken</a> naming: <a href="https://uxdesign.cc/warhol-design-tokens-3acd49431484" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://uxdesign.cc/warhol-design-tokens-3acd49431484</a>While I am not a big fan of introducing new naming ideas that have to be memorized, others may disagree.It is definitely food for thought and re-evaluating your own naming convention.

James NashI 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 noreferrer" target="_blank">#DesignToken</a> pipeline.In our case, the demo was: - Static HTML, React & Angular web apps are all open in browser windows, displaying some of pur <a href="https://mstdn.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystem</a> components - An Android emulator running a React Native app, also using DS components, is open too. - I open a Figma library, edit the color of a variable ...

Zakir Hossen🎁🎁 Exciting News Alert! 🚀🚀 We present to you, the Keep Design System new update v1.5. 🎉 - <a href="https://keepdesign.io" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://keepdesign.io</a>🆕 What's New: * ✨ New Look * 🧩 Design Tokens * 🌈 Figma Variables + Dark Mode * ⚛️ React Version * ...and much more!<a href="https://mastodon.social/tags/designsystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designsystem</a> <a href="https://mastodon.social/tags/figma" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#figma</a> <a href="https://mastodon.social/tags/ux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ux</a> <a href="https://mastodon.social/tags/ui" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ui</a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.social/tags/designtoken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designtoken</a> <a href="https://mastodon.social/tags/darkmode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#darkmode</a>

James NashQuite pleased with the <a href="https://mstdn.social/tags/DesignToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignToken</a> pipeline I've just cobbled together:Figma vars ➡️ Tokens Brücke ➡️ DTCG file in a git repo ➡️ Cobalt UI (configured to output CSS vars) ➡️ PostCSS (with CSSNano) ➡️ CSS fileThe 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.

Lukas OppermannGreat article by <a href="https://mastodon.social/@smashingmag" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@smashingmag</a> on <a href="https://mastodon.social/tags/designProcesses" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designProcesses</a>. Interesting approaches like hot Potatoe and the loop by <a href="https://mastodon.social/tags/ibm" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ibm</a>: <a href="https://smart-interface-design-patterns.com/articles/perfect-design-process/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://smart-interface-design-patterns.com/articles/perfect-design-process/</a>I agree that you need to find out what works for you and your team. But it's also important to understand that it depends on the phase of a project and the kind of project. Starting a new product is very different to implementing a new <a href="https://mastodon.social/tags/designToken" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designToken</a> strategy.

Recent searches

Search options

Administered by:

Server stats:

#DesignToken