Resources

Great collection of UI elements and patterns organized by the function like login, empty state, wizard, etc. A great resource for gathering ideas and analyzing the best practices.

Flowbite Icons is a collection of 437 free and open-source SVG icons built for the Flowbite Ecosystem.

Library with all colors from Radix Colors, an open-source color system for designing beautiful, accessible websites and apps. Also made by Jan using variables and light/​dark modes.

Jan Toman made an unofficial Figma library of variables and styles that use the default Tailwind CSS configuration.

Double Glitch made the Space Invaders game and turned Figma into a game engine.

Realistic typing is finally possible in Figma prototypes using variables.

While Will was working on Figma-OS, Willy Wu from Figma was also building his own version with a Figma plugin to help compile small C programs using ELVM. Don’t miss a thread on his journey.

Occasionally someone builds something in Figma that just melts my brain: ​“Figma-OS is the first Turing-complete 8‑bit computer built using Figma prototyping tools. Figma-OS has state-of-the-art specs with 512 bits of RAM, 16 bytes program memory, 10 Hz clock speed, and a MISC instruction set of 16 OPCODEs.” See the thread from Will DePue on how it works.

It almost feels like FigJam with its endless board was made for large spatial recaps like this! Great idea and a fun format made by Juarez Filho.

“Apple’s initial visionOS design kit for Figma contains a comprehensive set of UI components, views, system interfaces, text styles, color styles, and materials. All of the core ingredients you need to quickly create highly realistic visionOS app designs.” See also Designing for visionOS at Apple Design Resources.

With the latest round of auto layout updates, learn how you can wrap objects to a new line, set minimum and maximum widths and heights, and truncate text based on a set number of lines.

See how variables, conditional logic, and expressions can let you build more realistic prototypes with fewer frames and connections. Available on Professional plan and up. ​“Prior to variables, prototypes that have changing states e.g. adding items to cart, required duplicating frames and connections to mimic those flows. Now, you can set and modify variable values with prototyping actions to create dynamic prototypes with as little as a single frame and couple of interactions!”

Cool to see how Atlassian has already rolled out the variables support to their massive Components and Design Tokens libraries.

An interactive playground designed to help you get started with variables. These playgrounds are the best step-by-step guides to new Figma features.

This playground is an interactive guide to the Dev Mode, made with two audiences in mind. Designers will get to know how to set up files for handoff, connect design and code, and explain Dev Mode to developers, while developers will learn how to track design status and changes, inspect designs, get relevant code snippets, and use plugins to extend and connect workflows.

A beautiful set of 24 retro-inspired icons by Adanna in multiple customizable themes.

First the iOS kit, and now the official design library and templates for macOS Sonoma from Apple!

Great resource from O/M Studio: ​“Welcome to San Francisco! To celebrate Config 2023 in partnership with Figma, we curated a guide to help you get the most out of your visit to our hometown. Our San Francisco guide points you to all of our favorite restaurants, bars, shops, and activities. Friends don’t let friends drink bad coffee, right?”

The official mobile app for in-person attendees is a great way to see the full conference agenda, build your schedule, access speaker profiles, the location maps, and get real-time updates.

Free virtual try-on for the Vision Pro, because let’s be fair — we all need one now.