#Features

Figma Tutorial: Create Animations in Your Web, UI Design & Prototypes

Mizko shows how to build animations with Figma’s Smart Animate feature.
Figma Tutorial: Smart Animate - Create UI & Web

Figma Components 101

“Components are elements of your designs that you want to reuse — you can think of them like building blocks. Components help keep your designs consistent and allow you to quickly apply changes across multiple files and projects.”
Figma Components 101

Making Pencil tool a little more interesting

Steve Ruiz shows a plugin he is working on and explains the process. Looks really cool!

Figma tips: Multi-themed components

“When scaling up your design systems, you’ll more often than not require a slightly different theme or treatment for different products or brands. By making use of nested components, team settings, and inheritance, we set this up really quickly within Figma.“
Multi-themed Figma components

Figma Tips: Adding a glass effect to your designs

Luis shows how to create a cool glass effect using a Morph plugin.
Adding a glass effect to your designs

Baseline Grids with Auto Layout

“In this Figma Tip, learn to set up a 4px baseline grid using layout grids, and how to set offset values to your text blocks using auto layout to account for fonts’ different baselines and keep a consistent vertical rhythm in your designs.”
Baseline Grids with Auto Layout

Segmented Control component

Joey Banks build a Segmented Control component using Auto Layout, Variants, and hidden layers.

Live-Building Figma Kits for Tailwind UI with Auto Layout and Layout Grids

Live-building Sign-in and Registration components for the official Tailwind UI Figma kits.

Live-Building Figma Kits for Tailwind UI with Auto

A Front-end developer using Figma

“In this post I want to tell you my first experience with Figma, how I am defining my design system, what resources I have found and how to create slides with your own brand.”

Switchable styles from light to dark mode in Figma

“We will teach you how to choose the right shade and contrast of colors, how to structure them properly according to their uses. In addition, we will talk about how colors should be properly applied to Light and Dark modes, followed by some tips and tricks, and finally, teach you a quick and easy way to switch from Light to Dark mode with just a few buttons.”

Illustrating concepts using Figma’s Smart Animate

How Dropbox uses Figma’s Smart Animate feature to illustrate product design concepts.

Figma Tutorial: Create Interactive Components with a Real Project

A new tutorial by Mizko.
Figma Tutorial: Create Interactive Components with

What you can make with Interactive Components

Kelsey Whelan shows a few examples of really cool animations and interactions.

Toggle Switch

Joey Banks creates a toggle switch as his first set of Interactive Components.

Criss-Cross Game

Miguel builds a criss-cross game with a single frame and Interactive Components.

Talky – Interactive Component Animation

If you’re in beta, check out this community file by Bruno Figueiredo.

Creating overlapping animations

Miguel shows how to create bouncing circles animation with different timings.

Why Interactive Components are important for design system teams

See how Interactive Components can dramatically reduce the number of connections you create.

Join Figma’s interactive components beta

“With interactive components, you can create reusable, shareable interactive elements for your prototypes. Sign up to get early access to the feature and help us improve before launch.”

New macOS icon

Ryhan shows the process of creating a new Big Sur-ready icon for Figma desktop app.

Features

Topics

Design Tools

Figmalion

Issues:
207
Links:
3,743