Dan's Interesting Design Links

Accessibility, inactive buttons and WCAG

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

Figma Community plugin - Rename all your layers in one click. Thanks to AI. Free. Open source.

Figma Community plugin - Gives you ultimate control over nested instances, tweak ◇s around without detaching. 👉 Video Tutorial Work best on instances that's using Auto-Layout V4.0 This plugin is inspired by Gleb's Master plugin Major Update Highlights: Monday, Aug, 8th, 2022 Added back Table (row based) control func...

Figma Community plugin - This small plugin lets you grab as many frames as you like and generate a nice list for easy navigation through your project or components. This includes: Selecting 1 or multiple itemsAble to customize the color of the font and list backgroundYou can choose if you want to include the Page prefix...

Color & Contrast is a comprehensive guide to color for user interface designers.

Give your simulated text a realistic look while making it easy to add copy later on with Dan Ross’s Flow Fonts and Christian Naths’s Redact...

While keeping things simple for your design teams

Whose sources, and whose truths?

Usability testing is the practice of evaluating your product with real people. Learn how to conduct effective user testing to get actionable insights.

Everything has a shelf life, a time when something has served its purpose and it’s no longer needed. While we talk a lot about how to start a design system, it’s not often talked about what to do w...

Let's dive into the lucrative career opportunities for people on design system teams

Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.

And how to make the spacers handy and transparent with the help of components

In this article, Kate Kalcevich explains when to use ARIA and how to use it properly so that you can use ARIA in a way that’s helpful to the many disabled people who use [assistive technology](https://makeitfable.com/glossary/?utm_source=Smashing+Magazine&utm_medium=sponsored+content&utm_campaign=Upskill&utm_term=Fable&utm_content=Sept2022) to navigate the Internet. Let’s dive in!

Test text fields for inputmode: decimal, email, verbatim, none, numeric, search, tel, text and url

Color & Contrast is a comprehensive guide to color for user interface designers.

Autocomplete / Combobox / Search autocomplete features are provided at 80% of e-commerce sites, yet only 19% achieve the highest performance. See our latest large-scale test findings for on-site search.

Figma Community plugin - Create translucent versions of your colors within seconds! Alphredo for Figma generates translucent (alpha) colors looking the same as their opaque counterparts when placed against the same background. ⏯ Check out this YouTube video to discover how can transparent palettes change...

Figma Community plugin - Trim your text elements, removing space above capital letters and below the baseline. Make text behave the same as every other element in your layout. This plugin works by nesting and offsetting text elements within frames. To achieve the same behaviour in a browser, check out Capsize which thi...

Figma Community file -

Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea.

Figma Community plugin - A powerful tool for finding and selecting elements, you can flexibly cross select various elements by various attributes of the element. Supported languages: Chinese, English, Spanish. 一个强大的查找和选择元素的工具，你可以通过元素的各种属性来灵活的交叉选择各种元素，支持中英、西班牙语。 If helpful please click the ❤️. 🔍 支持以下过滤方式 Supported filt...

All the relevant, latest resources to help you create your design system.

In this first part of a two-part article, Eduard Kuric analyzes the characteristics of effective toggle buttons that make it error-proof and prevent confusion and frustration of users.

The problem of how to design an effective toggle button that shows the selected option clearly is a long-term open question among UI/UX designers. In this second part, Eduard Kuric explains a complex list of visual cues used by toggle buttons to communicate which of their options is active.

How to build Figma plugins

A library of React Hooks that provides accessible UI primitives for your design system.

Figma plugin for viewing and editing documentation. Save docs to a component and view in a working file.

In western text, which reads left to right, justification and hyphenation are basic considerations for readability and clarity. But have you ever thought about how you can use them to create a look/feel that alludes to the literary culture of the past?