Category:

Tutorial

Duration: 1:21:47

44,556 views

1,629

► Download Figma UX & UI kits from Envato Elements: https://elements.envato.com/graphic-templates/ux-and-ui-kits/compatible-with-figma?utm_campaign=yt_tutsplus_FfeuWbZSRj4&utm_medium=referral&utm_source=youtube.com&utm_content=description

Components in UI design are regular elements, like buttons or forms, and they can be reused multiple times throughout the design process. Working with Figma components means you don’t need to recreate an element each time you need one; you can reuse components from the library. Any changes you make to the main component are then passed down to all the instances within your design.

In this Figma components tutorial, you‘ll learn everything you need to know about using components in Figma.

0:00 Introduction
4:29 Creating one or more components
10:38 Main components vs. instances
17:51 Making changes to components and instances
28:06 Swapping component instances
34:39 Naming and organizing components
47:00 Using component variants
1:00:26 Working with component properties
1:13:31 Prototyping with interactive components

Resources:

• Source files: https://github.com/tutsplus/Figma-Components-From-Zero-to-Hero/archive/refs/heads/main.zip
• Figma: https://figma.com/
• Icons: https://iconset.io/set/ionicons, https://fontawesome.com/
• Cryptocurrency logos: https://cryptologos.cc/

► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_FfeuWbZSRj4&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read more on How to Turbocharge Your Components With Figma Variants on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/turbocharge-components-with-figma-variants--cms-36130?utm_campaign=yt_tutsplus_FfeuWbZSRj4&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_FfeuWbZSRj4&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_FfeuWbZSRj4&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -