Resources

I shared this design system back in October of last year, but it just shipped a new version and won #1 Product of the Day at Product Hunt. ​“Included in this package are more than 200 styles (Typography, Effects, and Color), over 200 variables (Surface, Text, Outlines, and Radius), and 700+ components (Buttons, Form Elements, Navigation, Web3, and more). It also offers pre-made layout samples, a one-click dark mode option, and a fully tokenized design using Figma variables.”

A starter kit from Luis Ouriach shows how to set things up with typographic variables.

A slide deck with 100 Figma tips to make your design workflow smart, fast, and super productive.

Now you can use the power of AI to generate and expand mindmaps and create visual timelines in FigJam. See examples in the gallery of ready-made FigJam AI prompts.

Blank is ​“the fastest Figma UI kit and design system for your projects.” It includes weekly updates, an extensive component library equipped with all the necessary stuff for your next project, tokens and variables support, light and dark modes, open-source icons, and ready-to-use layouts.

Free website UI kit made by Framer?! You got my interest. ​“Easily transform your ideas into a fully functional, responsive, no-code SaaS website design within minutes using these free components for Framer and Figma.”

“App icon template for iOS 17. See your app icon in context. Editable app icons so you can borrow shapes and styles for your own creations. Made in P3 color space to assure accurate colors.”

This Figma template that Meng To prepared for his new free Framer course is nuts. It’s a beautiful work and an excellent resource for playing with Framer’s Figma plugin.

Cool illustration by Benten Woodring with strong retro ​’80s and ​’90s vibes.

If you learn best by doing and experimenting, try the new playground file that explains finding and selecting matching layers, resizing and aligning them to their frames, batch text editing, changing all variants at once, and more.

36 free hand-crafted textures that can be tiled and recolored. Made by Mark Bennett, who crafts beautiful skeuomorphic interfaces and sells elaborate Figma projects at his community page.

“Droit UI is a highly customizable Figma design system with over 7,000 UI components, specifically designed to streamline the workflow of creative professionals, agencies, startups, and SaaS businesses.”

Luis shared a set of recommendations on how to approach naming conventions for components, props, and values within Figma component libraries.

If you’re hosting or participating in a community event or meetup during Config 2024, please submit it to Kyler Phillips’ unofficial guide!

Mockups of Word and Excel interfaces, if you ever need them in your designs or demos.

“Figma Shortcut Master Game is a cool prototype made in Figma. It’s a fun way to learn Figma keyboard shortcuts or test what you already know.” There is a total of 11 levels but they’re pretty challenging! Impressive what you can achieve with just a Figma prototype.

Think you’re good at picking colors? Test your skills with this fun little game.

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.

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!

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.