Tweets

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

Smarter default colors

Default Pencil and text colors are now smarter. When you draw or type, they are now black or white, depending on the background. Miggie shows this behavior in action.

Now in @figmadesign you can totally draw straight lines with the pencil tool while holding down the shift key!

But did you know that depending on the background when you start drawing with the pencil, it will auto adjust white to black and vice versa? Same when placing text! pic.twitter.com/i1mCFHjBcc
— miggi from figgi (@miggi) July 22, 2021

Drawing straight lines

Hold Shift to draw straight lines when using the Pencil tool in Figma and FigJam.

2/ Also live today — an easier way to draw straight lines with the pencil tool in Figma and FigJam. Hold Shift. pic.twitter.com/jQ7VLjMkA9
— Figma (@figma) July 22, 2021

Knockout shadow

By default, drop shadows are no longer displayed through transparent areas of objects. Check out this thread by Rogie on how this feature came to life.

Figma just rolled out a feature that allows you to turn off showing a shadow behind transparent areas. I'm ridiculously stoked about this because of what it means for turning designs into code.

Left: HTML shadows
Right: Figma shadows

🧶 A thread this little/big feature... pic.twitter.com/AgvnWL8UAa
— ˗ˏˋrogieˎˊ (@rogie) July 22, 2021

Damien Correll joins Figma as a new Creative Director

Previously, Damien was a Creative Lead at Material Design and Google Nest.

😍✨🎉

Could not be more excited about @damiencorrell joining us as creative director @figmadesign!!! Been looking up to his work ever since @Neobarnabas first told us about him many years ago. Can’t wait to work together soon! https://t.co/nuiMuSS6lG
— Noah Levin (@nlevin) July 9, 2021

Issue #44
Jul 18, 2021
#Backstage

Design potion

This one is from a few weeks ago, but another fantastic artwork by Vijay Verma.

Figma is not just meant for UI design or prototyping. It's a magic wand for the design wizard to design anything you want. Design Potion - purely made in @figmadesign. Available to collect as #NFT from @withFND. pic.twitter.com/aBL6FWzgQP
— vijay verma ᵍᵐ (@realvjy) July 3, 2021

Figma Community “magazine” concept

Ridd shares an idea of what a collaborative magazine made by a Figma community can look like.

Figma files are the single most exciting way to create and distribute content

So what if @figmadesign launched a "magazine" for the community delivered as a design file?

It would be interactive + educational + community-driven

Here's what I think it could look like 👇
— Ridd 🏛 (@Ridderingand) July 14, 2021

Issue #44
Jul 18, 2021
#Ridd

Cropping images

Luis shows a few ways to crop images.

Happy Monday folks, here are a few ways to crop images easier in @figmadesign:

• Double click whilst holding Option (Mac) / Alt (Windows)
• Hold CMD (Mac) / Control (Windows) and drag the handles
• Use shapes and boolean operations

Happy croppin' ✂️ pic.twitter.com/Pex2IcerVF
— luis. (@disco_lu) July 12, 2021

Joey Banks recommends Figma shortcuts

A few of his favorites to move a bit more quickly while working.

A few @figmadesign keyboard shortcuts ⌨️✨ that help me move a bit more quickly while working:

⇧A: Add Auto Layout (⌥⇧A to remove)
⌥L: Collapse layers
⇧⏎: Select parent (⏎ to select children)
⌥W/A/S/D: Align top/left/bottom/right
⌘K: Create link from text
— Joey Banks (@joeyabanks) July 12, 2021

Reminder: never use variants for different icons

Gleb is right – icons as variants can’t be previewed or searched. In fact, Figma doesn’t recommend using variants to group different icons either. If you have different sizes or versions of the same icon, then you could combine these as variants instead.

PSA reminder: never use variants for different icons in @figmadesign!

Use regular separate components to:
- Preview icons when swapping instances
- Search via name and icon description (bonus tip: add synonyms for easier search)#FigmaTip pic.twitter.com/4oGqs2GxIb
— Gleb Sabirzyanov (@gleb_sexy) July 7, 2021

Edit names on canvas

Now you can edit flow and frame names directly from the canvas. Just double-click the name and start typing.

Today at @figmadesign we shipped a fix for one of my longest standing pet peeves about the product — now you can edit frame names directly on the canvas! Just double click and start typing.

Thank you to Linda Zhang for making this happen! pic.twitter.com/iUqTmvl5dw
— Dylan Field (@zoink) July 13, 2021

Right and wrong ways to use Variants

Good thread by Ridd on creating variants from a single base component.

There's a right way and a wrong way to use variants in @figmadesign.

When used correctly, they can be the most powerful part of your entire workflow.

These are the 5 steps I do for every single component I create 👇
— Ridd 🏛 (@Ridderingand) June 20, 2021

Building a menu with nested components

Ridd shows how to build a menu component from multiple nested components.

Building complex nested components is one of my favorite parts of working in @figmadesign

I love seeing how people think about the building blocks!

So this is me peeling back the curtain and showing you exactly how I built this menu component below 👇 pic.twitter.com/2CvgBkPhyj
— Ridd 🏛 (@Ridderingand) June 24, 2021

London team officially moved into their office

Love the creative names for the rooms!

The @figmadesign London team officially moved into our office today

Our office are called Ziggy Stardust, Jumpin’ Jack Flash, Here Comes The Sun, Another Brick in the Wall, and Rocket Man 🚀 pic.twitter.com/dVO9sGIjkD
— luis. (@disco_lu) June 15, 2021

Issue #42
Jun 20, 2021
#Backstage

Figma’s new office in NYC

Figma opens their offices as the world is getting back to normal.

Yesterday we welcomed our first group of @figmadesign employees to our new office in NYC. All of them were required to be vaccinated to come to the office, it was magical to see everyone in person. pic.twitter.com/vjSeG9OHJ1
— Timadge (@timadge4) June 10, 2021

Issue #42
Jun 20, 2021
#Backstage

Hide or show the dot grid

Miguel with a nifty tip. (Makes me curious why it’s not in the menu?)

#FigJam Protip: Easily hide or show the dot grid with 'Command + /" and type "Show Dot Grid" to turn the dot grid on and off.

(Command + P on international keyboards)
(Ctrl + / or Ctrl +P) on Windows) @figmadesign pic.twitter.com/INjWcprr2L
— miggi from figgi (@miggi) June 8, 2021