Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/opensmock/figmatoworld

Figma plug-ins for exchanges with external world
https://github.com/opensmock/figmatoworld

conversion export figma figma-export figma-plugin figma-plugins figma-to-code open-smock smock typescript

Last synced: 20 days ago
JSON representation

Figma plug-ins for exchanges with external world

Host: GitHub
URL: https://github.com/opensmock/figmatoworld
Owner: OpenSmock
License: mit
Created: 2023-02-16T08:21:32.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-06-29T09:18:11.000Z (over 1 year ago)
Last Synced: 2024-11-12T04:34:44.922Z (3 months ago)
Topics: conversion, export, figma, figma-export, figma-plugin, figma-plugins, figma-to-code, open-smock, smock, typescript
Language: TypeScript
Homepage:
Size: 13.4 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Figma To World 🌏

## Presentation
![Cover art](https://github.com/OpenSmock/FigmaToWorld/assets/125554080/a3806e74-77e2-4e60-913a-3bafae15b438)

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.

![image](https://user-images.githubusercontent.com/125554080/222474063-a5ea9a4a-0f3d-4080-8490-939c4e33fa3f.png)

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

![image 1](https://github.com/OpenSmock/FigmaToWorld/assets/125554080/b59baabc-cc42-4ee8-98d7-2edf1c1eaeda)

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](https://yuanqing.github.io/create-figma-plugin/), [Figma Plugin Typing](https://github.com/figma/plugin-typings) and [Figma Plugin Helpers](https://github.com/figma-plugin-helper-functions/figma-plugin-helpers).*

### Pre-requisites

- [Visual Studio Code](https://code.visualstudio.com/)
- [Node.js and npm](https://nodejs.org) – v18
- [Figma desktop app](https://figma.com/downloads/)
- [typescript](https://www.typescriptlang.org/)
- [react](https://reactjs.org/)
- [preact](https://preactjs.com/)

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](https://yuanqing.github.io/create-figma-plugin/) – ./ui, ./build, ./tsconfig and ./utilities
- [Figma Plugin Helpers](https://github.com/figma-plugin-helper-functions/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`](https://figma.com/plugin-docs/manifest/) 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.