Manik Chugh
Manik Chugh
  • 11
  • 35 898
Figma plugin development - Publishing the Plugin
This video is the tenth and final part of the mini-course 'Figma plugin development'. In this video, we go about publishing our plugin to Figma Community where we learn about multiple steps involved in the journey of making your plugin live for the public.
Publishing Guidelines: help.figma.com/hc/en-us/articles/360039958914
Previous video: ua-cam.com/video/4I8lTdmZct8/v-deo.html
Lazy Load Plugin -www.figma.com/community/plugin/990910408295947511/Lazy-Load
In the previous video in this course, we cover some edge cases which make the plugin work with complex user flows and support majorly identified exceptions.
Courses to brush up on your development skills:
The Odin Project: www.theodinproject.com/paths/...
Udacity: www.udacity.com/course/front-...
Khan Academy: www.khanacademy.org/computing...
👋🏻 Connect with me on
Instagram : manikchugh
LinkedIn: www.linkedin.com/in/manikrchugh/
Twitter: manikrc98
Переглядів: 1 137

Відео

Figma plugin development - Edge cases
Переглядів 8703 роки тому
This video is the ninth part of the mini-course 'Figma plugin development'. In this video, we continue working on the skeleton plugin idea by handling some edge cases which make the plugin work with complex user flows and support majorly identified exceptions. API References: www.figma.com/plugin-docs/api/api-overview/ Previous video: ua-cam.com/video/77zVEYbS7zc/v-deo.html The previous video i...
Figma plugin development - Building Skeleton Plugin
Переглядів 1,5 тис.3 роки тому
This video is the eighth part of the mini-course 'Figma plugin development'. In this video, we work with the idea shortlisted in the previous video and we continue to work on that idea. This is a complete hands-on video with a step-by-step guide to help you build the Skeleton Plugin. API References: www.figma.com/plugin-docs/api/api-overview/ Previous video: ua-cam.com/video/YrfZEInX9uk/v-deo.h...
Figma plugin development - Ideating your plugin
Переглядів 7843 роки тому
This video is the seventh part of the mini-course 'Figma plugin development'. In this video, we try to break down the ideation process and understand how to come up with a unique plugin idea to solve the problems that you find very frequently in your Figma design experience. API References: www.figma.com/plugin-docs/api/api-overview/ Previous video: ua-cam.com/video/cH7071Q1yAw/v-deo.html The p...
Figma plugin development - Understanding APIs (Part - 2/2)
Переглядів 2 тис.3 роки тому
This video is the sixth part of the mini-course 'Figma plugin development'. This is a continuation of the previous video, where we discussed Understanding APIs. In this video, we are going to understand the types of nodes and how to go about converting simple monotonous Figma actions into a macro plugin. API References - www.figma.com/plugin-docs/api/api-overview/ Node Types (Figma dev docs) - ...
Figma plugin development - Understanding APIs (Part - 1/2)
Переглядів 9 тис.3 роки тому
This video is the fifth part of the mini-course 'Figma plugin development'. In this video, we deep dive into understanding the APIs offered by Figma and how we can make use of them to carry out the manipulation and insertion actions that you will be mostly dealing with when developing a Figma plugin. API References - www.figma.com/plugin-docs/api/api-overview/ Accessing the document (Figma dev ...
Figma plugin development - Developing the first plugin
Переглядів 5 тис.3 роки тому
This video is the fourth part of the mini-course 'Figma plugin development'. In this video, we get started with writing our very first default template Figma plugin. This is a complete hands-on development video in which we cover the development process starting from installing the necessary applications and packages to running our first Figma plugin. Watch the complete tutorial and you will ha...
Figma plugin development: Plugin properties and Limitations
Переглядів 2,8 тис.3 роки тому
This video is the third part of the mini-course 'Figma plugin development'. In this video, we learn what are the properties that we can manipulate with Figma plugins and what are the limitations that we have to work under. Previous video: ua-cam.com/video/5gMaEllhWTI/v-deo.html The previous video in this course covers how Figma plugins work. Figma plugin API documentation: www.figma.com/plugin-...
Figma plugin development: How plugins work?
Переглядів 3,8 тис.3 роки тому
This video is the second part of the mini-course 'Figma plugin development'. In this video, we learn how Figma plugins work and how you can approach complex plugins. Previous video: ua-cam.com/video/t-KUccBqDVA/v-deo.html The previous video in this course covered an introduction to this course. 👋🏻 Connect with me on Instagram : manikchugh LinkedIn: www.linkedin.com/in/manikrchugh...
Figma plugin development : Getting Started
Переглядів 9 тис.3 роки тому
This video is an introduction to the Figma plugin development course that I will be covering. The next video on this course will be released this weekend. Ghost UXWriter Figma Plugin: www.figma.com/community/plugin/960778033371641874/Ghost-UXWriter 👋🏻 Connect with me on Instagram : manikchugh LinkedIn: www.linkedin.com/in/manikrchugh/ Twitter: manikrc98
Channel Intro - About Me
Переглядів 5253 роки тому
Watch out for this space to learn more about design and development. Uploading my next video very soon.

КОМЕНТАРІ

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

    Excited about the course!

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

    clutch ty

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

    Hi Manik, I want to integrate Figma with my DAM system, do you have any suggestions?

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

    Thanks for sharing!!!

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

    Is there any way to read excel file through our custom figma plugin ? I tried but it is not allowing me to import any external package in code.ts file.

  • @VishalBalaji-x3i
    @VishalBalaji-x3i 8 місяців тому

    If i use function skelify (node) im getting " parameter 'node' implicitly has an any type, can u resolve that, i tried everything

  • @VarunKumar-n1d
    @VarunKumar-n1d 9 місяців тому

    great content but sad to see you stopped making videos

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

    when I open the Figma desktop app I get a completely black screen, showing this error as below: ------ We can't open this file because we're having trouble with WebGL. Please try restarting the desktop app. If this problem persists, your graphics card or driver may not be supported.

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

    thankyou for this playlist

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

    Much appreciate your effort Manik.

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

    Why doesn't your video voice translate automatically? I need an interpreter to study.

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

    Sto cercando qualcuno che mi crei un plugin...ti interessa come proggetto?

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

    The Best Tutorials out there for Figma Plugin Development. Thanks a lot Manik.

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

    how can we convert this design into HTML/CSS code?

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

    Awesome tutorial!

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

    yeah, better tutorial than figmas. Thank you

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

    hello sir, can you please help us somehow, how we can change the Figma-plugin icon ( that is something like the favicon of any webpage )? I am trying to find out about it. But not got it yet. Thank you. 😍😍

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

    Hi Manik, first I got to say I found your videos (I came from the 4th one) has suggested a lot for me to get start writing a figma plugin. Also there's something about product name optimization that I may suggest because I cannot find your Ghost UXWriter plugin which I found it's interesting. But, apart of using your link in the description there could be a greater way for people to find that plugin just by their hunch inside the Figma Plugin search themselves, by just put a space between the 'UX' and 'Writer' This has cost you a lot along the way by just not to be found. I think people are looking for a good ux writing help yet it is hard to do when a useful plugin has a fancy irrelevant name, or just forgot to make it easy to search for. Yes, I may have to search for UX if I wanted to find your plugin, but let's face it. When I need a writing helper tool, people usually go to a word related to their problem, not the one as a group of problem. Lastly, after looking at all the tutorials, now I know writing plugin task is pretty much out of hand (got to admit I am just a ux designer, my tasks are pretty much around the UI Kits more than codes) So, I would like to know if I could share this idea with you and maybe you could write it up and share/sell to the community? I don't have to hold back to the idea and try hard then die with the idea because I really cannot do the code. However, I have had a look into the figma objects in API to see whether it's possible and I think it shed some lights. So, kindly contact me at everysundays a gmail. I wish if we could just either have a PoC on that or if you could go all the way to a workable plugin, both are good for me. And I am willing to support you on the cost if I need to see the results. Thanks for the good work of all these tutorials. Talk to you later.

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

    Hi I have a question and I would really appreciate if someone can help me. How can I extract the data from a html website into my figma mock-up? The HTML is changing every 15 minute, and I want my mock-up to receive that accurate data/info. I want to build a Crypto Platform in Figma which is updating continuously with the real time prices. Is this even possible? Thank you.

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

    Thanks a lot!

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

    Hi, Is there an official site describing the corner radius the plugin icon should have?

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

    The best tutorial I found for figma plugin development. Thanks man for your effort, appreciate it.

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

    Thanks for making this course Manik! Awesome niche. Keep growing!

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

    Thank you very much for all your tutorials! However, I got a bit confused. 🤷‍♂️ The plugin works although I got an error saying: "Cannot assign to 'opacity' because it is a read-only property." in test.ts

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

      I'm getting the same error. Its preventing the plugin from working.

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

    I should have seen this much earlier. would have save me a lot of time 😂 Thank you for your work! 👍

  • @antonyraj.c7950
    @antonyraj.c7950 3 роки тому

    how do we need to convert this design into react code?

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

      Hey Antony, I haven't worked on the Figma Plugins with React, But it is completely doable if you have good understanding of React

  • @antonyraj.c7950
    @antonyraj.c7950 3 роки тому

    Hello Bro. You will be a life saver if you teach us how to write a plugin to create a react web page using the react component that i already have, from figma layer design 😒

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

      Thanks Antony, I will surely update this playlist in future after learning about how to create these plugins in React

  • @antonyraj.c7950
    @antonyraj.c7950 3 роки тому

    I have a list of React components. Can i write a plugin that uses my component to generate react pages ? pls answer

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

      Apologies Antony, I haven't worked with React thus will not be able to take up this query

  • @antonyraj.c7950
    @antonyraj.c7950 3 роки тому

    Nice.. But we have not write any code here. I need to write a plugin to create a react web page from design. How do we need to do that? can you create a video for that?

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

      I do not have any recent plans to create videos for react, but I will surely update this playlist in future if I am learning it.

    • @antonyraj.c7950
      @antonyraj.c7950 3 роки тому

      @@ManikChugh thanks bro

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

    How to create plugin for generate html code

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

      Can you describe your query in detail?

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

      I think like how unsplash does it, if we have some elements in the plugin like icons or images, on clicking I want to place that icon on the screen

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

    Excellent video dude! Really concise and easy to follow!

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

    any idea on how to add images in the page with the plugin?

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

      Hey Victor, Can you describe your query in detail?

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

    Very insightful 👏👏👏

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

      Thanks Navdeep, The second part of this video is out today, do check that out!

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

    Excited to learn more about how to make plug-in’s in Figma. Thank you

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

    You can put a text in the plugin for Mac users to add your plugin as a shortcut using system preferences. It's a workaround I use a lot.

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

      Woah, thanks for sharing that hack. Would definitely try this 😊

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

    Looking forward to this series 🔥

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

      Thanks Lakshmanan, Releasing the next video this Sunday.

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

    ❤️❤️❤️ More power mate!

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

    🔥🔥🔥🔥🔥🔥

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

    Can't wait to know more about the plugins! 🤩

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

      Releasing the next video this weekend

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

    🎉🎉🎉🎉🎉🎉🎉🎉🎉

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

    This is going to be awesome!

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

    Excited for the upcoming videos! Good luck!

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

    All the best bro 👍🏻 ... intro looks awesome 😎

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

    All the power to you Manik