Figma Workshop: The Basics
This is a workshop from Girls Who Code at UNC Charlotte where we walked through learning the basics of Figma and creating a simple website prototype. This workshop is paced for those who want to follow along. Feel free to speed things up or skip around with the time stamps below.
Check out our links at the bottom for GWC resources.
Workshop Guide: https://bit.ly/3noAPJO
0:00:48 What is Figma
0:01:06 About the Guide
0:02:29 Getting an Account
0:03:14 Interface Tutorial
0:10:20 Installing Plugins
0:12:44 Getting Started
0:16:14 Text, Shapes, & Layers
0:22:15 Exporting & Inspecting
0:24:25 Copy & Pasting
0:26:01 Using Unsplash Images
0:29:17 Using Iconify
0:32:30 Grouping & Components
0:37:11 Using Lorem Ipsum
0:46:03 Adding Links & Transitions
0:50:37 Testing Your Prototype
0:51:45 Fixed vs Scroll Objects
0:53:48 Imitate Text Box Selection
1:01:40 Images Inside of Objects
1:03:56 Creating Hovering Effect
Want to know more about GWC?
Check out our website: https://gwc-uncc.github.io/myportfolio/
Workshop Creator & Facilitator: Ashley Harmon
Please note: There are many shortcuts and ways to do certain things, so please do explore those further if you're interested. This was my first time teaching a Figma workshop (and I do not claim to be a Figma pro), so most shortcuts were skipped in hopes of keeping it simple.