Figma to JSON

Figma to JSON streamlines text extraction from your Figma designs into clean, structured JSON. By following a simple naming convention in the Layers panel (key=, value=, type=component), you can define text keys, multi-language values, and reusable components. Easily generate JSON and filter results for unique values or exclude components—all in just a few clicks!

📝 How to Use:

Name Text Layers Correctly:

1. Use this pattern:key={text_name},value=,type=componentExample:key=button_text_login,value=,type=component key=header_welcome,value=en=Welcome,th=ยินดีต้อนรับ2. Define Values: If value= is left empty, the plugin will use the text from the design.

3. To store multiple languages: Example: value=en=Login,th=เข้าสู่ระบบ4. Mark Components (Optional): Add type=component to tag frequently used text. During JSON export, you can filter out components if needed.

5. Generate JSON: Click "Gen JSON" to create a JSON output based on your settings.

6. Copy JSON: Click "Copy JSON" to copy and use it in your project.

⭐️ Tips- Always start with key- After the key, you can put any variable.- You can add values for variables next to the equal sign.- If the variable next to the equal sign is empty. The value is the same as the text in Figma.