Figmalion logo

Figmalion is a curated newsletter collecting interesting links about Figma.

Issue #20

August 10, 2020

New prototyping features are the biggest news of the last two weeks — now, you can add custom easing curves to transitions and show multiple ways to interact with an object. The new integration with Bubble lets you create web apps from Figma without code. Make sure not to miss videos on using Ditto Words and creating a parallax scrolling with a combination of Figma and Framer. Enjoy!

— Eugene

P.S. I shared a small preview of my upcoming book “Designing in Figma”. Coming soon!

App Updates

🚀 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: Prototyping & Transitions

One of two new tutorials shows the latest updates to the prototyping.

Figma Tutorial: Easing Curves

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

Explore Figma Community

Figma keeps improving its Community. Now you can filter resources by type, see trending files and plugins, and follow popular creators.

What’s New

📄 Bubble + Figma Integration: Design and Deploy Your Web App Without Code

Cool integration with a no-code app. ”Bubble offers a powerful point-and-click web editor and cloud hosting platform that allows users to build fully customizable web applications and workflows.”

📄 There Is No ‘I’ in Rebrand

The team at Kalamuna moved its brand guide from a static PDF file to Figma. “Figma is the perfect tool for putting together a living document to define a growing and changing brand design system.”

📄 Managing Your Design System in Figma

The Headway design team on managing a design system and multi-tiered UI kits in Figma. Love their usage of status badges and overlays.

Using Figma

📄 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!

📄 5 Figma Tips From a Reformed Messy Designer

A few recommendations for keeping Figma files organized and easy to browse.

📄 Dynamic Content & Colors in Figma

If you still don’t use Google Sheets Sync, this article will show what you are missing out on.

Manage Your UX Writing With Ditto Words

Femke shows Ditto Words, a new tool for UX writing.

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.

Figma in 40 Minutes

Entertaining video showing how to create a simple and clean design in Figma.

First Day of Class With Figma Design

Miguel Cardona gave a virtual talk demonstrating the ways to develop and foster community through collaborative prompts and activities in a classroom with Figma.

🐦 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.

🐦 Option/Alt + L to collapse all groups and frames in the Layers panel

Gleb Sabirzyanov on how not to lose your head while navigating layers.

🐦 Effect icons indicate the offset direction

Love the attention to details in Figma!

🐦 Lyft’s internal plugin for switching between light and dark mode

A great example of building a simple internal plugin around your own design system to automate routine work.

Build It in Figma: Create a Design System — Components

“Part 2/5. Add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.”

In the File: What’s Next After Product-Market Fit?

“You have a product that is loved, and your customers are bombarding you with feature requests. How should you prioritize? Drawing from his experiences at Uber, YouTube, and Figma, Yuhki shares some helpful ideas for how you might approach this phase.”

🐦 Confessions that will get your Figma design card revoked

The replies are fun, but also highly educational about all the wrong ways to do things in Figma.

Resources

🌎 Figma’s Hackathon Starter Kit

“One-stop-shop for all the templates and resources you need to make something awesome at your next hackathon.” Of course, all of these resources can be used at regular projects as well.

🌎 SVG Abstract Patterns & Illustrations

Cool library of abstract patterns, free to use.

🌎 Noted

Templates for creating simple notes, lists, and schedules.

🌎 Templatery

A collection of beautiful free templates for Figma presentations.

Plugins

Toolabs Design System Manager

Toolabs Design System Manager Powerful plugin for managing design systems. Design tokens, theme management, content collections, documentation, and access to tokens from GraphQL API.

Convertify Figma to Sketch

Convertify A new plugin from Figmatic for converting and exporting designs from Figma to Sketch with a single click.

Annotate It!

Annotate It! Automate the process of annotating your designs for a smooth and effective developer handoff.

Backstage

📄 Inside Figma: Reflections on a Remote Internship

Jenning Chen, an intern on Figma’s design systems team, built the recent updates to the style picker over the course of her summer internship. In this article, she reflects on her time at Figma: expectations, onboarding remotely, and managing a feature update from inception to launch.

Book “Designing in Figma”Designing in FigmaNew book

Archive