How to Integrate Figma Design Systems with Storybook

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

КОМЕНТАРІ • 29

  • @TofuTseng
    @TofuTseng 11 місяців тому +2

    Hi, thanks for the cool video.
    May I ask why we need to integrate Figma to Storybook?
    I guess that it's simple to know when Figma design changing, then developers could see the changing immediately.
    And the edit logs can record what is changed, then developers take action to edit the code in project.
    Just want to confirm the goal and usage. Thank you.

    • @TahirKhan001
      @TahirKhan001 10 місяців тому +1

      Can someone answer, please? Why do we need to integrate Figma into Storybook even though we can directly extract fonts, colors, and elements from Figma?

    • @boluabiola7981
      @boluabiola7981 9 місяців тому

      You already mentioned some good points. Another point would be that in a Figma file with lots of pages and components, for example in a company like Google, It might be hard to find some components and so having storybook and Figma will be easier
      Basically, it's for ease of use for the developers

  • @battleevio2939
    @battleevio2939 8 місяців тому +3

    I am using Storybook v7.6.7 and I followed the step but he showed the error "Please call `__updateTree/1` method with a valid parameter." Can you please help

    • @HaiTran-vg7bj
      @HaiTran-vg7bj 3 місяці тому

      I also have this problem, you haven't solved it yet

    • @varies.
      @varies. 2 місяці тому

      @@HaiTran-vg7bj Change api key permissions :) You're Welcome.

  • @davethorn9423
    @davethorn9423 4 місяці тому

    Great work . I learned what all this is about and understood it too. Many thanks

  • @codewithnacho
    @codewithnacho Рік тому +1

    This is awesome! Thanks for sharing this!

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

    This is perfect! thank you

  • @c0decisco859
    @c0decisco859 6 місяців тому +1

    I see the color values as #hex, does this also show variables?

  • @lavosbit
    @lavosbit 10 місяців тому +1

    Trying to get this to work with react ts + vite and looks like like the decorators.tsx is missing from .storybook as well as no ../src/styles/ for importaning in GlobalStyles. Not sure how to complete the addon now.

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

      I think this guide might be outdated by now. :(

  • @gmjitendra
    @gmjitendra Рік тому +1

    it works with storybook v6.5 but doesn't work with storybook v7? Any help appreciate please.

    • @theouterspace5285
      @theouterspace5285 Рік тому +1

      in the docs theres "To install v7 beta, use below command instead" try using that it works for me.

  • @jarek3573
    @jarek3573 Рік тому +3

    isn't the output of this whole operation is the same as what developer get from Figma's 'Dev mode'?

  • @0hfoxyroxy
    @0hfoxyroxy 3 місяці тому

    wow I am new to this thanks

  • @prashantindurkar1457
    @prashantindurkar1457 2 місяці тому

    Great Thanks

  • @DannyMontero-g7d
    @DannyMontero-g7d 6 днів тому

    dope!

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

    There is a highlight+fade animation while you edit a line in VSCode. I like it. Is it an addon? Which one?

  • @yassineel6123
    @yassineel6123 Рік тому +1

    That's amazing 😍

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

      Thank you! We are glad you enjoyed this.

  • @TahirKhan001
    @TahirKhan001 10 місяців тому

    Can someone answer, please?
    Why do we need to integrate Figma into Storybook even though we can directly extract fonts, colors, and elements from Figma?