Resources

Jenny Wen ​“templatized” some of the frameworks she’s been using over and over again in her role as a design manager and pillar lead of FigJam. There are 11 FigJam (no surprise!) templates for strategy, managing, and meetings.

“All the essential resources for setting up the design system.” A solid guide and a collection of interviews with design systems practitioners.

Vijay shared his collection of loader prototypes in the community.

A free and ever-expanding design system and UI kit for Figma from Lemon Squeezy. Fantastic resource from a talented team!

FigWig — a Figma team contributions tracker I mentioned in #140 — is now available in the App Store for iPhones.

CVS Health Inclusive Design team: ​“Accessibility annotations help capture design intent that cannot be conveyed through visual design alone. This can help prevent many accessibility issues earlier and create more usable digital experiences. After 2 years of testing with over 65 design teams at CVS Health, we’re releasing our Web Accessibility Annotation Kit to the public.”

“Transform your plugin ideas into reality in just minutes! Featuring official Figma color variables, dynamic interactive components, ready-to-use promo material presets, and a live preview across 3 stunning themes.”

A new FigJam icebreaker for the season — making snow friends from a set of accessories and snowball sizes.

A good-looking set of icons made for Figma and Framer, with a unique business model — pay once and request custom icons in the future with no additional charge. A free set consists of 100 high-quality icons.

Fons Mans partnered with Framer again this year for a new advent calendar of design gifts — everything from heavily discounted apps to free icon and wallpaper packs.

The final week of LBU includes a number of quality-of-life updates.

The design editor. #22: On-canvas previews for the font picker (yay!) #23: Press Tab on a misspelled word to autocorrect the typo. #24: SF Symbols icons now render correctly. #25 and #26: Text boxes and containers (like frames and sections) can be used as snap targets. #27: Select text from the canvas in View-only mode. #28: A bug fix for the text shifts caused by changes in colors or text properties. #29: Nested component properties are visible in the playground and Dev Mode.

Collaboration tools. #30: Media in comments (yay!) #31: The full gamut of emoji reactions in comments. #32: Nominate someone to spotlight. #33: Mind maps in FigJam (whoa!) #34: Mobile app makes browsing files easier. #35 and #36: Importing Asana and Jira projects.

Prototyping experience. #37: A fix to ​“mouse enter” and ​“mouse leave” interactions. #38: The prototyping modal now pops up right when you need it. #39: Temporarily hide the edit modal by holding Shift. #40: Making it clear when you have multiple actions tucked into an interaction. #41: The inline preview can follow the current frame. #42: Sticky scrolling improvements (see more on this below).

A new design system from Meng To with hundreds of customizable Figma and Framer components and templates. Looks incredible, and the kit is meticulously organized with variables, variants, and adaptive layouts. See also his recent livestream with a discussion around key challenges while building the design system, the experience of using Figma variables and components, and tips for transitioning from Figma to Framer.

Vercel developed a new typeface specifically designed for developers and designers. ​“We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities.” Heavily inspired by Inter, it looks great and definitely going to be very popular!

A curated collection of design system content, tagged with topics, speakers, and events. Now, where do I find time to go through all of this?!

Couldn’t walk past a cool website with strong 90s Apple vibes! The design system offers a generous free tier for beginners and students.

Dave Williames made a next-level prototype using variables. The experimental pixel art editor uses over 40 variables to draw on a 16×16 grid with 16 colors, add frames, and play them with adjustable speed! Absolutely mind-blowing.

Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100.

Roman Shamin and Evil Martians keep building amazing tools for working with colors. Harmony is a beautiful color palette built with a primary focus on visual contrast and accessibility. It provides an equal contrast within lightness levels and consistent chroma (thanks OkLCH!), mirrored contrast pairs for light and dark modes, P3 gamut support, and Figma variables support. A great example of how a modern color palette should be built. Make sure to read Roman’s thread with all the nitty-gritty details of building this palette.

A collection of 200+ commonly used components and styles for product and/​or web design. Designed to be used for low-fidelity conceptualizing and ideation activities.

Something new is coming up in October 👀 The landing page is a smart way to give a peek! ​“Builder​.io is the only headless CMS that gives developers, marketers, and product managers the freedom they need to ship fast, flexible, multi-channel experiences without overwhelming your backlog.”