- 3
- 63 603
joeyabanks
Приєднався 3 жов 2011
Using Variants to Help Build Your Design System
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/4YzYEBoBPd4F6BOM5ncIR9/Variants-Public
Me on Figma: www.figma.com/@joey
iOS & iPadOS 14 Kit for Figma: www.figma.com/community/file/858143367356468985
File Thumbnail Kit for Figma: www.figma.com/community/file/834093248798603357
Social:
@joeyabanks
Links:
File: www.figma.com/file/4YzYEBoBPd4F6BOM5ncIR9/Variants-Public
Me on Figma: www.figma.com/@joey
iOS & iPadOS 14 Kit for Figma: www.figma.com/community/file/858143367356468985
File Thumbnail Kit for Figma: www.figma.com/community/file/834093248798603357
Переглядів: 4 230
Відео
Getting Started with Variants in Figma
Переглядів 4,3 тис.3 роки тому
Hi, I'm Joey! I'm a product designer focused on design systems and this video is meant to help give a quick introduction for how to use Variants within Figma, to help better organize components and hopefully, make them easier for everyone to use. Links: Me on Figma: www.figma.com/@joey iOS & iPadOS 14 Kit for Figma: ioskit.design Social: @joeyabanks
Naming Things in Figma: My Best Tips & Tricks
Переглядів 55 тис.3 роки тому
Hi, I'm Joey! I'm a product designer at Twitter, working on design systems, who used to work at Figma as a Designer Advocate. Today I wanted to share a tutorial for how to make the most with naming conventions in Figma, to help you work quickly and efficiently. Links: Me on Figma: www.figma.com/@joey iOS & iPadOS 14 Kit for Figma: www.figma.com/community/file/858143367356468985 File Thumbnail K...
adding the sections feature. which one is the better to use, frame or sections?
Thank you Joey for creating this amazing video <3
Thank you
you look like Spiderman, the original one
Wow, this was so incredibly helpful. You explained everything so well and clearly
Well said, @joeyabanks.
I really respect and appreciate your lesson here but I would like to know why not approach this with a component set where we can have one default component and then we can configure it to our need using a control panel for the component set?
Good video, but tooo much explaining... i guess it's for the total newbies. I genuinely thought that you will explain layer naming hierarchy or best practices and not basics. But video is good, there's still something useful for "not newbies".
this is the best
I'm here 2 years after and this is one of the most valuable content on this topic. We definitely need more of your videos and tutors like you.
TIL renaming a text layer is the way to preserve overrides
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¢
LOL finally i can see your face, by the way thanks for update iOS design systems.
I am learning from this video. Thank you Joey Banks, you are great!
This is very helpful. Please come back to UA-cam!!!
you obviously know what you're talking about, great job
Great video.
I have a question: for example we have a frame lets say frame 3, inside frame 3 is a shape ellipse 2. When we duplicate frame 3, we get frame 4 with the same ellipse 2. Should we change name of ellipse 2 inside frame 4 to ellipse 3(or any other name) or keep the name same as in frame 3 ie ellipse 2. Won't it create any problem in future for dev handoff or any other problem?
Hey Joey, are there are any FIGMA UI Design kits out there today that you just love? I need one for a few web design projects and i feel lost in the sea of choices!? Please let me know! (and thanks for the excellent video. . .this was SO clear! keep it up)
Pls come back 😭
Is creating so many variants and sub variants necessary? New to figma and design systems
Nice explained!!! One question - is it possible to create a "_component" from any existing component / variants to get mor controll over all? Thanks a lot!
The OG champion is here!
Amazing video, Joey! Keep sharing Figma related videos
Hi, I want to know how to change the icons to a different icons in layers before the names of the page like cover page, demo page
More videos please
By far, the best organization tips in Figma! TQVM
Thank you for sharing!!! 🦄
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!
.naming is very good tip, thanks Joey!
Imagine Figma developes a multidimensional Numpy series feature for managing the components...
Love this! Thank you!
This is such a good explanation video, thank you so much !!!
Hi Joey, nice explanation! Thanks tons! Would you kindly post a video about how much of a Figma community duplicate file we should change in order to make it look original i.e. ours rather than a copy paste (definitely considering the license and say it says you can change it completely and publish freely). You may mention "start with typography, colors, etc." What would be your tips and tricks in working with Figma community files. Thanks in advance.
Very helpful video, thanks you 👍🏼
Best teacher I've seen so far.
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!
Loving the way you teach and explain things. Please make more content!
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.
How do you bring in icon packs? Do you paste them in or use a plug in?
wonderfoul ♥
underrated channel Thank you for the insight, Joey!
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.
this is really helpful, thank you!
Great Explanation Joey. Cleared a lot of issues for me. Love the channel as well.
Awesome breakdown. Thanks Joey!