Tweets
How Figma builds products
Lenny Rachitsky kicked off a new series on building products by interviewing Figma’s CPO Yuhki Yamashita. Learn about their planning process, how they use OKRs, their design review meetings process, org structure, lessons learned, and more in this Twitter thread, or in an excerpt from his subscriber-only newsletter.
I’m kicking off a new series where I share how the best product teams build product.
— Lenny Rachitsky (@lennysan) November 15, 2022
First up, @Figma.
I sat down with @yuhkiyam to learn about their planning process, how they use OKRs, their design review meetings process, org structure, lessons learned, and more.
Read on: pic.twitter.com/wnRlS9s5sr
Mini-bundle of Editor updates
Marcin Wichary introduces twelve editor improvements. Numeric scaling is the obvious highlight and something many of us have been waiting for, but a new dialog for creating Styles and preserved formatting when copying/pasting text are great too!
Pssst. Ok.
— Marcin Wichary (@mwichary) November 14, 2022
So our product marketer @pseullah is distracted, and I thought I could just go ahead and quickly launch a few @figma improvements before she comes back!
(And also share some secrets.)
👇 pic.twitter.com/O90d2J1OWQ
text-to-figma
While it’s easy to dismiss this and other similar projects as impractical toys, I believe they’re giving us a glimpse into the future of creative tools. Years ago every project started as a blank canvas, while now we often build on a foundation of existing design systems. I can imagine that one day the AI will generate the first iteration of the UI based on the existing design system, patterns, tone, and voice of the project.
Introducing text-to-figma: build and edit @figma designs with natural language!
— Jay Hack (@mathemagic1an) November 7, 2022
Join the waitlist here: https://t.co/81KKqnZ3HO
1/n pic.twitter.com/Bw3sw31HaM
Infinite loading circle animation
Jan Mraz with a short video tutorial.
After some time, I'm back with the Figma tutorial. Today it's all about infinite loading circle animation.
— Jan Mraz - UX / UI Designer (@janm_uiux) November 10, 2022
Thank you for your huge support of my UX/UI design content! 💜 pic.twitter.com/i0vk7UoifI
How to draw a rocket icon
Steve Schoger with a new step-by-step tutorial. See also another one on drawing a briefcase.
✨ How to draw a rocket icon in @figma 🚀 pic.twitter.com/QWFd4BZRtZ
— Steve Schoger (@steveschoger) November 7, 2022
Hover animation
A really cool hover effect, and a smart way to achieve it.
Made this button in @figma with no code pic.twitter.com/0TpKVYE0DF
— Nikita (@nikitakoshi) November 7, 2022
Killer Auto Layout tutorial
MDS is killing it with a killer Auto Layout tutorial. Who cares if it’s a bit late for Halloween!
I made a killer auto layout tutorial for @figma. There are three critical things you need to understand in order to use it efficiently... pic.twitter.com/x17cnAg9az
— MDS (@mds) November 8, 2022
Realistic textures with Noise & Texture plugin
Vijay keeps teasing Rogie’s new plugin Noise & Texture. You’ll notice that it’s currently in beta and requires a code to unlock, but if you look closely at this thread you may find one.
Last night, when I was bored in a meeting 😌, I made some noise in @figma using the NT plugin @rogie. With this pluign we can create cool metal, wood, and many other texture by simply combining with layer mode. Shared some tips below 🧶 pic.twitter.com/CGEw0ACebE
— vijay verma •ᴗ• (@realvjy) November 8, 2022
“It’s in Figma.”
This tweet by the design company R/GA made rounds last week. I definitely enjoy seeing all the pushback in the replies. In my Figma files the ratio of participating designers to non-designers is somewhere between 1:5 and 1:20, depending on the project — a night-and-day difference from the old days.
What they say: "It's in Figma."
— R/GA (@RGA) November 10, 2022
What they mean: "I dare you, a nondesigner, to open Figma and figure out what the hell is going on. We both know that is not going to happen. So why don't you leave me alone and you can see it when it's finished."
Mural in Figma’s NYC office
Love when folks share some of the Maker Week projects! Here is a beautiful finished mural.
maker week mural for @figma NYC in progress 🦋 pic.twitter.com/Ml8dasV1du
— dipa (@dipalua_) November 2, 2022
Scare a designer with a screenshot
I had a few good laughs from replies to this Halloween tweet.
Scare a designer with a screenshot 👻
— Figma (@figma) October 31, 2022
Fingerprint icon
Steve Schoger shows how to draw a fingerprint icon using the full power of Figma’s vector networks.
✨ How to draw a fingerprint icon in @figma pic.twitter.com/s6iKbz94RF
— Steve Schoger (@steveschoger) November 3, 2022
Controlled head prototype
As always, Vijay Verma pushes the limits of Figma with a fun experiment based on Auto Layout and an animated prototype. Great to see how easy it was to build and control.
Another fun experiment using @figma prototype. I made this small head rig last week. Creating this was lot of fun 😍. By using cavas as masks and combining with autolayout, I created this so quickly. Sharing behind the scene below 🧶 pic.twitter.com/funSf3WtuD
— vijay verma •ᴗ• (@realvjy) November 1, 2022
Customize the anchor points for FigJam connectors
Clara Ujiie with a nifty FigJam trick.
TIL you can customize the anchor points for your FigJam connectors by holding cmd while you drag the connector. ty @lbudorick pic.twitter.com/yvWOgjdlvP
— Clara Ujiie (@claraujiie) October 31, 2022
10 Figma Must-Know Design System Things
A popular thread on some of the key Figma features for use in a design system.
10 @figma must-know design system things
— Nitish Khagwal ✨ (@nitishkmrk) October 31, 2022
thread 🧵 ... pic.twitter.com/bPVQb2ieG0
Fixing broken paths
Gleb Sabirzyanov suggests a few approaches for fixing broken vector paths and shapes.
❓ How to fix an issue in Figma when you try to outline, flatten, or union a shape and it disappears or becomes broken.
— Gleb Sabirzyanov (@gleb_sexy) November 4, 2022
A thread of methods that *may* help solve this @figma glitch: pic.twitter.com/dtZmJ5jMXo
Boolean Operations
Dan Hollick with another nerdy thread, this time explaining boolean operators.
Did you know these are called Boolean Operations?
— Dan Hollick 🇿🇦 (@DanHollick) November 2, 2022
That's because they use booleans to determine which part of the shapes should be visible.
Let me explain 👇 pic.twitter.com/oOo3NhRnQW
Figma product design on-site
Seems like Figma’s design team had a fantastic time together in their San Francisco hub.
In SFO, looking @ the misty bay & thinking that if you told college Cai who was delivering calzones & working 4 jobs that I'd be planning events across the country for a remarkable group of designers, I wouldn't have believed you.
— cai-o-lantern 🎃 (@igobycai) October 27, 2022
Highlights re: @figma product design onsite...
Happy Jam-o-ween
I’m indifferent to the Halloween celebration, but the fact that the Figma team took the time to add so many fun touches across both apps makes me happy.
working @figma is working at a company where anyone can come up w/ a crazy idea and the team says "hell yes!" and makes it reality
— Mihika Kapoor (@mihikapoor) October 28, 2022
HAPPY JAM-O-WEEN to all, we hope you enjoy this spook-tacular experience as much as we do👻🎃
brought 2 FigJam files near u
keep scrollin’ for BTS pic.twitter.com/AOjJeqkPSz
That’s So Hot! Figma Fridays
This week, Designer Advocate Mal talks about Taylor Swift Midnights Cover Template, Halloween Retrospective Template, Hidden Kittens, and Calendar.
It's FRIDAY! Time for 🔥🔥That's So Hot!🔥🔥 An album artwork template? Halloween vibes 🎃! Kittens 🐈 and Calendars 🗓️ pic.twitter.com/Vu5npj3zJj
— Mal (@mdeandesign) October 28, 2022