US $19.97

Figma Bootcamp 1 - Learn Components Quickly

——   Created by Brian White

Share this course:

2h 12m
Lesson time
Skill level

More about this course

Give yourself an edge in the UI design world by learning the basics of components and how they can help your interactive design. Quickly create components (like symbols) in Figma that work for you by stretching for responsive design, build easy compositions, and edit on the fly. This class walks through the entire system of components, and how each are built in a step by step process. This class also goes deep into how to use components to speed up your User Interface Design process and easily create different variations of the same component. By breaking each component down into separate videos, you can quickly jump to components that you need help with and not get overwhelmed. This Figma beginner class will give you the tools to launch your User Interface Career.

This class dives into these breakout sessions:

  1. Menu components and setup.

  2. Form components and how to build master form components.

  3. Client changes - quickly shift design by editing master components.

  4. Buttons - master responsive button components and secondary buttons with different states.

  5. Floating menu - easily change the original menu into a floating menu by editing components.

  6. Button with icons - building buttons with multiple icons and active states ie: social media buttons.

  7. Selection components - radio buttons and check boxes with active states. 

  8. Tab components - using responsive components to easily add new tabs and show the active state.

  9. Tables - using components to speed up your design build and dynamically change the content. 

  10. Block-quote callout - How to make a block-quote design with three different areas and how to make it responsive to the content. 

  11. Pricing tables - using 1 component to build out a quick 3 column pricing table that shifts to your design.



The course project

Make a web design or web application page using components and the skills taught on this class. 

Follow Brian's process to build out a component filled web page. Some questions to look at during your build:

  • What components do you use the most?
  • Are there more questions you would like answered? 
  • How do you save your component systems?

Wherever you are in the process, share your work, and questions here. I can’t wait to see what you come up with! 


11 Lessons

17 mins
Menu Components and Setup
28 mins
Form Components and How To Build Master Form Components
23 mins
Buttons – Master Responsive Button Components and Secondary Buttons and More
3 mins
Client Changes – Quickly Shift Design by Editing Master Components
8 mins
Floating Menu – We Change the Original Menu and Build a Floating Menu
free preview
9 mins
Button With Icons – Building Buttons With Multiple Icons and Active States
8 mins
Selection Components – Radio Buttons and Check Boxes With Active States
7 mins
Tab Components – Using Responsive Components To Easily Add New Tabs
14 mins
Tables – Using Components To Speed Up Your Design Build and Dynamically Change
4 mins
17 mins
Pricing Tables – 1 Component To Build Out a Quick 3 Column Pricing Table

About the instructor

Brian  White
Brian White
  • 5 courses

Brian is the creative director of Brian White Design in Lawrence. He directs the studio’s strategic and creative growth while also serving as senior designer …

Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 2h 12m of on-demand video
  • Have a coupon?
  • Checkout