joeyabanks
joeyabanks
  • 3
  • 63 603
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
Переглядів: 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...

КОМЕНТАРІ

  • @_________________________.-
    @_________________________.- 11 днів тому

    adding the sections feature. which one is the better to use, frame or sections?

  • @dsouzaedson
    @dsouzaedson 21 день тому

    Thank you Joey for creating this amazing video <3

  • @Ajadi_kun_
    @Ajadi_kun_ Місяць тому

    Thank you

  • @snehajain3641
    @snehajain3641 5 місяців тому

    you look like Spiderman, the original one

  • @natthedesigner
    @natthedesigner 6 місяців тому

    Wow, this was so incredibly helpful. You explained everything so well and clearly

  • @MikePouncyIsRad
    @MikePouncyIsRad 7 місяців тому

    Well said, @joeyabanks.

  • @arman_3
    @arman_3 8 місяців тому

    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?

  • @Osigot
    @Osigot 11 місяців тому

    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".

  • @ajaalec
    @ajaalec Рік тому

    this is the best

  • @VictoriaOlajumokeAbimbola

    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.

  • @underscoreroa
    @underscoreroa Рік тому

    TIL renaming a text layer is the way to preserve overrides

  • @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¢

  • @journeyoferry
    @journeyoferry Рік тому

    LOL finally i can see your face, by the way thanks for update iOS design systems.

  • @vernielariosa8996
    @vernielariosa8996 Рік тому

    I am learning from this video. Thank you Joey Banks, you are great!

  • @hcf797
    @hcf797 Рік тому

    This is very helpful. Please come back to UA-cam!!!

  • @franzit
    @franzit Рік тому

    you obviously know what you're talking about, great job

  • @ersancuruklu1
    @ersancuruklu1 2 роки тому

    Great video.

  • @prajwalsharma2794
    @prajwalsharma2794 2 роки тому

    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?

  • @EricZentner
    @EricZentner 2 роки тому

    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)

  • @abhishekgharia8808
    @abhishekgharia8808 2 роки тому

    Pls come back 😭

  • @GadgetsGearCoffee
    @GadgetsGearCoffee 2 роки тому

    Is creating so many variants and sub variants necessary? New to figma and design systems

  • @mischugo
    @mischugo 2 роки тому

    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!

  • @AnshMehraa
    @AnshMehraa 2 роки тому

    The OG champion is here!

  • @Graphstorm
    @Graphstorm 2 роки тому

    Amazing video, Joey! Keep sharing Figma related videos

  • @shrikanthbhat5550
    @shrikanthbhat5550 2 роки тому

    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

  • @sw23ae
    @sw23ae 2 роки тому

    More videos please

  • @TheMoReel
    @TheMoReel 2 роки тому

    By far, the best organization tips in Figma! TQVM

  • @АллаРомашкова-ш1м

    Thank you for sharing!!! 🦄

  • @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!

  • @FerdiCildiz
    @FerdiCildiz 2 роки тому

    .naming is very good tip, thanks Joey!

  • @tedjenks459
    @tedjenks459 2 роки тому

    Imagine Figma developes a multidimensional Numpy series feature for managing the components...

  • @nicole_nico22
    @nicole_nico22 2 роки тому

    Love this! Thank you!

  • @steffsamtoy3310
    @steffsamtoy3310 2 роки тому

    This is such a good explanation video, thank you so much !!!

  • @isgalida
    @isgalida 2 роки тому

    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.

  • @iamgavcarter
    @iamgavcarter 2 роки тому

    Very helpful video, thanks you 👍🏼

  • @aaronpaterson7582
    @aaronpaterson7582 2 роки тому

    Best teacher I've seen so far.

  • @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!

  • @chrisharley4520
    @chrisharley4520 2 роки тому

    Loving the way you teach and explain things. Please make more content!

  • @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.

  • @honeylavender1122
    @honeylavender1122 2 роки тому

    How do you bring in icon packs? Do you paste them in or use a plug in?

  • @adelel-tohamey591
    @adelel-tohamey591 2 роки тому

    wonderfoul ♥

  • @IPassionIPechnik
    @IPassionIPechnik 2 роки тому

    underrated channel Thank you for the insight, Joey!

  • @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.

  • @dianaleon3678
    @dianaleon3678 2 роки тому

    this is really helpful, thank you!

  • @muhammadismail1168
    @muhammadismail1168 2 роки тому

    Great Explanation Joey. Cleared a lot of issues for me. Love the channel as well.

  • @devinpigera6363
    @devinpigera6363 2 роки тому

    Awesome breakdown. Thanks Joey!