Tweets

Auto Layout order

Speaking of Auto Layout, this tweet by Rasmus Andersson (Figma’s Staff Designer in the past) and the following discussion in replies provides an interesting look into why the items in an Auto Layout go backward and why this probably won’t change soon.

(Now that I'm no longer working at Figma I can do this:)

Hey @figmadesign this is _so_ confusing. Can we plsss reverse the direction? pic.twitter.com/B0mj8tSUtO
— Rasmus Andersson (@rsms) March 30, 2021

Create new projects and files from the team browser

Miggi from Figma points to another small improvement shipped as part of this release.

Me, finding more things that I had no idea @figmadesign snuck in the release today... like being able to create new projects and files from the team browser. 👀 pic.twitter.com/d7OpCZTRYu
— miggi from figgi (@miggi) March 31, 2021

Using Interactive Components & Variants to Create a Segmented Control

Joey Banks with a quick demo.

Using Interactive Components & Variants in @figmadesign to create a quick segmented control. ↔️✨ pic.twitter.com/VEfAxc9PG7
— Joey Banks (@joeyabanks) March 15, 2021

Making Pencil tool a little more interesting

Steve Ruiz shows a plugin he is working on and explains the process. Looks really cool!

making @figmadesign's pencil tool a little more interesting ✍️👀 pic.twitter.com/cbQua4ZMDT
— Steve Ruiz (@steveruizok) March 7, 2021

Issue #35
Mar 14, 2021
#Plugins

Design and preview at the same time

Great tip from Rogie on designing zoomed-in and previewing work in actual size at the same time.

Quick #FigmaTip for y'all. Ever want to design zoomed in AND preview the design at 100% at the same time?

1. Cmd/Ctrl + Shift + N to create a new desktop app window
2. Cmd/Ctrl + . to hide the UI on your preview window
3. Arrange your windows

Happy designing/previewing! pic.twitter.com/Bu33RLy0vG
— ˗ˏˋrogieˎˊ (@rogie) March 3, 2021

Issue #35
Mar 14, 2021
#Rogie King

UFO game

Pablo Stanley explains how to create a simple UFO game.

Side-scrolling “game” of a UFO that flies over the city using component interactions in @figmadesign. It moves ⬆️ and ⬇️ with the arrow keys and shoots lasers with a spacebar 🛸

(the vid doesn't explain the lasers cuz of twitter's time limits)

File: https://t.co/DwdyVEpeVy pic.twitter.com/EktLFyd0ha
— Pablo Stanley (@pablostanley) March 6, 2021

Issue #35
Mar 14, 2021
#Pablo Stanley

The FigMatrix has you

Cool illustration and background animation made in Figma using the new Interactive Components.

The FigMatrix has you. Illustration and background animation done in @figmadesign using the new Interactive Components prototyping feature! If you have the beta, download and run it here:https://t.co/gPqCF1LFrq pic.twitter.com/CBSnSlUMgG
— Joey 🙃 (@mrhammn) March 1, 2021

Minesweeper

Any list of games won’t be complete without a Minesweeper.

🔥Here's a fresh new experiment I made using 'Interactive components' in @figmadesign...

A fully playable version of MINESWEEPER as a Figma Prototype!! 😱
Even with a working (mostly) timer.

Try it out:https://t.co/F0AxhM4JkG #InteractiveComponents #Experiment #Design #Figma pic.twitter.com/5rfCKyzEPc
— Dave Williames (@DavidWilliames) March 2, 2021

Sudoku

Fully working Sudoku game made by Dave Williames. (Also see as a Community file.)

Started playing around with the beta of 'Interactive Components' in @figmadesign...

I managed to create a fully working game of Sudoku as a Figma Prototype 🔥
You even enter the numbers via your keyboard! 🤯

Try it out: https://t.co/qumffbs70A pic.twitter.com/oGUBQgWjro
— Dave Williames (@DavidWilliames) March 1, 2021

Tree List

Building a collapsible tree list with Interactive Components, Variants, and Overrides.

✨ For anyone interested to see how I built this, I published my sample file to the @figmadesign community. The example includes how to use variants, nested variants, and interactive components while persisting overrides.

👉 Figma File: https://t.co/7uVxmlBAnq https://t.co/Tzs8cm3sd9 pic.twitter.com/bbitoLWPM4
— Miguel Solorio (@miguelsolorio_) March 2, 2021

“Navigate to” connections convert to “Change to”

Love Figma’s attention to detail.

A small but mighty detail: `Navigate to` connections between components automatically convert to `Change to` when combining as variants. Shoutout to @silastsui for adding this! @figmadesign #interactivecomponents pic.twitter.com/Ua2gjibAsB
— Anthony DiSpezio (@adispezio) March 6, 2021

Issue #35
Mar 14, 2021
#App Updates

Before and after Interactive Components

Speaking of switches, check out this comparison of before vs. after by Joey Banks.

The rough amount of screens it took to create this prototype *before* Interactive Components in @figmadesign versus the *single screen* it takes now... 🔥 pic.twitter.com/iMToTNlgHW
— Joey Banks (@joeyabanks) March 2, 2021

Creating a pixel art grid

Pablo Stanley builds a simple pixel art editor. (And here is another take with a color picker.)

Short tutorial creating a pixel art grid using the new interactive components from @figmadesign pic.twitter.com/o9iFaqHR5E
— Pablo Stanley (@pablostanley) March 4, 2021

Figma for Classic Mac OS

Fun project by Wesley van Breukelen. (I only wish pull-down menus looked right!)

Had some fun playing with Figma interactive components, variants and auto layout. ^^ @figmadesign pic.twitter.com/OII57Ggvcz
— Wesley (@Weszelnl) March 3, 2021

A list of cool things made with Interactive Components

Rogie compiled a giant list of cool demos and experiments.

Ok, wow. Figma released interactive components a few days ago it is already blowing my mind what you all have been able to make. I compiled a list of all the cool things y'all are making , here:

🧵
— ˗ˏˋrogieˎˊ (@rogie) March 1, 2021

Figma is working on Bulleted Lists

At this point, we all probably have built our own Auto Layout components for bulleted lists, but it still would be nice to get the real thing.

Figma is working on Bulleted Lists pic.twitter.com/tq0gKyLoXn
— Jane Manchun Wong (@wongmjane) March 8, 2021

Figma is working on voice chat

Makes so much sense. Figma is going after all collaborative tools.

Figma is working on voice chat pic.twitter.com/6IHmkU2n6L
— Jane Manchun Wong (@wongmjane) March 7, 2021

Issue #35
Mar 14, 2021
#Collaboration

A few photos of Figma HQ

On her 1st anniversary at Figma, Kelsey Whelan shares a few photos of their cool office.

Today's my 1 year @figmadesign anniversary! Feeling grateful for all my talented, kind, and playful coworkers who filled this past year with fun despite the madness.

Also, I only got a few weeks in the office but look at how beautiful it was 😭 pic.twitter.com/CXBWut79PW
— Kelsey Whelan (@kelseymwhelan) February 18, 2021

Issue #34
Feb 28, 2021
#Backstage

Using “Set Default Properties”

Miguel shows how to use “Set Default Properties” preference to style your new diagram arrows.

Super Quick Bonus @figmadesign #FigmaTip Friday ... "Set Default Properties" to keep your diagram arrows going as you want them styled —great for working on the fly a little faster. pic.twitter.com/YPQGpP4w5L
— miggi from figgi (@miggi) February 19, 2021

Issue #34
Feb 28, 2021
#Miguel Cardona

Segmented Control component

Joey Banks build a Segmented Control component using Auto Layout, Variants, and hidden layers.

Using Auto Layout, Variants, and hidden layers to create a Segmented Control component in @figmadesign. 🎛↔️ pic.twitter.com/U53IPDcLay
— Joey Banks (@joeyabanks) February 17, 2021