Dan's design links

An Open Source collection of Design Principles and methods

We’re altering the way we handle text in Figma. Join me on the journey we took to get there — through type history and into the modern times.

Intuit’s Framework for a Scaled Design System

Like code, prove Figma shows what and changes as you expect

Test assets using criteria organized in checklists

Design system documentation has been maturing at a rapid pace over the last five years. how we document is an opportunity for us to stop, reflect and figure out the biggest challenges that face us in how we document and grow our design systems. The ‘how we document’ survey was conducted from Sep to Oct 2021 across social media, industry Slack channels and in emails to design system professionals. https://www.zeroheight.com/how-we-document

Interplay connects and automates design and code workflows to align your entire product team around a single source of truth

Might be good to have a glossery like this for our design system as well.

I found a pretty reliable way to create flexible, responsive custom tables in Figma. I’ll do a video walkthrough at some point, but if you want to play… https://t.co/cibZI3Uk4g— Buzz Usborne (@buzzusborne) April 6, 2022

Use right-to-left (RTL) and bidirectional controls in Figma and FigJam Before you start Who can use this feature Supported on any plan Available in Figma design and FigJam files U...

The three Boolean options in presentation mode correspond to three query string parameters you can add to any Figma prototype URL: `hotspot-hints=0` disables the blue highlights that show when you click a non-interactive area `show-proto-sidebar=0` hides the sidebar list of all prototypes in the document `hide-ui=1 ` hides the Figma UI around the prototype (this overrides show-proto-sidebar, even if you set that to 1)

F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured | Techniques for WCAG 2.0

Update: I fixed this by adding `font-synthesis: none;` to everything. Crazy that the mobile browsers were trying to synthesise their way around opsz. I’ll be adding this to some articles!(Thank you, @Armstrong, for making me think about browser defaults as the potential issue!) https://t.co/op6ejHDB6T— Elliot Jay Stocks / Other Form 🇺🇦 (@elliotjaystocks) September 26, 2022

Unlocking the full potential of your design system with the power of chat GPT

Advanced courses for designers who never stop learning.

Generate all possible instances for your components, including every combination of variants and component properties, all in a tidy labelled table. Creating tables Select one or multiple components or component sets.Run Propstar.That's it! A table of instances will be generated behind your comp...

Includes info on title case vs sentence case. For Intuit content designers, the words on their own should guide customers, but sometimes financial and tax language needs special formatting for clarity.

An overview of the new WCAG 2.1 Success Criteria broken down by user groups that they accommodate and other helpful resources.

Making text accessible should be part of everyday practice. However, general typographic practices of optimizing legibility and readability don’t necessarily go all the way towards making text accessible.

A simple but thorough checklist to reference every time we need to choose a new typeface, with each item explained in detail.

A detailed approach to combining typefaces based on their construction.

Applying the principles of WCAG 3.0 to some current visions of the future

A plain language word list for UX writing and help content to make your writing sound more human.

Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using @font-face

I created Design System Metrics Collection as an inspiration for what exists and worked for my clients.

An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.

The best dark mode implementations on the Internet

Accessibility, inactive buttons and WCAG

When it comes to error handling, it truly is a team sport