Tweets

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

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

Criss-Cross Game

Miguel builds a criss-cross game with a single frame and Interactive Components.

Interactive Components in Figma bring so much potential for prototyping interactions.

Sign up for the beta here! https://t.co/d4xztICaFA

This is one frame 👇🏽 pic.twitter.com/XKmgEr4FKj
— miggi from figgi (@miggi) February 25, 2021

Creating overlapping animations

Miguel shows how to create bouncing circles animation with different timings.

Hi everyone! Wanted to share something I'm excited for w/ interactive components in @figmadesign, overlapping animation!

Here I have three different interactive components using delay interactions to make bouncing circles with different timings. Let me know what you think! pic.twitter.com/xg6Dy3zmCP
— miggi from figgi (@miggi) February 26, 2021

Why Interactive Components are important for design system teams

See how Interactive Components can dramatically reduce the number of connections you create.

Interactive components are here my friends.

Here's a quick run through of what they mean and also why it's important for design systems teams.

🍜

Sign up for the beta here: https://t.co/PYXoKapYVL pic.twitter.com/dZdqJ1fhDd
— luis. (@disco_lu) February 25, 2021

New macOS icon

Ryhan shows the process of creating a new Big Sur-ready icon for Figma desktop app.

Small update — today we’re rolling out a new macOS icon that’s designed to feel at home on Big Sur. pic.twitter.com/yWRPwslpkC
— Ryhan (@ryhanhassan) February 25, 2021

3D illustrations

Timo Lins makes impressive 3D illustrations with Figma components.

I suck at 3D. But thanks to @figmadesign, I'm able to create illustrations like this. pic.twitter.com/6JqeDew2G0
— Timo Lins 🎨🛠 (@timolins) February 10, 2021

Issue #33
Feb 19, 2021
#Made in Figma