Part 2 - Creating the TOP HERO CARD in a Design System - Figma Tutorial
2K views · 2023-11-18
UI Design
🚀 Get 2 free months of Skillshare Premium & watch my design course for free: https://skl.sh/2TVhf8z
In this video, I will guide you through the process of creating the Hero Card for the Experience Listing. We will start by importing an image and setting it as a component. Then, we will create a variant by adjusting the aspect ratio and size of the component. Next, we will add icons and customize their colors for light and dark modes. Finally, we will fine-tune the layout and create a gradient background.
🚀 The Ultimate Guide to Become a Product Designer: https://learnproduct.design
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
01:05 Creating a Variant of the Image Component
04:44 Forcing Dark Mode Variants in Light Mode
10:52 Creating the Player component
17:36 Creating the Hero Card Component
22:22 Documenting the Hero Card Component
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #figma #variables
In this video, I will guide you through the process of creating the Hero Card for the Experience Listing. We will start by importing an image and setting it as a component. Then, we will create a variant by adjusting the aspect ratio and size of the component. Next, we will add icons and customize their colors for light and dark modes. Finally, we will fine-tune the layout and create a gradient background.
🚀 The Ultimate Guide to Become a Product Designer: https://learnproduct.design
🚀 Create an account on Mobbin for free:
https://mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
01:05 Creating a Variant of the Image Component
04:44 Forcing Dark Mode Variants in Light Mode
10:52 Creating the Player component
17:36 Creating the Hero Card Component
22:22 Documenting the Hero Card Component
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #figma #variables