#Features

Making Design Within Reach for online shoppers

A branding and digital agency BASIC worked with Herman Miller on redesigning a Design Within Reach (DWR) website to replicate the experience shoppers might have in a showroom. They used Figma prototypes for usability testing and took the redesign as an opportunity to create the first design system for all of Herman Miller brands.

Use shiki-svg-renderer to render code to SVG

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

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.

Everything Developers Need To Know About Figma

A solid guide to Figma for developers from Smashing Magazine. It’s focused on navigating the app, measuring dimensions, exploring styles, exporting assets, getting CSS from the Code panel, and other parts of the developer handoff.

Anyone else using spacers in Figma’s Auto Layout?

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

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

How to add “native” Find functionality to Figma

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

Return to Instance after editing the Main Component

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

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 |

Features

Topics

Design Tools

Figmalion

Issues:
207
Links:
3,743