Checklists. Functional UI Kit. WCAG Explained.
Sponsor
Get the Perfect Domain Name at Porkbun.com
Porkbun offers hundreds of domain extensions ranging from .com and .app to .dev, .tech, & more. Create, share, and test designs for websites, mobile apps, and other digital products! Plus get freebies like SSL certificates, WHOIS privacy, URL forwarding, web hosting trials, and personalized support 365 days/year.
App Updates
Better compatibility with sections when reviewing branch merges
Anthony DiSpezio shows how merge reviews now ignore top-level sections, allowing you to review changes at the frame or component level.
What’s New
Design systems 101: What is a design system?
Designer Advocate Chad Bergman explains the basics of design systems — what they are, how they work, and how they can change the way you design.
The WCAG Explained
The Stark team prepared simplified and actionable explanations of WCAG 2.2 criteria. “This is a collection of summaries of each and every criteria from the WCAG 2.2 designed for clarity, simplicity, and actionability. The WCAG is complex and detailed so we wanted to give you something that takes the awesome efforts that went into creating it and gives it to you in a really easy to understand package.”
Using Figma
Figma checklists
A set of benchmarks to level up the quality of your Figma components and define what constitutes a good component. The content is divided into two sections: “Design”, featuring items that can aid in crafting a component; and “Testing”, containing considerations for testing your component before final publication.
Figma tutorial: Export from Figma design
“You can export content to share designs with others, move content between tools, or save copies of your work outside of Figma. In this video, we’ll walk through how to export content and go over ways to troubleshoot common export issues.”
“My brand color is red/green/yellow, am I doomed?”
Some colors have established semantic uses — green for positive feedback, red for errors, and yellow for warnings. But what happens if your brand is based on one of them? Molly looks at how Netflix & Lego, Spotify & Quickbooks, and Hertz & McDonald’s handle this challenge. Her takeaway: either embrace the situation and use the brand color for semantic values, or introduce a new distinct color shade (i.e. orange for errors), but do not use two similar colors for different needs.
Made in Figma
Braun SK-61
Beautiful illustration of a Brain turntable made in Figma.
Resources
Functional UI Kit
Alex Yakir put a grant from the Figma Creator Fund to good use by building a free design system that makes both designers and developers happy. All Figma variables and components have matching CSS variables and React components with stories in Storybook. It’s designed with Dev Mode in mind, from built-in Annotations to unified prop names and Auto Layout mirroring the box model structure. An impressive amount of work and superb attention to detail!
Figicon
Figicon is a free collection of thousands of minimal icons. All icons are available in SVG, based on a 24-pixel grid with a 1.5‑pixel stroke, and include a set of brand logos and all country flags. Product Hunt’s recent 2nd Product of the Day.
Plugins
Dualite – Figma to Code
Dualite converts Figma designs and prototypes to React and HTML/CSS. “Create reusable code components with semantic naming from Figma variants in a single-click. Use tagging for turning static layers to external links, input fields, buttons and embeds.”
Cool Thing
Supervision
Think you’re good at picking colors? Test your skills with this fun little game.