Creating the Most DYNAMIC Buttons in Figma
126.3 هزار بار بازدید -
3 سال پیش
-
https://designcourse.com - Learn UI/UX like a rockstar!
-- Today, we're going to take a look at creating highly dynamic and flexible buttons within Figma. I'm talking about smart animate micro-interactions, variants with boolean values, masks, the ability to quickly replace icons within variant-based button components & more..
Here's that other video I referenced:
How to design buttons in Figma // Use...
The before and after .fig project files:
https://coursetro.s3.amazonaws.com/st...
(Extra and drag these files on top of the Figma interface with your project view)
0:00 - Introduction
0:59 - DesignCourse
1:36 - Designing the Button
3:27 - How flexible is it?
5:29 - Preparing a Hover State Animation
7:30 - Creating the Component
8:10 - Creating the Variant
8:50 - Defining the Variant Properties
10:01 - Prototyping the First Variant
10:30 - Creating a Button without the Icon
14:00 - Dynamic Icons
16:28 - Final Thoughts
Let's get started!
#figma #buttons #dynamic
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: Twitter: designcoursecom
Join my Discord! Discord: discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
-- Today, we're going to take a look at creating highly dynamic and flexible buttons within Figma. I'm talking about smart animate micro-interactions, variants with boolean values, masks, the ability to quickly replace icons within variant-based button components & more..
Here's that other video I referenced:
How to design buttons in Figma // Use...
The before and after .fig project files:
https://coursetro.s3.amazonaws.com/st...
(Extra and drag these files on top of the Figma interface with your project view)
0:00 - Introduction
0:59 - DesignCourse
1:36 - Designing the Button
3:27 - How flexible is it?
5:29 - Preparing a Hover State Animation
7:30 - Creating the Component
8:10 - Creating the Variant
8:50 - Defining the Variant Properties
10:01 - Prototyping the First Variant
10:30 - Creating a Button without the Icon
14:00 - Dynamic Icons
16:28 - Final Thoughts
Let's get started!
#figma #buttons #dynamic
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: Twitter: designcoursecom
Join my Discord! Discord: discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
3 سال پیش
در تاریخ 1400/08/14 منتشر شده
است.
126,341
بـار بازدید شده