My Dear Friends of Figma in Welcome to part 5 of the build your first plugin series in this video we’re going to show you how to publish your own plugins to the figma community the figma community is home to thousands of templates widgets and plugins built by other figma users we’ll learn how to add our work to the community so that others can find and install our plugin if.
You’ve been following along on our video series you should already have a plugin ready to publish if not check out videos one through four to learn how you can build your very first figma plugin to publish a plugin to the community we’ll need to use the figma desktop app let’s open up the desktop.
App and navigate to the left sidebar click on explore community this will open up the figma community page in the desktop app in the top right of the community page click on the blue publish button and a modal will pop up displaying your figma files in the top left of this modal navigate to plugins to view a list of plugin projects that.
Are available for publishing we’ll select the plugin we built in the previous video hit next and the publish plugin modal will pop up every plugin has its own page in the figma community this allows other members of the community to find and install a plugin and learn more about.
What each plugin does in the publish plugin modal we can provide the information we want to display on our plugin page we recommend having this information ready before starting the publishing process let’s add an icon to represent our plugin in the community and in the.
Editor when a user runs our plugin although i already have an icon ready to use here this is something you can create yourself just make sure to follow the recommended dimensions outlined in the publish plugin modal luckily figma makes this easy by having frame presets available for plug-in publishing to use the.
Plug-in frame presets open a design file select the frame tool under the figma community drop-down you should see presets available for creating a plugin icon a profile banner and a plugin cover nice next we’ll give our plugin a name this can be as descriptive or creative.
As you want users will be able to search for your plugin using this name then we’ll write a description of our plugin this is where we can explain what our plugin does and how to use it we can also add some cover art to display at the top of our plugin page again make sure to follow the.
Recommended dimensions outlined in the modal so that your image looks its best let’s not forget to add relevant tags to the plugin we can have up to 12 keywords and these can be anything that would make it easier for other community members to find our plugin it’s important to note that as a plugin creator it’s your responsibility to.
Provide support for your plugins under support contact we should provide an email address website or help center link just in case users have any questions about the plugin you’ll see that the publish plugin modal has automatically assigned you as the plugin creator if anyone else assisted in the building.
Of this plugin you can credit them here by entering their figma community handle under plugin info you may get an error that says invalid id in manifest.json to fix this issue click on the generate id button to the right you should now see a message that says please add this to your manifest.json.
File with an id property and value underneath it first we’ll copy this newly generated id then open up the plugin project in visual studio code in the manifest.json file replace the current id property and value with the new id you generated in.
The modal save this change then hit command shift b to watch for changes if we made the change correctly our project should compile successfully with no errors great let’s head back to the publish plugin modal in our desktop app by default comments are allowed on the.
Plugin page since they are a way for other community members to provide feedback and make future requests however if you’d like to turn this off you can uncheck the box in the comments section here finally let’s scroll back up to the top of this modal to see a preview of our plugin this is a great time to check for.
Typos and verify the information we filled in if you like what you see go ahead and hit publish at the bottom of the modal congratulations you’ve submitted your first figma plugin for review figma will contact you through your figma account email to let you know if your plugin has.
Been approved to learn more about publishing plugins and the plugin review process check out the link in the description below thank you so much for following along in the build your first plugin series we hope that you had fun learning with us and we can’t wait to see your plugins.
In the figma community have an idea for another video series you’d like to see let us know in the comments below see you next time
Figma is free to use. Sign up here: https://bit.ly/3msp0OV Written Guide: https://bit.ly/3z6FeqL The Petma Design File: …
Figma Official Channel,build,your,first,FigJam tutorial, UX tutorial, Figma tutorial, Config, plugin, plugin tutorial, what are plugins, coding, Figma coding, typescript, making a plugin, figma plugin tutorial, how to make a figma plugin, API, API tutorial, Figma API, product:figma_design, audience:developer, language:english, format:standard, produced_by:product_education, theme:development, event:none, series:build_your_first_plugin, type:outcome_tutorial, level:beginner, primary_feature:plugins, secondary_feature:,