https://github.com/kolodzey/figma-json-export

Figma Jsonify Plugin: Generate JSON from Text Layers.
https://github.com/kolodzey/figma-json-export

figma figma-api figma-plugins figma-to-code typescript

Last synced: about 1 month ago
JSON representation

Figma Jsonify Plugin: Generate JSON from Text Layers.

• Host: GitHub
• URL: https://github.com/kolodzey/figma-json-export
• Owner: kolodzey
• Created: 2024-11-11T14:01:19.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-20T15:03:15.000Z (about 1 year ago)
• Last Synced: 2026-02-04T11:55:03.905Z (4 months ago)
• Topics: figma, figma-api, figma-plugins, figma-to-code, typescript
• Language: JavaScript
• Homepage: https://www.figma.com/community/plugin/1437780775818955662/jsonify
• Size: 47.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Jsonify Plugin

_A simple tool to turn text layers into structured JSON files in seconds._

Jsonify is a Figma plugin that converts text layer into structured JSON files, simplifying the design-to-development handoff. By leveraging layer names, groups, and hierarchies, it organizes text and nested structures into key-value pairs and arrays. This automation eliminates repetitive tasks like manual text copying, making workflows more efficient and streamlined.

For more details about the development process, visit the [Portfolio Page](https://creativejourney.dev/projects/figma-plugin-jsonify).

![1](https://github.com/user-attachments/assets/70bd6417-e54b-413f-93fa-120680c55fb6)

## How JSONify Works

- **Layer names = JSON keys:**


Each layer name becomes a key in your exported JSON.

- **Line breaks = list items:**


Text with line breaks (\n) is split into array entries.

- **Auto layout is skipped:**


Auto layout frames are ignored to keep output clean.

- **Prefix “exclude-” to skip:**


Layers with names starting with exclude- won't be included.

## How to use

Prepare your layers by naming or grouping them. Select the ones you need, then run the plugin.

## Tech Stack

- **Figma API**: Retrieves and processes text layers.

- **TypeScript/JavaScript**: Core logic.

- **HTML & CSS**: For the plugin UI.