Resources

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!

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

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?!

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.”

The brand new kit with the evolution of Microsoft’s design system. Supports variables, theme switching, and uses memory more efficiently.

A new take on Little Big Updates from Figma — every Thursday this fall they’re releasing some of the 30+ updates designed to make day-to-day life a little easier. This week it’s four improvements to the Assets panel. #1 is filtering assets by a specific library file, recently viewed, default libraries, and more. #2 is larger and more visible thumbnails. #3 is showing component names by default, with variant counts on hover. #4 is my favorite — clicking on an asset opens up a new component modal that displays a larger preview and a link to the main component file, plus a component playground on the paid plans where you can preview and interact with any variants, variable modes, or component properties.

Keeybs is a customizable keycap and keyboard template library by Joanne Li, spawned out of a love for custom mechanical keyboards.

A new free and open-source illustration collection from Pablo Stanley: “Transhumanism has always fascinated me. It’s a philosophical movement that challenges our understanding of human limitations and our potential to transcend them. It holds the belief that we can evolve beyond our current physical and mental restraints by integrating technology into our very being. It’s about pushing the boundaries of what it means to be human, embracing the fusion of biology and technology, and envisioning a future where we’re no longer constrained by our natural form.”

Blend Icons offer 137,000 free icons in more than 1,300 collections of 7 different styles.

Lottielab is a new tool for creating and managing Lottie animations that won Product of the Day at ProductHunt this week. Images can be imported from Figma, SVGs, or Lottie files, and exported as Lottie, GIF, or MP4 to any platform. From Drew, a co-founder of Lottielab: “We are streamlining this cluttered process into a simple, seamleass, all-in-one workflow, with all the benefits of modern design tooling fit for today’s product development teams — being web-based, collaborative and easy to use — no After Effects knowledge needed.”

Luis updated Figma’s public UI2 design system file with all the features and elements introduced since its last update in 2019. His process is fascinating to follow and shows how much work went into this little update! Also has some great tips on plugins and the organization of a large design system.

Figr is a collection of editable UIs of popular apps that can be copied to Figma. “Figr is created to simplify design research and decision-making. It’s your one-stop solution for design inspiration, research, and editable files, freeing you to build great products.” Won the “2nd Product of the Day” at ProductHunt on August 3rd.