Figma

The Ultimate Figma Resource Archive (2021)

Put those 'Search' digits down, and enjoy my yearly archive of all the goodness that Figma and the community bring.

Marc Andrew
Nov 17, 2021
11 min read
Photo by C M / Unsplash

Does Figma keep on delivering the goods, both itself and from the community?

Absolutely.

I've seen countless Tutorials, Courses, Plugins and Kits on my Figma travels, and below is a selection of those that I've come across in the past 12 months.

Put those 'Search' digits down, and enjoy my yearly archive of all the goodness that Figma and the community bring.

Let's take a look...


Video Tutorials.

Here I’ve compiled a generous assortment of video tutorials for beginners and the more experienced (we’re always learning, right?) users of Figma.

There are some short videos to quickly view as well as, I think it’s over 7 hours long, video from freeCodeCamp on building a Design System in Figma. Wow!

Figma UI Design Tutorial: Get Started in just 24 Minutes

Figma 101: An Introduction Tutorial

Create a Design System with Figma - Full Course

In the File: Building a Design System for Designers

In the File: Organising your Design System

Figma in 40 Minutes

Figma Tutorial: Pen Tool Basics & Vector Networks

Figma Tutorial: Prototyping in Figma

Figma Tutorial: Auto Layout Navigation Menu

Figma Tutorial: Card Component with Auto Layout

Figma Tutorial: Constraints

Figma Tutorial: Prototyping & Transitions

Figma Tutorial: Masks

Figma Tutorial: Interactive Components


Courses.

In this section, I’ve compiled a list of Courses for Figma, both Free and Paid.

Here I’ve cherry-picked and filtered what I think are some of the best available currently for Figma.

Figma 101

Designlab | Figma 101 | Lessons
Learn UI/UX design through hands-on projects and 1-on-1 mentorship from expert designers. Add design to your resume and level up your career.

Figma Tutorials for Beginners

Free Figma Tutorials for Beginners - Design Crash Course
Jumpstart your designs with our free Figma tutorials. Learn the tools and best practices to help you build your first Figma prototype.

Figma Crash

Figma Crash Course
Deep dives into powerful Figma features. Skip the basics and learn prototyping, auto-layout, systems, and illustration with your instructor, Pablo Stanley.

Learn Design

Learn Design with Figma
Want to get started in design, but don’t know where to begin? These lessons and exercises will help you start designing immediately.

Creative Practices: From idea to final layout using Figma

Creative practices: from idea to final layout using Figma
Do you follow many designers and agencies and want to create the sites like them? Not bad habit, I do this too. But now is the perfect time to become one of them!...

Make Design Systems People Want to Use

Make Design Systems People Want to Use
A 12-episode video course to help managers, directors, and practitioners understand design systems as a software product. UI Kits, Component Library, and Design...

Create a Design System from scratch in Figma

Create a Design System from scratch in Figma
Design Systems are becoming so popular because they make products more consistent, improve their usability, and reduce the design decision making. That’s great!...

Create High-Fidelity Designs and Prototypes in Figma

Create High-Fidelity Designs and Prototypes in Figma
Offered by Google. Create High-Fidelity Designs and Prototypes in Figma is the fifth course in a certificate program that will equip you ... Enroll for free.

The Ultimate Figma & UI Masterclass

The Ultimate Figma & UI Masterclass - The Designership
Learn how to Master Figma in this 70+ video course. Advanced File Management, Design Systems, Figma Components, Responsive Design & More.

Plugins.

Who doesn’t appreciate a good plugin in Figma, right?

In this section, I’ve compiled a few gems that I’ve used extensively and highly recommend for their versatility and just outright benefits that they bring to any project you may be working on.

Quick Note: If you want to check out even more Plugin recommendations then take a look at my previous article here.

LottieFiles.

Some examples of a Plugins UI, with the words 'Design with Lottie' in black

Lottie has become the go-to resource for open source animations on the web, and it's easy to see why, given its small download size and cross-platform possibilities.

With the LottieFiles plugin, you can rapidly access a library of 1000s of free Lottie animations, drag and drop your own .lottie files, and simply access all of your animations previewed on LottieFiles, all from the comfort of Figma.

Grab LottieFiles here

Contrast.

Example of a Plugin's UI with the word 'Contrast' in black

The Contrast plugin allows you to easily check the contrast ratios of colours in your designs as you work, ensuring that the project you're presently working on complies with the Web Content Accessibility Guidelines (WCAG).

It's a must-have plugin that can even scan full sites and provide a report of all text-based contrast issues it discovers, allowing you to work through and remedy them as needed.

Grab Contrast here

Downsize.

Example of a Plugin's UI with the word 'Downsize' in black

Compared to something like Sketch, Figma files with many images already have substantially smaller file sizes, but the Downsize plugin can make things much better.

You can play about with different compression levels until you're happy, and you can also convert those huge PNGs to JPEGs if you like.

Grab Downsize here

Wire Box.

Various examples of a Plugin's UI, with the words 'Wire Box' in pink

With just a single click, you can convert those hi-fi designs of yours back to wireframes quickly and without all the hassle of having to recreate wires that you may have skipped in the initial stages.

You and your team can now easily focus on the UX side of things rather than the UI and make any necessary changes.

Grab Wire Box here

Chart.

Various examples of different style Charts, with the word 'Chart' above them

