Repository files navigation

With FigmaToWorld, exporting your Figma design to aJSON file has never been so easy !

This plugin allows you to export the node tree of the Figma design into aJSON file containing the same architecture. You can choose between several modes that allow you to download either the whole design, the current page or a selection.

First of all, you should know that this plugin is not yet published in the Figma community plugin library. So, to load and use it, you will need the desktop version of the Figma application.

Open the design you want to export and go toPlugins>Development>Import plugin from manifest, as shown in the image below.

Then, the plugin will launch and should look something like that:

You can select your exporting mode (Either the whole design, current page or a selection) for both the design and the images. Then, choose if you want to download the JSON file as well as images in PNG format or only the JSON file. Click on the download button and close the plugin once it's done. Be aware that the downloading state might take a bit of time according to your design's size.

That's it, yourJSON file is created !

For more visual explanations:TO DO: INSERT demonstration video

This plugin is built with the help of three github librairies:Create Figma Plugin,Figma Plugin Typing andFigma Plugin Helpers.

• Visual Studio Code
• Node.js and npm – v18
• Figma desktop app
• typescript
• react
• preact

To install one of those packages type in the terminal at the root of your project:

$ yourPackageName install

As mentionned before, this plugin uses outside librairies:

• Create Figma Plugin – ./ui, ./build, ./tsconfig and ./utilities
• Figma Plugin Helpers

In order for the plugin to retrieve the functions coming from those librairies and also download needed packages, you should type the following command (in your project terminal):

$ npm install

To build the plugin, open the terminal at the root of your project and type:

$ npm run build

This will generate amanifest.json file and abuild/ directory containing the JavaScript and UI bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically, you can also run :

$ npm run watch

1. In the Figma desktop app, open a Figma document.
2. Search for Plugins and runImport plugin from manifest….
3. Select themanifest.json file that was generated by thebuild script.

I would like to thank @yuanqinglim, @alexandrtovmach and @thomas-lowry for the help they provided through their librairies.

This project is licensed under the MIT License.