Tweets

Figma is a… design tool?

Anthony DiSpezio shares a fun experiment connecting pose detection and Figma plugin API.

*repeats to self*

Figma is a design tool
Figma is... a design tool
Figma is a... design tool? pic.twitter.com/RjKtUpWVeY
— Anthony DiSpezio (@adispezio) September 10, 2021

“Slot” components

Ridd shows how to use “slots”, placeholder components that are part of larger organisms or templates. They are intentionally empty so that they can be replaced with a local component.

"Slot" components are one of the best ways to save time as a product designer

They can be tricky at first, but once you wrap your head around the right way to use them...

They become one of the most powerful tactics in @figmadesign👇 pic.twitter.com/wdIvmr196H
— Ridd 🏛 (@Ridderingand) September 7, 2021

First day at the new Figma office

Figma moved to the new office in SF, and it looks stunning! Love all the photos coming from the Figmates — one, two, and three.

First day at the new @figmadesign office!! What a beautiful space filled with color, plants, and personality 😍 pic.twitter.com/PrKfdf93rp
— Madeleine Lee (@madleeme) August 24, 2021

Issue #47
Sep 6, 2021
#Backstage

Building a form component

Ridd shares a detailed guide to building a customizable and flexible form component.

I’ll never build a form in @figmadesign the same way again…

⁰⁰It took me countless tries, but I think I’ve finally created a system that is flexible and doesn't result in variant overload 💪

Here's a 5 step walkthrough 👇 pic.twitter.com/Zl5C8odCmI
— Ridd 🏛 (@Ridderingand) August 26, 2021

Exporting P3 color space PDFs from Figma?

Interesting discussion about exporting assets with a Display P3 color space from Figma. I wasn’t familiar with Export PNG with Color Profile plugin (see below) or an option of assigning an ICC profile to the exported PDF.

I’d try this:
1. Setup your macOS to use P3 (display)
2. Setup Figma (desktop app, main menu) to use “unmanaged” color (= display space)
3. Assign P3 ICC profile to output PDF
— Rasmus Andersson (@rsms) September 3, 2021

How plugins and widgets were built

Bersabel Tadesse, Product Manager at Figma, shares behind-the-scenes of adding plugins and widgets to FigJam.

I’m extremely proud of what we announced today @figmadesign—introducing plugins & widgets in FigJam, our second product, is a step-function change to our developer platform. Big ol’ thread on the journey of how we got here 🌀 https://t.co/dYfaw35vxO
— bersabel (@brsabel) August 25, 2021

Behind-the-scenes look at building a design system

Ridd shows his process for creating responsive and customizable templates.

Ready for a behind-the-scenes look at one of my favorite systems I've ever built in @figmadesign ?

Of course you are (it'll be fun) 👇 pic.twitter.com/iiRmDdcc5q
— Ridd 🏛 (@Ridderingand) August 8, 2021

Use an IconWrapper to nest icons in your components

A smart way to resize icons without having to detach components, hide layers, or add variants.

Ready for a @figmadesign pro tip?

Use an `IconWrapper` to nest icons in your components.

That way you can always resize your icons without having to detach components, hide layers, or add additional variants.

Here's how it works 👇 pic.twitter.com/rZDEoihWgs
— Ridd 🏛 (@Ridderingand) August 15, 2021

Stuff I wish I knew in Figma when I started

Rogie asks for great tips, and the community delivers in replies.

I’m creating a resource for y’all on stuff I wish I knew in Figma when I started. Can you throw me your favorites?
— ˗ˏˋrogieˎˊ (@rogie) August 4, 2021

Reducing memory usage and file bloat in Figma

Great advice on improving Figma’s performance from Ana Boyer.

🧵Things to know about reducing memory usage and file bloat in Figma:
— Ana Boyer (@_AnaBoyer) August 20, 2021

Issue #46
Aug 22, 2021
#Using Figma

Illustrating with components

A cute illustration built from components.

illustrating with components is magic @figmadesign pic.twitter.com/qE9qRq9c2C
— Zack Davenport ✌ (@mrdavenport) August 14, 2021

Issue #46
Aug 22, 2021
#Made in Figma

Presenting responsive logos

Really cool way to use Figma and Breakpoints plugin to show logo adapts to different spaces.

I love how @figmadesign + Breakpoints make it REALLY easy to present responsive logos! 💪 Still trying to finalize my lockups 🙃 pic.twitter.com/Ae4acBS6YD
— Jelvin  (@jlvnbs) August 10, 2021

Figma Society

What started as a Twitter thread with the following suggestions resulted in a list of Figma experts who post educational and useful Figma-related content. Check it out and subscribe!

Issue #46
Aug 22, 2021
#Community

Plugin parameters

Plugin parameters (currently in beta) provide a faster way to build more powerful plugins by using quick actions to accept user input, eliminating the need to create your own UI. Both plugins I built in the past don’t have any UI, so this would be a great way to easily add some configuration options.

But wait, there's more! Today we’re also releasing a faster way to build more powerful plugins.

With plugin parameters you can use quick actions to accept user input, eliminating the need to create your own UI.

Check out some examples to start building: https://t.co/EvTh3X02r2 pic.twitter.com/ahVtd7BwH9
— Figma (@figma) August 17, 2021

How I made over $33,000 on the Figma plugin

Matt Wierzbicki on how he created a Figmaster plugin without writing any code.

How I made over $33,000 on the @figmadesign plugin without writing a single line of code 👈

Read in the thread below 🧵 pic.twitter.com/LttKV07WEP
— Matt Wierzbicki (@matsugfx) July 22, 2021

Figma Mirror in Safari and lightweight Figma Viewer

Rasmus Andersson shares a few hidden Figma tips. His second tip on adding viewer=1 to the URL query part to load a file very quickly in Figma’s lightweight “viewer” renderer is something I may use in the future.

Try https://t.co/RWZ0T90aQr in safari. The iOS app is really just a web view loading that. So, likely iOS bit rot 🤷
— Rasmus Andersson (@rsms) July 22, 2021

Use component descriptions

Ana Boyer with a thread of multiple ways to use descriptions to improve your team organization and collaboration.

Figma Tip! Descriptions are some of the easiest and oftentimes overlooked ways to improve your team organization and collaboration. Here are some ways you can use these to your advantage:
(Thread)
— Ana Boyer (@_AnaBoyer) July 22, 2021

Custom note component for discussions

Love the idea of using custom notes instead of built-in comments for more permanent comments.

Here's how we use a custom internal note component in @figmadesign at Bonfire. With a few customization options (putting your name on it, picking a color, and setting a note type), they can become a flexible tool that makes collaboration easy in larger teams.

🧵👇 pic.twitter.com/9CVV7Rqiou
— Dan Strogiy (@dan_strogiy) July 20, 2021

Versioning components using variants

Greg Huntoon came up with a great approach for versioning components. Love how elegant and easy to use it is. Don’t miss the video at the end and the discussion in the comments.

I think I've solved how to version components in @figmadesign using variants. Here's to hoping for a seamless transition as we embark on updating a wide swath of our DS components to v2.

Ran my ideas by @negativespaceca, he +1'd the approach. It's working. Maybe a video, soon... pic.twitter.com/kbcWWLZ8jV
— Greg Huntoon (@GregHuntoon) July 23, 2021

Plugin API to write prototype interactions

This update allows plugins to create new prototype interactions in the editor. Check out a code sample by Anthony DiSpezio.

We’ve updated our Plugin API to make reactions writable. Now you can build plugins to automate the prototype creation process or modify interactions in bulk.

Check out @adispezio's code example to get started. We can’t wait to see what you create! https://t.co/Q9KOnXwzz3 pic.twitter.com/fdoyNbKYcu
— Figma (@figma) July 27, 2021