Figma components: the basics to creating robust components
Figma components are extremely powerful and combined with the new auto-layout we can do some real magic with them. In this video I look at everything from the very basics of Figma components, to building out a robust form component using sub-components and auto layout, covering everything from creating, naming, and organizing your components along the way.
/// Timestamps
00:00 - Intro
02:20 - Creating the base
03:55 - auto-layout basics
04:58 - creating a component
06:15 - component instances
10:25 - creating different states
14:55 - naming and organization
19:47 - more complex components with auto layout
31:25 - using our component
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
---
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Видео Figma components: the basics to creating robust components канала Kevin Powell
/// Timestamps
00:00 - Intro
02:20 - Creating the base
03:55 - auto-layout basics
04:58 - creating a component
06:15 - component instances
10:25 - creating different states
14:55 - naming and organization
19:47 - more complex components with auto layout
31:25 - using our component
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
---
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Видео Figma components: the basics to creating robust components канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Getting started with Figma: A beginner's guideLearn how to use Figma to create an awesome landing pagemin(), max(), and clamp() are CSS magic!From idea to layout: How I approach designing a siteLazy loading is too easy now5 CSS mistakes that I see way too oftenCSS em and rem explained #CSS #responsiveHow to Make Complex Components in Figma with Auto Layout (Updated!) | Build UXFigma Tips & Tricks - UI Designer's SuperpowerThe one CSS combinator I use in every projectFigma Tutorial: Components - The BasicsBuild it in Figma: Create a design system — Components6 simple typography tips to more professional looking sitesFigma in 40 MinutesCustom select menu - CSS onlyFigma Tutorial - A Free UI Design/Prototyping Tool. It's awesome.The most underappreciated CSS unitBuild it in Figma: Create a Design System lV — TestingGive your site a fantastic color scheme fast