#Features

Combine Layout Grids with Constraints

Joey Banks shows a nice use case for combining Layout Grids with Constraints. For a deeper dive, check out my older article on this feature.

Demo of Vector Networks

Miguel Cardona shows how cool and powerful Vector Networks are. The vector editing toolset in Figma is unique and worth getting familiar with.

Tim Tries: Figma, Zeplin and Storybook

Tim Benniks looks at how Figma, Zeplin, VS Code, and Storybook can work together to provide a much better experience for developers.
Tim Tries: Figma, Zeplin and Storybook. Mind is

Office Hours: Complex Component Architecture

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.
Office Hours: Complex Component Architecture

Build it in Figma: Create a Design System IV — Testing

Testing a design system to see if the component library is robust enough in real-world scenarios.
Build it in Figma: Create a Design System lV —

Gifmock

Create high-quality GIFs from static images and mockups. Make sure to check out a fun demo.

Workshops

Easily facilitate collaborative design sessions directly in Figma.

Use shiki-svg-renderer to render code to SVG

A smart way to export code with syntax highlighting to Figma.

How to add “native” Find functionality to Figma

Joel Califa suggests assigning a system shortcut to the Find & Replace plugin.

Arrow Auto

A very nice plugin for visually connecting objects with arrows. It even automatically updates the arrows when connected objects are moved around.

How to handoff your designs to Engineering

Femke shows her engineering handoff process at Uber Eats. Among other things, she adds a Handoff page to her files, breaks it down into work streams, uses templates to show flow statuses, and adds notes to document changes and implementation details.
How to handoff your designs to Engineering

Return to Instance after editing the Main Component

Meng To points to a useful feature that can be easy to miss.

Anyone else using spacers in Figma’s Auto Layout?

Can’t wait to see what they’ve got!

New Ways to Create Higher-Fidelity Prototypes in Figma

Two new prototyping features! Now, you can show multiple ways to interact with a single object and make your transitions pop with custom easing curves.
New ways to create higher-fidelity prototypes in

Figma Tutorial: Easing Curves

And another one, introducing easing curves and explaining how to create your custom Bezier easing curves.
Figma Tutorial: Easing Curves

Handing Over Design With Spacers in Figma

In Issue #16, I shared the article ​“Worry less about spacing in Figma”. In the new article, Lennon Cheng continues on the idea and shows to introduce spacers into the development handoff process.

Figma Components With a Fixed Aspect Ratio Elements

How to keep an aspect ratio of a nested element when resizing its parent. Really smart workaround!

Smooth Parallax Scrolling in Figma + Framer Web

Creating a smooth parallax scrolling animation in Figma and Framer. It’s nice that both apps work in the browser, and Framer has a built-in Figma import.
Smooth Parallax Scrolling in Figma + Framer Web |

Using Elgato StreamDeck with Figma

Seems like a cool device to speed up work. (Or you can learn shortcuts for free.)

Cmd/Ctrl + right-click the object to show child/parent objects

Rogie shares a good tip on navigating nested layers.

Features

Topics

Products

Design Tools

Figmalion

Issues:
265
Links:
4,566