Matt Wierzbicki
Matt Wierzbicki
  • 7
  • 86 723
Theme Buddy for Ant Design - Figma Plugin Overview
Theme Buddy for Ant Design is a Figma plugin that simplifies working with Ant Design themes. It has an export feature that lets you save Figma theme settings as JSON files, making it easy for developers to ensure their code matches Figma designs. It also has an import feature that allows you to apply theme settings from your code directly into Figma.
Learn more: www.antforfigma.com/theme-buddy-figma-plugin
Переглядів: 169

Відео

Figma Tokens Sync for Ant Design System
Переглядів 2,6 тис.Рік тому
Learn more: www.antforfigma.com/figma-tokens-sync
Ant Design System for Figma 2.5 - Customization with Figma Tokens plugin
Переглядів 7 тис.Рік тому
Ant Design System for Figma (version 2.5 and above) takes full advantage of the Figma Tokens plugin, allowing you to change the style of the entire UI kit in a few minutes. Get Ant Design System for Figma 2.5 - antforfigma.com/
Figmaster - Design Systems Workbook for Figma
Переглядів 17 тис.3 роки тому
Learn more about Figmaster at www.figmaster.co
Ant Design System for Figma: Invoicing Platform Design - Tutorial
Переглядів 51 тис.4 роки тому
Get Ant Design System for Figma: www.antforfigma.com Plugins used in the video: Button resizer: www.figma.com/c/plugin/740127... Content Reel: www.figma.com/c/plugin/731627... Follow me on Twitter: matsugfx
Ant Design System for Figma: Invoicing Platform Design - Timelapse
Переглядів 8 тис.4 роки тому
Get Ant Design System for Figma: www.antforfigma.com Plugins used in the video: Button resizer: www.figma.com/c/plugin/740127005583346577/Button-Resizer Content Reel: www.figma.com/c/plugin/731627216655469013/Content-Reel Music by: www.davidcuttermusic.com / @dcuttermusic Follow me on Twitter: matsugfx

КОМЕНТАРІ

  • @joemontero9943
    @joemontero9943 14 днів тому

    Thanks for the video. Is there a theme editor for the Mobile version of Ant Design System? Also, is there a way to change the text to English? The content seems to be in Chinese language.

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

    How do I integrate this updated tokens in my frontend code?

  • @user-gd6do1xb4f
    @user-gd6do1xb4f Рік тому

    Do you use a style documentation plugin to generate these pages? If so which one?

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

    I have exported tokens.json file from Tokens studio for figma, and now I want to transform this tokens.json to directly use in ConfigProvider component to apply theme, I have purchased the Ant for figma UI kit with figma tokens sync how will i do the transformation of these tokens to directly use them in config provider?

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

    OMG, this is the really awesome! thank you Mat!

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

    This is insanely useful! Thank you Mateusz. Big thumbs up! :)

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

    Hi, My company bought Ant Design System(BUSINESS version.) for $359, I would like to know the difference between open-source version.

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

    Awesome tutorial, never seen this type of tutorial on UA-cam

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

    Great design system. When are you planning to do more releases?

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

    Nice video, great job, very useful!

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

    Awesome tutorial!

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

    How can you export to an html and css template?

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

    good job. Really like your product, figma and this tutorial :)

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

    You don't need to use Button resizer plugin any more. Ant Design UI Kit supports Auto Layout now :)

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

    Thanks for share!!:)

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

    This is a great tutorial! I am a developer learning design at the moment. I got the Ant Design System for Figma, but I was a bit overwhelmed by the amount of stuff in it, didn't know where to start. After this tutorial, I learned so much and I am very clear how to use it now. Thanks!

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

    Watch the tutorial here: ua-cam.com/video/APQ0b5oKN2o/v-deo.html

  • @alanpodemski7567
    @alanpodemski7567 5 років тому

    great product tutorial 👏👏

  • @rsmolkin
    @rsmolkin 5 років тому

    This is a great tutorial! How did you make it so that when you duplicate, the table line or button goes exactly where you want below automatically? When I do it, they seem to stay in the same spot and then I have to move them. Also any recommendations how to best manage tables with many columns and rows when need to add extra columns?

    • @mattwierzbicki27
      @mattwierzbicki27 5 років тому

      Thanks a lot! In order to duplicate items so that they copy below with the same space: you need to click on the item and then holding Alt + Shift move it down. Then Ctrl + D to duplicate it. :) For adding rows/columns: you need to do it manually I'm afraid.

  • @taraslesko9427
    @taraslesko9427 5 років тому

    Figma is mind blowing! Such an incredible tool. It would have been great to see the layers palette to see how many symbols you were working with. Have you tried the "Run last plugin" shortcut so you don't have to manually select the plugin for every element?

    • @mattwierzbicki27
      @mattwierzbicki27 5 років тому

      Taras Lesko Yes, I have tried it, I think I will bind this shortcut to my mouse to use it even faster 😁

  • @Charlize961
    @Charlize961 5 років тому

    I watch this to learn Figma.. so nice to look at somebody who has already perfected their skill in this...

  • @yellingbytes
    @yellingbytes 5 років тому

    awesome! good to now the button resizer plugin. yet the content reel isn't that powerful.

  • @rsmolkin
    @rsmolkin 5 років тому

    Very well done. Any chance you could do this much slower with instructions like a tutorial? I've been trying to do something very similar, but for example doing the tab bar and resizing the tabs takes me way more steps, it looks like you did it in like 2 clicks.

    • @mattwierzbicki27
      @mattwierzbicki27 5 років тому

      Roman Smolkin Thanks! Yes, I am going to record a tutorial how to design this UI step by step 🙂 probably next week. I am using Button Resizer plugin to quickly resize components like I did here in the video. Link in the video description.

    • @samdoherty5613
      @samdoherty5613 5 років тому

      @@mattwierzbicki27 I'd love to see a tutorial too. Thanks Mateusz!

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

      Agree - that whizzed by! One at half that speed would actually be great.

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

      @@arey242 He actually made one with instructions! I don't have a link handy, but I'm sure it's in his list or just search for it... I'll try to find it in my email, it was great.

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

      @@arey242 ua-cam.com/video/APQ0b5oKN2o/v-deo.html here you go :) It's a step-by-step tutorial how to create this UI

  • @SoleMoris
    @SoleMoris 5 років тому

    Hi! I really love Ant Design System! I'm using it a lot! I don't have a large screen to work like you. It happens that when you choose an icon, sometimes they are in a 4th or 5th sub level, and I simply don't see them because my screen is not so wide. I would say that is a Figma usability issue (infinitive dropdowns), but maybe this "too nested" organization is also a bit unpractical. What do you think? Again, I love Ant for Figma. It has been made with love. Regards and infinite thanks!

    • @mattwierzbicki27
      @mattwierzbicki27 5 років тому

      Hello Sole! Thanks for kind words! It's always great to hear that this UI kit helps people <3 Yes, these infinitive dropdowns are a nightmare for me too, especially with these big systems. I hope that someone will make a plugin to quickly find and replace instance of a component or Figma will solve this issue somehow.