Line charts, Pie charts, Area charts, you name it, they're all here for you to effortlessly select and place into your project with so much customisation available to you.

With the ability to incorporate real or random data from sources such as Excel or Google Sheets to generate your charts, you have the most powerful chart plugin accessible in the Figma community, in my opinion.

Grab Chart here

Feather Icons.

A selection of Icons shown inside a Plugin's UI

I've used the Feather Icons before since it's a great, versatile, and lightweight icon set that can integrate into a variety of projects.

Having the Feather Icons plugin loaded in Figma saves that little bit of extra time by eliminating the need to transfer between an Icon tool of some kind and Figma itself.

Grab Feather Icons here

Remove BG.

Various images with their backgrounds removed, and the words 'Remove BG' to the left of them

Background removal tools. Convenient to have, but (and I've tried a lot of them) the outcomes aren't always the best.

Fortunately, Remove BG stepped in and made things much better, with results you could be proud of rather than embarrassed by.

Grab Remove BG here

Lorem ipsum.

Example of a Plugin's UI, with a block of Lorem Ipsum text to the side of it

I believe in using real text in your design iterations whenever possible, but when working with particularly early concepts or Wireframes, Lorem ipsum can sometimes bridge a gap.

With this handy plugin, you can easily fill your text layers with standard Lorem ipsum, using only the amount of Lorem required to fill the frame you've selected.

Grab Lorem ipsum here


UI Kits/Design Systems.

Are there many Kits, Design Systems etc... for Figma? Erm. Yeah. Quite a few.

Actually. More than quite a few. A ridiculous amount, to be exact.

There are tons of, ahem, rubbish out there to sift through, so I’ve made your job a little easier and found some of the best Free and Paid gems there is.

Atlassian Design System

Figma - ADS Components | Atlassian’s component pack. This includes all of our molecular components - small pieces of our f...
Figma Community file — Atlassian’s component pack. This includes all of our molecular components - small pieces of our foundations library all merged together to create useful, reusable components. You’ll want this and the ADS Foundations library to get started.

Uber Base Design System

Figma - ❖ Base Gallery | Uber’s Base design system was created to promote a centralized library of reusable UI components ...
Figma Community file — Uber’s Base design system was created to promote a centralized library of reusable UI components for Designers and Engineers.

Spotify Backstage Design System UI Kit

Figma - Backstage Design System | Build your own Backstage plugin with this UI kit for Figma.
Figma Community file — Build your own Backstage plugin with this UI kit for Figma.

Chakra UI Figma Kit

Figma - Chakra UI Figma Kit | Chakra UI’s official Figma components library, with simple, modular and accessible components tha...
Figma Community file — Chakra UI’s official Figma components library, with simple, modular and accessible components that give you the building blocks you need to design and build your React applications. What’s IncludedExtensive styles for typography, color and effectsComponent variants including…

Eva Design System

Eva: Design System - Figma v.1.3
Unity of Design and DevelopmentUI components library, based on atomic design principles, consistent with well known Angular and React libraries that are Free and Open Source! A unique Color System powered by AI generator helps you to customize it as well. You focus on business logic and we take care…

Pajamas UI Kit

Figma - GitLab Component Library | Design assets, components, and styles for GitLab’s design system, Pajamas. Learn how you can con...
Figma Community file — Design assets, components, and styles for GitLab’s design system, Pajamas. Learn how you can contribute https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/pajamas-ui-kit.md Visit https://design.gitlab.com/ →

Shipwright UI Kit

Figma - Shipwright - UI Kit | A fully editable design system built in Figma. We built Shipwright to help designers, developers...
Figma Community file — A fully editable design system built in Figma. We built Shipwright to help designers, developers, founders, and agencies. This UI Kit can serve as the building blocks for product design systems, kickstart new projects, or help people flesh out ideas. Improve management &…

Cabana Design System for Figma

Cabana - Design System for Figma
Cabana is a Design System for Figma that is super-powerful and feature-rich but gives you the creative freedom and flexibility to make it your own.

Ant Design System

Ant Design System for Figma - UI kit
The powerful UI kit for Figma based on the most popular React UI library - Ant Design. Create well-documented products in no time!

Simplekits

Simplekits - Design System Kit
Simplekits is a design system starter kit that contains all the core components you could need when starting a new project, ready to go so that you can get straight to the creative stuff.

Untitled UI Figma UI Kit and Design System

Untitled UI — Figma UI Kit and Design System
Untitled UI is the largest Figma UI kit and design system in the world. Kickstart any project, save thousands of hours, and level up as a designer.

UI Prep Design System

UI Prep: The Best Design System UI Kit for Figma
We’ve done the all the prep work so you can start designing. Jump start your design process with the best Figma design system from UI Prep.

Root Design Starter Kit

Root - Website Wireframe and Design Starter Kit
Design better wireframes and products using an outstanding design foundation.

Hopefully, something in this handy lil' archive will help improve your knowledge or day-to-day workflow in Figma.

The Figma community has developed significantly over the past few years. It continues to grow daily, with additional time-saving plugins, tips, tutorials, and more being made available.

I'm excited to see what Figma and the community have in store for 2022.

By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Cabana is a Design System for Figma that is super-powerful and feature-rich but gives you the creative freedom and flexibility to make it your own.

Thanks for reading the article,
Marc.