Prototyping & Transitions. Custom easing curves. Managing a design system.
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
Powerful plugin for managing design systems. Design tokens, theme management, content collections, documentation, and access to tokens from GraphQL API.
Convertify Figma to Sketch
A new plugin from Figmatic for converting and exporting designs from Figma to Sketch with a single click.
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.