Office hours: Complex component architecture

Поділитися
Вставка
  • Опубліковано 17 лис 2024

КОМЕНТАРІ • 62

  • @CuttingEdgeSchool
    @CuttingEdgeSchool 4 роки тому +7

    This was so refreshing. I suddenly got super excited after a long time after seeing the way you've played with Auto Layouts

    • @gideondariel733
      @gideondariel733 3 роки тому

      a tip : you can watch series on kaldrostream. I've been using it for watching a lot of movies lately.

    • @kylerjakob5567
      @kylerjakob5567 3 роки тому

      @Gideon Dariel yup, been using KaldroStream for since november myself :)

    • @spencerlucian4843
      @spencerlucian4843 3 роки тому

      @Gideon Dariel Yea, have been using KaldroStream for since november myself =)

  • @yankee-in-london
    @yankee-in-london 3 роки тому +1

    the power of "slots" is FANTASTIC ... this really takes composability to the next level

  • @shaharbenari6744
    @shaharbenari6744 2 роки тому +2

    It was "wow". Before 2 weeks i started to learn this software and every time i watch your tutorials it feel more like big event then a class. Very helpful inspiring and enjoyable. Thank you very match

    • @rafalpotasz
      @rafalpotasz 2 роки тому +1

      Totally agree so far! I learn so many things that help so much from these videos 😌

  • @sagessedantan
    @sagessedantan 3 роки тому +1

    How did I not know about that layout grid trick?!? I'm flabergasted 🤯

  • @franksonjohnson
    @franksonjohnson 4 роки тому +3

    Woah Layout Grids 20:01. Really want to wrap my head around this.

    • @Puleczech
      @Puleczech 3 роки тому

      I fail to see why he did not do it using Autolayout with Fill Container horizontal option on?
      But perhaps it wasn't possible back then?

  • @ChristianBaptiste
    @ChristianBaptiste 4 роки тому +1

    These sessions are so helpful, thank you.
    One thing I would suggest, if you have to have to create both a light mode and a dark mode it is totally worth it to get the Themer plugin.
    With the Themer plugin you can convert all your assets from either light mode to dark mode with two simple clicks. It is truly magical and it has saved me a ton of time since I now only have to create and maintain one component set. It has literally cut our component work in half. To get Themer to work all you have to do is create a set of LM and DM colo styles and shadow styles.

  • @ShoaibMahmudOfficial
    @ShoaibMahmudOfficial 4 роки тому +11

    Hey, would you please share this figma file with the community? Will be helpful

  • @ethosphane
    @ethosphane 4 роки тому +12

    Great demo! Will you all be sharing the file like you typically do for these presentations?

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

      Yes, but now with auto layout updates we don't need few of the tricks Joey showed

  • @nirjagauchan
    @nirjagauchan 4 роки тому +2

    Your videos are always extremely helpful and informational. Our team loves working in Figma! ... :) Thanks for sharing these cool tricks. Could you please share this file here in this video description! That would be extremely helpful... Thanks!

  • @aliaksandrasaywell3826
    @aliaksandrasaywell3826 3 роки тому +2

    Hi @Figma! Thanks for posting this video. I am interested to learn more about Using layout grids with constraints on components (time tag 15:30​). Can you please elaborate on this in more details? Thanks!

  • @jyotishclub5537
    @jyotishclub5537 3 роки тому +1

    I would have liked it more than once if I could! Thank you so much for sharing

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

    Waaoo !! it's insane! it'll help me to organize a design system that i'm building right now thank you!

  • @mohamedminhajsa7087
    @mohamedminhajsa7087 3 роки тому +4

    4:05
    The problem with using an instance for a new master component is text won't get changed when it's used somewhere else. You've to break the instance and again master it. Otherwise, it won't work.

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

      In my experience, you can change text in the instances without detaching from the component. If you then switch the instance to a different variant based on the same master component, you keep the custom text but all the other properties change to those of the variant you choose

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

      And if you change the text (content) in the master, it will change in all instances where the text hasn't been edited. So, not seeing your problem

  • @gabrielabrunschweiler7782
    @gabrielabrunschweiler7782 4 роки тому +2

    haha I love watching you guys do your magic, thanks!

  • @elecm88
    @elecm88 3 роки тому +2

    where is the link of "complex components" file? thxs

  • @alexisfy
    @alexisfy 4 роки тому +2

    So this is Before Variants and before auto layout update... I think this didn't age well... this last 2 months. Crazy how fast you are working.

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

      @Gabriel Leni and I wrote that a Year ago. Imagine.

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

      I was wondering about the same thing. For some reason, I like the old way doing things from this video than the Variant. To me, variant may be a bit more rigid whereas in this video, you can do whatever structure you want to as long as you are using a frame.

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

      @@windmaomao oh man, and you haven't seen properties, this year update leaves this one on the floor. But this one is very complex. Even more than this video.

  • @tallneilio
    @tallneilio 4 роки тому

    great vid, didn't know constraints were tied to layout grids

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

    Seems like you can ignore layout grids the way Banks is teaching them bc Figma as of Oct. 2023 now allows for the same capabilities with enhanced auto layout

  • @jacklovett-earles767
    @jacklovett-earles767 3 роки тому

    layout grids! Amazing

  • @djiusmkwok6797
    @djiusmkwok6797 4 роки тому +5

    Great! how can I get this Figma file?

    • @Produkthelt
      @Produkthelt 4 роки тому

      @figma team any chance you could share the file again?

    • @richardearney2524
      @richardearney2524 4 роки тому +1

      @@Produkthelt Looks like it is in the Community www.figma.com/file/dVRZjGLXrOeloESS113zvG/Interface-Input-Kit-(Community)?node-id=0%3A1

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

    excellent sessions

  • @attilabodi1216
    @attilabodi1216 3 роки тому

    Good stuff, very helpful. I just wish figma was more intuitive for designs -- so we can make things the correct way. Most designs I see are built w groups nested in groups because frames and auto layout are so busted everyone i know stays away from them. It shouldn't be this complicated to make card.

  • @developerdon6419
    @developerdon6419 3 роки тому

    7:50 On windows ,use alt key+ drag to replace component

  • @Produkthelt
    @Produkthelt 4 роки тому +2

    Any best practices to create "Focus styles" ? @figma - Lately at our team we have been using shadows to create an outer ring for focus states.

    • @rogieking8773
      @rogieking8773 4 роки тому

      Have you tried creating a component and maybe using a negative shadow spread with no blur?

    • @Produkthelt
      @Produkthelt 4 роки тому

      I did ✌🏻 I was wondering whether you think this is the best most flexible way to achieve this or If there is any better solution.

    • @rogieking8773
      @rogieking8773 4 роки тому

      @@Produkthelt Until we have states or something like this in Figma, I think this is a good solution! Happy designing, Marian!

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

    hello! thank you for this helpful video. Where can i find access to this file?

  • @robinlouis9162
    @robinlouis9162 4 роки тому +1

    Thank you !

  • @XiaodanGuo
    @XiaodanGuo 4 роки тому

    Great content, could you show how to create slot component

  • @fajleyrabbe2930
    @fajleyrabbe2930 4 роки тому

    35:00 Preview component behavior by modifying instances
    57:15 Prototyping main navigation components mode for faster prototypes

  • @HeroNinja
    @HeroNinja 4 роки тому +2

    Thanks ✨

  • @JoeGelman
    @JoeGelman 3 роки тому

    When does it make sense to use Layout Grids vs. AutoLayout?

  • @BrialMusic
    @BrialMusic 3 роки тому

    Quick one related to the layout grids. I used to do these layouts in auto layout rather than fixing items on columns. Is that a better or worse practice?

    • @tiktaktictac
      @tiktaktictac 3 роки тому

      Yeah I was wondering too, since I see no difference in flexibility when doing either approach.

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

    Awasome!

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

    im confused with the layout grids.. why isn't he doing autolayout and filling/hugging the contents?

  • @jennainkr
    @jennainkr 3 роки тому

    great video! can i have the files by any chance?

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

    Great

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

    Would be great if I could fetch the exercise file.

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

    Doesn’t this serve the same function as variants?

    • @xTheBlackCatxd
      @xTheBlackCatxd 2 роки тому +1

      Yeah basically variants. But I don't think variants were released at the time of the upload

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

    kindly share this figma file 😀

  • @only_sami
    @only_sami 4 роки тому

    👍🏻

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

    These are called variants now lol

  • @edetmmekut809
    @edetmmekut809 4 роки тому +2

    first