Tweets

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

Live design session with Clubhouse

Gumroad (which I love and use to sell my book) hosted a live design session using Figma and Clubhouse. What a great idea for gathering customer feedback in real time!

This afternoon we were able to do a live @gumroad design session on @joinClubhouse with @figmadesign. Real time customer feedback without scheduling 100 Zoom calls. Amazing! pic.twitter.com/13NGkyU6C0
— Jack Zerby (@jackzerby) February 17, 2021

Issue #34
Feb 28, 2021
#Using Figma

Figma is working on FigJam

What an exciting leak! “FigJam is a new whiteboard space where you can explore ideas with your team.”

Figma is working on FigJam — a new whiteboard space for teams pic.twitter.com/deaoTqtdcN
— Jane Manchun Wong (@wongmjane) February 19, 2021

Issue #34
Feb 28, 2021
#FigJam

What you can make with Interactive Components

Kelsey Whelan shows a few examples of really cool animations and interactions.

Look at what you can make with just 1 interactive component, 4 noodles, and 1 top-level frame 🎨 pic.twitter.com/J7RgTst5Ju
— Kelsey Whelan (@kelseymwhelan) February 25, 2021

Toggle Switch

Joey Banks creates a toggle switch as his first set of Interactive Components.

Creating my very first set of interactive components in @figmadesign. 🔥🎛️ pic.twitter.com/apIht8EpFb
— Joey Banks (@joeyabanks) February 26, 2021