FigJam Updates. Primer’s color system. Library scalability.
Sponsor
Discover all the skills you need to 10× your design skills for free
17 module free course, that will help you gain clarity and actionable insights into becoming a better product designer.
FigJam Updates
10+ new features and integrations in FigJam
A big update to FigJam — custom templates for your team, stamp your teammates’ faces to files and tag them with @mentions, emoji picker opens by typing a colon (“:”), custom color palettes (coming soon), UserTesting and Great Question integrations, Productboard widget, and new tunes! Also, explore new world-class teams’ templates and see a thread by Cai on the Figma design team’s rituals and templates they use in daily work.
Small but mighty improvements to FigJam
In addition to a bigger release, there are a bunch of good quality-of-life improvements: toggling between thin and thick markers with Command–B (lovely animation!), an addition of Paste to replace (Command–Shift–V) command to FigJam, and connecting two objects by simply clicking on one object followed by clicking on another.
What’s New
Unlocking inclusive design: how Primer’s color system is making GitHub.com more inclusive
You know I love color tooling! GitHub has been doing some excellent work on its color system, which is the foundation of the Primer design system. Last year they wrote about building internal color tooling for theme building, and in the new post, they share their process for making contrast changes in both default light and dark modes as part of GitHub’s larger accessibility strategy.
Design Tokens: Beginner’s Guide
A short introduction to design tokens: “Design tokens are modular, platform-agnostic building blocks of design systems that store repetitive design decisions. Design tokens act as a single source of truth and enable flexibility and scalability within the design system.”
Using Figma
Organizing a web design system for scalability in Figma
Allie Paschal suggests a way of organizing a large design system library to avoid hitting a file memory limit in Figma. “Because Figma is cloud-based, each file (or tab) can only have 2GB max in both the browser and desktop application. But in general, keeping your file at a lower GB usage helps your overall file performance. I’ve found that Figma doesn’t like it when you start to near 60% of this 2GB capacity. So you really only have 1.2GB to work with before the evil file memory banners appear.”
Study Hall: Interactive component carousel galleries in Figma
In this Study Hall, Miggi shows how to make Interactive Component carousel galleries.
Resources
Helpers: Full colour spectrum badges, pills, tags
A useful freebie from Luis Ouriach — 360 badges, pills, and tags in the full-color palette range.
Plugins
Include
Include is a tool built by eBay to make annotating for accessibility easier — easier for designers to spec and easier for developers to understand what is required. The intent is to have accessibility considerations included during the design phase of any project and to help with the designer-developer collaboration.
Destroyer
Let Destroyer recursively detach instances, remove Auto Layouts, and detach Styles within your current selection so you can iterate faster. When working collaboratively and wishing to quickly try out an idea, it’s always a hassle to detach the component and remove Auto Layouts.