Interactive Image Slider Gallery with Variables in Figma - 2023

Overview

Learn to build a dynamic image carousel slider in Figma using advanced prototyping techniques, string variables, and conditional logic in this 12-minute tutorial. Master the process of creating thumbnails, implementing components, managing properties, and incorporating variables to reference images for a fully interactive gallery experience. Follow step-by-step instructions from creating initial thumbnails through testing the final prototype, gaining practical knowledge of Figma's latest variable features for creating sophisticated interactive designs.

Syllabus

Introduction
Create thumbnails and images
Duplicate thumbnails
Add another image
Create components
Create thumbnails
Add properties
Change properties
Thumbnails
Duplicate Images
Create Variables
Assign Variable to Image
Add Prototype
Set Variable
Test