Using Variants to Help Build Your Design System

  Рет қаралды 4,203

joeyabanks

joeyabanks

Күн бұрын

Welcome! In this video, I'll walk through a more complex example for how Variants can be incredibly helpful when building out individual components, and ultimately, your team's design system.
Social:
/ @joeyabanks
Links:
File: www.figma.com/file/4YzYEBoBPd...
Me on Figma: www.figma.com/@joey
iOS & iPadOS 14 Kit for Figma: www.figma.com/community/file/...
File Thumbnail Kit for Figma: www.figma.com/community/file/...

Пікірлер: 29
@gabrieldavid15
@gabrieldavid15 3 жыл бұрын
Amazing! So easy to follow.. I hope to see more of it
@daryl-cs-ux
@daryl-cs-ux 3 жыл бұрын
Great video, thank you! Hope to see more soon 🙏🏻
@artgurianov
@artgurianov 3 жыл бұрын
Great content! And thank you for sharing the file so we can play around and see how it's structured!
@aishwaryasingh4249
@aishwaryasingh4249 3 жыл бұрын
Highly detailed & very helpful. Please keep making these videos :)
@giorgosmoustakidhs
@giorgosmoustakidhs 2 жыл бұрын
Your content is very helpful! Thanks for sharing 👍
@aaronpaterson7582
@aaronpaterson7582 2 жыл бұрын
Best teacher I've seen so far.
@syunaG
@syunaG 3 жыл бұрын
Super helpful and easy to follow. Thanks for sharing :)
@Graphstorm
@Graphstorm 2 жыл бұрын
Amazing video, Joey! Keep sharing Figma related videos
@vernielariosa8996
@vernielariosa8996 Жыл бұрын
I am learning from this video. Thank you Joey Banks, you are great!
@muhammadismail1168
@muhammadismail1168 2 жыл бұрын
Great Explanation Joey. Cleared a lot of issues for me. Love the channel as well.
@patrickrushton
@patrickrushton 2 жыл бұрын
Really helpful, and thanks for sharing the finished file. For these walkthroughs it would be great to have the starter file so we can follow along.
@myroslavgalavai7487
@myroslavgalavai7487 3 жыл бұрын
Thanks for sharing! It finally ticked for me:)
@hamzalabrinssi7945
@hamzalabrinssi7945 3 жыл бұрын
Great stuff man! Keep them coming.
@joeyabanks
@joeyabanks 3 жыл бұрын
Thank you! That means a lot.
@weafric
@weafric 2 жыл бұрын
Fantastic video and very thorough. Definitely subbed and looking forward to more of these series. A hand-off to developers using Design System and may Zeplin would be great.
@danielauemurajunqueira3874
@danielauemurajunqueira3874 2 жыл бұрын
You explain everything so well, this is really rich content. Thank you lots for your videos, really! Oh, and please (please, please, please) do continue making these!
@janeshore1838
@janeshore1838 3 жыл бұрын
Great video, thanks for the content and inspiration! Going to my variants to give them some more structure =) Could you have a video about your hand-off to developers process for the design system?
@himeshoney
@himeshoney 3 жыл бұрын
YES I agree... A video about hand-off to developers for the process of design systems would be nice uwu
@danparks8894
@danparks8894 2 жыл бұрын
Hi Joey, great to see you making your own videos. I always liked the logical manner in which you contributed to the Deep Dive Figma ones too, as a suggested topic, I’d love to hear your thoughts on how to best use, when not to use etc… Base components. I myself tend to create Base components of pretty much all elements that would make up a complex component. I’m curious to see how you approach the balancing act of large scale flexibility while retaining flexibility, and constructing things that, a wider team may have to utilise, and negate possible confusion over the complexity that can occur. It’s mostly balancing levels of technical skill in Figma but I feel when twinned with main components that offer clear toggling and are structured using frames, good naming etc, it’s still perfectly possible to utilise them. Would love to hear you explore that a bit in a future video if you feel it would value to your channel. Thanks again for the videos. I refer colleagues to your explanations to help them better understand file, component and variant organisation. All the best!
@ishaagarwal7351
@ishaagarwal7351 3 жыл бұрын
I follow you on twitter, didn't know that you had a youtube! Great video, thank you
@eduardgonzalez507
@eduardgonzalez507 3 жыл бұрын
Hitting that bell button! Hot stuff
@joeyabanks
@joeyabanks 2 жыл бұрын
Hi, all! I'm beginning to do 1:1 Figma trainings. If you're interested in jamming and learning together, reach out! twitter.com/joeyabanks
@vinn19852008
@vinn19852008 3 жыл бұрын
Cool
@sw23ae
@sw23ae 2 жыл бұрын
More videos please
@DavidStenbeck
@DavidStenbeck 2 жыл бұрын
Just found these videos, great explanations, I noticed you've taken some time off from the content. I hope you keep making the videos, handoff etc would be great.
@fiveshorts
@fiveshorts Жыл бұрын
Great videos. Thanks. But isn’t it good practice to start with a single True Master component that can be edited to ripple all the sub components (ie a font change or size, or corner radius). And, surely the background colors your copying and pasting as rectangles would be much better applied if the components were themselves frames and you were changing the BG color from your color system Library. My2¢
@abhishekgharia8808
@abhishekgharia8808 2 жыл бұрын
Pls come back 😭
@GadgetsGearCoffee
@GadgetsGearCoffee 2 жыл бұрын
Is creating so many variants and sub variants necessary? New to figma and design systems
@Stevejobs722
@Stevejobs722 2 жыл бұрын
Why not just have the designer change the property of the tab to selected/unselected rather than creating a variant for each? Just adds way more maintenance then necessary.
Getting Started with Variants in Figma
5:17
joeyabanks
Рет қаралды 4,2 М.
Naming Things in Figma: My Best Tips & Tricks
27:45
joeyabanks
Рет қаралды 54 М.
UNO!
00:18
БРУНО
Рет қаралды 1,3 МЛН
50 YouTubers Fight For $1,000,000
41:27
MrBeast
Рет қаралды 210 МЛН
Heartwarming Unity at School Event #shorts
00:19
Fabiosa Stories
Рет қаралды 24 МЛН
No empty
00:35
Mamasoboliha
Рет қаралды 9 МЛН
What is a Design System? 6 Different Types of Design Systems
12:33
Creating and Using VARIANTS in Figma
16:44
MDS
Рет қаралды 46 М.
10 tips to work 10x faster in Figma
18:54
Carola Pescio Canale
Рет қаралды 409 М.
Master Figma UI Design in 15 Minutes | This Tutorial Is For You!
15:28
Website Learners
Рет қаралды 534 М.
Mistakes Designers make with Figma Components
17:46
AM Design
Рет қаралды 58 М.
Create a Figma Design System - Fundamentals (Part 1)
13:43
РАТТЕ, почему ты меня ПРЕДАЛ?
5:04
• Gerand •
Рет қаралды 537 М.
ГРАНД-ФИНАЛ! NaVi vs G2 - Esports World Cup 2024 - ЛУЧШИЕ МОМЕНТЫ CS2
50:22