Features

On pitching and presenting

“Since presenting is a large part of both client-facing work and startup-building, Abigail spent the first three years of college refining her presentation skills in front of a variety of audiences: toy designers, vehicle inventors, entertainment executives, and more. Below, she shares her tips for developing and delivering a presentation that lands.”

Issue #23
Sep 20, 2020
#Presenting

TinyImage Compressor

I rarely write about plugin updates, but this one is exciting — TinyImage Compressor added support for AVIF image format. If you haven’t heard about it before, check out the blog post “AVIF has landed” from a developer advocate for Google Chrome.

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 —

Workshops

Easily facilitate collaborative design sessions directly in Figma.

Gifmock

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

Office Hours: Complex Component Architecture

Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.

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.

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.

Making little @figmadesign demos on iterating simple illustrations and components... Wait for it... Still can't get over how awesome vector networks are. pic.twitter.com/Sg9k1EvJfv
— miggi from figgi (@miggi) August 30, 2020

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.

Here's a quick @figmadesign speedrun to show how you can combine Layout Grids with Constraints to create the perfect effect when resizing a frame/component with nested items. ↔️✨ pic.twitter.com/cMSken1lJO
— Joey Banks (@joeyabanks) September 3, 2020

Use shiki-svg-renderer to render code to SVG

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

With shiki 0.2.0, you can use `shiki-svg-renderer` to render code to SVG and edit them in @figmadesign / Affinity Photo / Adobe Illustrator. Enjoy 🏳️‍🌈https://t.co/Ws85bNyXds https://t.co/cap2cytjWy pic.twitter.com/6EwhDHWVcx
— Pine (@octref) August 24, 2020

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.

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.

A new experience for Figma Organization admins

Figma redesigned admin settings for Figma Organizations. To introduce the changes, they recorded the whole playlist of demo videos.

Issue #22
Sep 6, 2020
#App Updates

Anyone else using spacers in Figma’s Auto Layout?

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

We’ve got something brewing that I think you’ll like ;–)
— Rasmus Andersson (@rsms) August 20, 2020

Return to Instance after editing the Main Component

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

I didn't know this @figmadesign trick for the longest time. You can return to instance after edit AND after selecting back the component. pic.twitter.com/BVYLVs7pyt
— Meng To (@MengTo) August 12, 2020

How to add “native” Find functionality to Figma

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

Figma tip:

1. Install the Find & Replace plugin: https://t.co/pRNsFbm8ag

2. Go to your mac's System Preferences > Keyboard > Shortcuts and make ⌘F trigger it.

3. You now have "native" Find functionality on @figmadesign 🔍✨ pic.twitter.com/R3aJz6AFaz
— Joel Califa (@notdetails) August 15, 2020

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.

Arrow Auto

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

Issue #21
Aug 23, 2020
#Prototyping

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.

Figma Tutorial: Easing Curves

And another one, introducing easing curves and explaining how to create your custom Bezier easing curves.

#Features