A set of tools to programatically work with Figma files as JSON. You can use these to read and write your own figma documents without opening figma.
Figma has long been our beloved free and open community. On Sep 15, 2022 it was acquired by Adobe and that freedom we enjoyed has been put at risk.
This project aims to protect the open source design and your data by allowing you to export and view it.
- Download the latest release https://github.com/yagudaev/figma-to-json/releases
- Unzip the file to a folder
- In the Figma desktop app, open a Figma document.
- Search for and run
Import plugin from manifest…via the Quick Actions search bar. - Select the manifest you unzipped in step 2
Figma-To-JSON-Plugin.mp4
- In the Figma desktop app, open a Figma document.
- Search for an run
Figma To JSONvia the Quick Actions search bar. - Click
Download JSONand select a folder to download to
Now you can inspect the JSON file with any text editor. We recommend using VS Code.
Figma files ending with .fig are private and internal. However, since figma does not provide a write API it is useful to create new designs.
Futhermore, if the Figma REST API is down you can be sure to use this format.
Figma Plugin API uses a different JSON shape to the REST API. It only works when running inside of Figma Editor.
Figma REST API provides a way to access other files by Plugins and for automating workflows without running Figma.
The REST API is developed by a separate team at Figma and contains read-only functionality. This means the format of the data can differ significantly from that expected by the Plugin API.
In the future we would like to have a way of transforming between the REST API to the Plugin API. This will allow us to pull arbitrary Figma urls without having to open Figma Desktop first.
SVG is an industry standard, but the spec is very large and each design editor only implements a subset of it.
For that reason, when Figma exports to SVG it removes certain metadata. E.g. Text gets converted to a path instead of using the SVG <Text> tag. This makes it harder for other design tools to work with.
OpenDesign is an incredible initiative to create a uniform format we can share across design tools. The format is called Octopus. It supports most of the features of Figma, https://opendesign.dev/docs/design-format-support.
Parts of the stack like the render are not fully-open source, so sadly we couldn't simply extend their work yet. We hope to chat with their team and see what we can do.
Penpot is a fantastic editor trying to leverage SVG to work across design tools. However as mentioned SVG is not perfect and we need a specialized import from Figma which is not yet ready.
While Figma build an importer for sketch files, the Sketch team has not build an importer for .fig files.
Framer can import Figma Files through the REST API.
Please feel free to fork the repo and create pull requests. If you find a bug report it, if you have ideas and want to have a discussion use the discussion tab 😁.
- Yuan Qing Lim for https://github.com/yuanqing/create-figma-plugin
- Figma Plugin Helper Functions: https://github.com/figma-plugin-helper-functions/figma-plugin-helpers
- Brian Lovin for https://github.com/brianlovin/figma-export-zip
- Boiao Ch for cracking reading .fig files in: https://github.com/liaobinbin/fig-to-json