Skip to main content
February 2, 2024
Solved

Download option while using figma code generation

  • February 2, 2024
  • 10 replies
  • 599 views

When using Figma plugin for code generation in dev mode, the output is usually displayed in one of the subsections Inspect panel.
This output of code generation is available with one option - “Copy”
Is there a way to download the codegen output ?

This topic has been closed for replies.
Best answer by nirvana7

Thanks for the response. However this is not an exiting code generation plugin that i am trying to download.
I am creating a new plugin and want an option to download the generated output.
Can you please guide me for the same.

10 replies

tank666
February 2, 2024

Some codegen plugins provide the ability to export code snippets. Just click on the “Inspect settings” icon next to the plugin name and select the item you need.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
nirvana7Author
February 2, 2024

I am unsure where this setting is.
This is what i see in my inspect panel for a codegen plugin

tank666
February 2, 2024


“Inspect settings” icon.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
nirvana7AuthorAnswer
February 5, 2024

Thanks for the response. However this is not an exiting code generation plugin that i am trying to download.
I am creating a new plugin and want an option to download the generated output.
Can you please guide me for the same.

tank666
February 5, 2024

In this case, you need to study the following docs:

figma.com

https://www.figma.com/plugin-docs/api/CodegenPreferencesEvent/

In short: add codegenPreferences to the manifest, listen to the preferenceschange event, pass the code to the UI and call the download function.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
nirvana7Author
February 6, 2024

Thank you, i have already checked some of the docs and will explore others too.
Also you mentioned call the download function, are you referring to some native method for this ? Any example that i can leverage ?

tank666
February 6, 2024
stackoverflow.com

You can also Google it yourself.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
nirvana7Author
February 6, 2024

Ah nice, a javascript function is even better. Initially i thought if there is any native support from Figma for downloads. Thanks @tank666

Burbach_Brandon
March 7, 2024

Hi @nirvana7 and @tank666, I am working on a similar problem where I am trying to access the native HTML code generated by in the Figma Inspect panel shown below via the API →

Is there a way for my plugin to access this natively generated code via the API?

tank666
March 7, 2024

In this screenshot I can see that the HTML code was generated by a third party plugin. In this case, I suggest you contact its creator.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank