Figma To World 🌏

Presentation

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

This plugin allows you to export the node tree of the Figma design into a JSON 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.

User guide

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 to Plugins>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, your JSON file is created !

For more visual explanations: TO DO: INSERT demonstration video

Development guide

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

Pre-requisites

• 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 

Build the plugin

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

$ npm run build

This will generate a manifest.json file and a build/ 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

Install the plugin

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

Acknowledgments 👐

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

License

This project is licensed under the MIT License.