Component properties v2 are out of beta with the ability to bubble up and expose properties of nested instances. It’s also now possible to define a list of preferred instances for swapping. Great for selecting a subset of a larger icons library or working with card components.
13/32 Component properties: exposed nested instances
— Figma (@figma) March 28, 2023
The ability to bubble up properties of nested instances is now default turned on for everyone. pic.twitter.com/YMmyySqCLN
Honestly, I always assumed that SVG bugs are just a part of the game and will always be here — not a surprising conclusion when 49% of imported SVGs relied on buggy features. In retrospect, it was a silly assumption considering SVG is one of only a few open vector formats. In this fantastic thread, Figma engineer Lauren Budorick shows how much work went into detecting, analyzing, and fixing these bugs. I didn’t realize that luminance mask support was a part of this work as well, and Miggi is already exploring creative applications for composited motion visuals in prototypes.
Last spring my team at @figma finally took on an area that we've known has been a huge pain point for a long time: SVG imports. We would soon find out just how bad it was (bad!) and that we’d need to build a whole new feature in the process.
— Lauren Budorick (@lbudorick) March 28, 2023
“You can now more confidently approve library updates with a visual preview of the changes and the ability to apply them to individual instances and layers.” I don’t even know how I’ve dealt with the stress of accepting library changes sight unseen in the past.
20/32 Library update improvements
— Figma (@figma) March 28, 2023
Don't forget: You can now more confidentally approve library updates with a visual preview of the changes and the ability to apply them to individual instances and layers. pic.twitter.com/CMp1ExmZjt
While color and layer blend modes have the most noticeable previews, this update is a part of the larger initiative for adding previews to all settings. Previews were already added to Effects, and the team is considering supporting boolean ops, component props, and the font picker.
1/32 On-canvas preview
— Figma (@figma) March 28, 2023
Hover over design panel options to preview different settings and properties before committing to them.
(Font preview is in the works!) pic.twitter.com/4NiSj2r9Zl
My guess is we’ll see hanging punctuation in the wild more often now. (Good luck, developers.)
6/32 Hanging punctuation
— Figma (@figma) March 28, 2023
Preserve the flow of your text by letting punctuation, like quotation marks, hang outside of the text box. pic.twitter.com/xheJmZsYCa
The timing of this release is impeccable — just a couple of months ago WebKit added support for leading-trim CSS property to Safari Technology Preview (although other browsers are not rushing). For a deeper dive into why it’s important, see Leading-Trim: The Future of Digital Typesetting by Ethan Wang from Microsoft.
4/32 Leading trim
— Figma (@figma) March 28, 2023
Align and style your text just the way you want it by trimming that extra spacing. pic.twitter.com/ltSLeZXTzm
This way to monitor the use of system resources was around for a while, but it’s a nice reminder to check it if you’re working on a huge design file or a massive library.
Pretty cool (new?) @figma feature that I just stumbled on. If you turn on View > Resource Use then your Layers panel shows you how much memory each page is using.
— Kyle Hyams (@kylehyams) March 21, 2023
They also monitor the elements on each page🆒 pic.twitter.com/RKQgewviMA
The lack of precision in the gradient tool is an old annoyance, but as this tweet grew in popularity I’ve been quietly hoping that maybe the fix would make it to the Little Big Updates. Regardless, the replies provide a ton of smart workaround — distributing stops through double-clicking, nudging stops, using the Precise Gradients plugin, and even looking in the Inspect tab!
Hey @figma, can you show me the position values on here please? I don’t like having to eyeball 15%… pic.twitter.com/cWVLzqNAda
— Arix (@Arix_Ki) March 21, 2023
Jordan Singer shares what Diagram learned from participating in OpenAI Converge with early access to GPT‑4 and how they’re using it in Magician and Genius plugins.
as part of @OpenAI’s Converge we’ve been building AI design tools with access to GPT-4 @diagram over the past few months
— jordan singer (@jsngr) March 14, 2023
here’s what we’ve learned and how we’re using it 👇 pic.twitter.com/sSHUympi46
Fons Mans is back with a colorful poster tutorial.
Tutorial Thread!✨
— 10X Designers (@10x_designers) March 14, 2023
Learn how to create this colorfull poster with @figma in just a few easy steps.
Let’s dive in 👇 pic.twitter.com/u1GdVXVDvG
Vijay Verma wraps up his Figbruary challenge with a full list of 28 experiments he made last month.
It's Figma Friday Fun 😍
— vijay verma (@realvjy) March 17, 2023
From creating simple illustration to animation and faking 3D rocket in the space. Sharing all 28 @figma experiments with community file here ↓↓ pic.twitter.com/CnLUJ9JI5T
Luis keeps digging into different ways of structuring Figma libraries and styles. In this thread, he thinks through naming conventions on styles and explores the pros and cons of more abstract and specific naming conventions.
Here's another thread about managing Figma styles 🗂
— luis. (@disco_lu) March 16, 2023
It's pretty hard to know how far to push naming conventions on styles, and you can end up in some heavily nested folder structures if you're not careful
So let's take one component and work it out! pic.twitter.com/cO30LFzAd8
Dan Hollick with a fascinating thread on an optimal x‑height size and a visual arc.
Why are some typefaces harder to read than others at the same font-size?
— Dan Hollick 🇿🇦 (@DanHollick) March 16, 2023
Well, it has a lot to do with x-height but of course it's a bit more complicated than that: ↓ pic.twitter.com/QElNG1aq7q
Such a fun thread by designer Jakub Świadek on how the FigJam team redesigned the sticky note curl. See also another thread by Noah Finer on how it was implemented with CSS and SVG animations.
We're on a roll over here at @figma... we’re launching a redesigned sticky note curl today. Here’s why we’re excited about this tiny little design detail. pic.twitter.com/duFnHshOGc
— Jakub Świadek (@jakub_swiadek) March 16, 2023
Jon Moore is one of the creators who seized the opportunity provided by the paid resources on Figma Community and launched a collection of helpful design resources. Paying a few dollars for a high-quality asset to save a few hours of work is a no-brainer. Every Collection includes maps, calendars, social buttons, file types, slides, and charts.
🚀🚀🚀 LAUNCH DAY 🚀🚀🚀
— Jon Moore (@TheJMoore) March 7, 2023
I'm excited to launch the Every Collection for @figma!
A heap of resource files for those annoying things that no one likes to design in Figma (for the hundredth time in your design career).
Meet the collection below 🧵
Yes, please.
Designing in @Figma while clients watch has to be the most frustrating ever.
— Brett @ Designjoy (@BrettFromDJ) March 7, 2023
Figma should have a privacy mode for each frame that hides the frame from viewers while you're working on it, but remains visible to editors. Agree? pic.twitter.com/G7qBAK0qSd
The first installment of “Fridays with Fons”, where Fons Mans shows how to create and generate fun, geometric illustrations in Figma in just a few easy steps.
It’s time for the first edition of “Fridays with Fons”! ✨
— Fons Mans (@FonsMans) March 10, 2023
Learn how to create and generate fun, geometric illustrations in @figma in just a few easy steps.
Ready? Let’s dive in 👇#sponsored pic.twitter.com/2jHV76yp88
Luis shares a few tips on structuring library files. He recommends optimizing variants for searching and usage rather than maintenance, and suggests this file structure: Page → Section → Variant. Also, check out his other thread on naming and splitting your library files.
We spend a lot of time talking about component structure, but the library files themselves are often ignored
— luis. (@disco_lu) February 27, 2023
So what goes into structuring a good Figma component library?
Here are a few tips, hopefully a good starting point 📈 pic.twitter.com/2zL7xk9eSx
Patrick Morgan with tips for tidying your Figma account with a file thumbnail component.
Feeling like your @figma account could use some tidying? I know, I've been there.
— Patrick Morgan (@itspatmorgan) February 25, 2023
Here are the 8 steps I follow to build a file thumbnail component that's minimal, consistent, and scales: pic.twitter.com/iJhBEoK0Es
Nick Stamas is making a good point that Figma is uniquely positioned to create an AI assistant for designers, but instead of replacing them, it will be more like GitHub Copilot. “There’s one place where an enormous pile of UI data exists in a way that could be used to train a large neural network: Figma.”
Spoiler alert: AI isn't going to take your design job.
— Nick Stamas (@nickstamas) February 27, 2023
But there's one company that's sitting on a hidden mountain of data that could radically change the way products are designed. The rest are likely vaporware or toys.
Here's my prediction 👇