# @figma on YouTube

- **Type:** Video
- **Original URL:** https://youtube.com/watch?v=q_o7cSpjt78
- **Gondola URL:** https://gondola.cc/posts/73336934-figma-youtube
- **Thumbnail:** https://img.gondola.cc/tr:w-,h-,fo-auto/postThumbnails/524f3fd47f.jpg
- **Posted:** 2024-06-05T16:00:50.000+00:00
- **Account Owner:** Figma (@figma) — https://gondola.cc/figma

## Caption

Figma is free to use. Sign up here: https://bit.ly/3msp0OV

In this two part series, we're using variables to build an advanced prototype of an interactive, configurable volume bar.  Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. If you haven't already, check out part 1 of the series here: https://youtu.be/1LNfnQjAxus.

In this second video, we're going to add more functionality to our volume bar in a way that will allow it to be easily edited, customized, and even reused across other designs.

To follow along, grab a copy of the design from the community file here: 
https://www.figma.com/community/file/1301324459782928636/prototype-with-variables?searchSessionId=lw5gh2hx-jgp9um3myk

Check out the written mini projects from the Figma Help Center:
- Create an onboarding flow with advanced prototyping: https://help.figma.com/hc/en-us/articles/18888057155991
- Create a loading animation: https://help.figma.com/hc/en-us/articles/18892560291351
- Create a responsive card with auto layout and constraints: https://help.figma.com/hc/en-us/articles/18894664907287

To learn more about the advanced prototyping features, check out our video tutorial on advanced prototyping (https://youtu.be/VEuwKJAz7Jg), the Help Center article (https://bit.ly/46r2JsX), and play with the Figma community playground file (https://bit.ly/3JhgTT9) created by our Designer Advocates. 

If you're new to variables, check out the "Intro to variables" video tutorial here: https://www.youtube.com/watch?v=1ONxxlJnvdM 

If you're new to prototypes in Figma, check out the prototype tutorial playlist here: https://bit.ly/3NC30l7

00:00 Intro
00:48 Set up the icon variables
03:36 Prototype the plus button
06:12 Prototype the minus button
07:38 Set up the alert variables
09:18 Prototype the buttons
10:23 Revisions
11:20 Outro
____________________________________________________

Find us on ⬇️
X (formerly Twitter): https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

## Stats

- **Views:** 5,061
- **Likes:** 155
- **Shares:** 0
- **Comments:** 12

## Tags

figjam, config, tips, tutorial, designsystems, design, figma, nothinggreatismadealone

---
Copyright (c) Gondola