💾 Read/Write Figma Files as JSON

Overview

Figma To JSON 💾

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.

🔥 Live Demo 🔥

Figma to JSON Plugin Screenshot

Motivation 🤔

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.

Quick Start ⚡️

Install the plugin

  1. Download the latest release https://github.com/yagudaev/figma-to-json/releases
  2. Unzip the file to a folder
  3. In the Figma desktop app, open a Figma document.
  4. Search for and run Import plugin from manifest… via the Quick Actions search bar.
  5. Select the manifest you unzipped in step 2

Usage

Figma-To-JSON-Plugin.mp4
  1. In the Figma desktop app, open a Figma document.
  2. Search for an run Figma To JSON via the Quick Actions search bar.
  3. Click Download JSON and select a folder to download to

Now you can inspect the JSON file with any text editor. We recommend using VS Code.

Supported Formats ✅

.fig files

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 JSON

Figma Plugin API uses a different JSON shape to the REST API. It only works when running inside of Figma Editor.

Figma Rest API (Coming soon)

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.

Other Formats 📄

SVG Export

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

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

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.

.sketch

While Figma build an importer for sketch files, the Sketch team has not build an importer for .fig files.

Framer

Framer can import Figma Files through the REST API.

Contribution

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 😁 .

Special Thanks

You might also like...

An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

Awesmoe Books A Website demo for our project of book store, The website has ability of adding and removing you books from yor library, Thats reflects

Jul 8, 2022

🐌 让 Figma 网络访问速度更快

🐌 让 Figma 网络访问速度更快

FigmaNetOK 让 Figma 网络速度访问速度更快的方法(尤其是在 🇨🇳 中国) 不使用翻墙 更改本地 Hosts 配置 Figma 有不同的服务器,通常你的系统会自动选择 Figma 的服务地址,有些时候因为运营商、Figma 服务状态、DNS 设置等等原因,自动选择的 Figma 服

Sep 20, 2022

Felipe Santana's Figma Course Tag Generator

 Felipe Santana's Figma Course Tag Generator

Gerador de Tags do Curso de Figma do Felipe Santana Deployment After having run the create-remix command and selected "Vercel" as a deployment target,

Apr 27, 2022

A meme generator plugin for Figma and FigJam. Import memes from all over the internet with customizable captions and share it far and wide.

A meme generator plugin for Figma and FigJam. Import memes from all over the internet with customizable captions and share it far and wide.

Is This A Meme? 💁🏻 🦋 A meme generator plugin for Figma and FigJam. Import memes from all over the internet, add your captions, and share it far and

Aug 30, 2022

A utility that mutates and transforms a style-dictionary object into something Figma Tokens plugin understands

A utility that mutates and transforms a style-dictionary object into something Figma Tokens plugin understands

Brought to you by Style Dictionary To Figma A utility that transforms a style-dictionary object into something Figma Tokens plugin understands. Used b

Sep 19, 2022

Generate Skeleton Component from Figma.

Generate Skeleton Component from Figma.

figeleton Skeleton Code Generator Figma Plugin consisting of @figeleton/skeleton package and @figeleton/figma-plugin Skeleton components generated in

Apr 30, 2022

Customise this Figma plugin template for your own design team.

Design Toolkit Customise this Figma reference plugin to provide useful resources and automations for yourself or your team. Inspect the code to see ho

Jul 7, 2022

[GSoC Project] Rocket.Chat App that connects with Figma

Getting Started Now that you have generated a blank default Rocket.Chat App, what are you supposed to do next? Start developing! Open up your favorite

Jul 12, 2022

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Aug 26, 2022
Comments
  • Add support for new file format in Figma 116.3.8

    Add support for new file format in Figma 116.3.8

    Figma 116.3.8 introduced a new format for .fig it is no longer just a binary compressed with kiwi-fig format. It is now a zip.

    This PR introduces support for both the new format and older format

    opened by yagudaev 1
Releases(v0.1.0)
Owner
Michael Yagudaev
Programmer & Creative Spirit, Conceptual.so, emojinatino.io, 1touch.photo and PictureThat.io, #Typescript, #React, #AR, #VR, #UX, #JS, #Design
Michael Yagudaev
Use 1400+ 3dicons within Figma or Figjam files quickly

3dicons Figma plugin Use 1400+ 3dicons within Figma or Figjam files quickly. The icons can be searched and filtered by color and angle. Figma Communit

vijay verma 15 Aug 2, 2022
JCS (JSON Canonicalization Scheme), JSON digests, and JSON Merkle hashes

JSON Hash This package contains the following JSON utilties for Deno: digest.ts provides cryptographic hash digests of JSON trees. It guarantee that d

Hong Minhee (洪 民憙) 13 Sep 2, 2022
Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de créer un tunnel https pour c

AILI Fida Aliotti Christino 2 Mar 29, 2022
Reference for How to Write an Open Source JavaScript Library - https://egghead.io/series/how-to-write-an-open-source-javascript-library

Reference for How to Write an Open Source JavaScript Library The purpose of this document is to serve as a reference for: How to Write an Open Source

Sarbbottam Bandyopadhyay 170 Jul 20, 2022
Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test and also deploy.

GraphQL Blog graphqlblog.com Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test an

GraphQLApps 6 Aug 17, 2022
Piplup: decompile Playdate Pulp .pdx files back to .json project files

Piplup: decompile Playdate Pulp .pdx files back to .json project files This doesn't work yet: I still need to: convert the graphics (.pdt files) back

null 6 Mar 25, 2022
A JavaScript library to read, write, and merge ZIP archives in web browsers.

Armarius About Armarius is a JavaScript library to read, write, and merge ZIP archives in web browsers. This library mainly focuses on a low memory fo

Aternos 4 Apr 10, 2022
Write and read comments on every page with a simple plug-in for your browser

Licom - comments on every webpage Licom is a simple plugin for your browser that adds the feature to leave comments on every page, even if it doesn't

Sebastian Korotkiewicz 45 Aug 4, 2022
a cobbled together alternative UI to launchdarkly, allowing read/write access via LD API access token

discount-launchdarkly a cobbled together alternative UI to launchdarkly, allowing read/write access via LD API access token setup make sure you have a

null 5 Sep 19, 2022
Read without losing the plot. Well Read helps you organize your notes about books you're reading, so you're never lost when starting a new volume.

Well Read Well Read is a website for tracking your reading of long book series. I made this to track how many pages I read in a session and to better

null 3 Jan 31, 2022