Figma Raw: Export Design Data for AI/LLM & Agents

About this plugin

Bridge the gap between your Figma designs and the power of AI.

Japanese below / 日本語は後半に記載

Figma Raw exports detailed information about your selected Figma elements into clean, structured JSON, ready to be used with any AI/LLM tool or AI coding agent like Cursor or Devin.

🚀 NEW: Export Multiple JSON Files

Export your designs as downloadable JSON files! Select a single node for a .json file, or multiple nodes for a .zip archive. Now AI agents can process entire design systems and multiple screens in one go - a game-changer for AI-powered design-to-code workflows.

Why Figma Raw?

1. Detailed & Accurate Export: Go beyond basic layers. Figma Raw extracts component names, properties, Auto Layout settings, and crucially, resolves the exact names of your Figma Variables (design tokens) and Text Styles.
2. Seamless AI Integration: Copy the generated JSON (Pretty or Minified), export as files, or paste directly into your AI tool's prompt. Accelerate code generation, design analysis, documentation, and more.
3. Design System Aware: Because Figma Raw includes the precise names from your design system (e.g., colors/primary/500, typography/body-large), you can instruct AI to generate code that perfectly aligns with your existing system, ensuring consistency.
4. Generic & Future-Proof: This is a universal solution. Export once and use the JSON data across various LLMs and AI agents without being locked into a specific platform.
5. Empower AI Agents: Provide AI agents like Cursor or Devin with the rich, structured design context they need to generate accurate, production-ready code directly from your Figma designs. With file export, agents can now process multiple designs automatically.

How it Works:

1. Select the Figma nodes (frames, components, text, etc.) you want to export.
2. Run the "Figma Raw" plugin.
3. Copy the JSON data (Pretty or Minified) or click "Export JSON" to download files.
4. Use the data with your AI/LLM tool or agent.

Ideal for:

1. Frontend Developers leveraging AI for code generation at scale.
2. Designers seeking accurate design handoffs to AI tools.
3. Teams aiming to maintain design system consistency in AI-assisted workflows.
4. Users of AI coding agents (Cursor, Devin, etc.) wanting to work directly from Figma designs.
5. Anyone building AI-powered design-to-code pipelines.

This plugin is a private project by Tokyo-based designer Yasuhiro Yokota.

---

FigmaのデザインとAIの力を繋ぐ

Figma Rawは、選択したFigma要素に関する詳細情報を、クリーンで構造化されたJSONとしてエクスポートします。これは、あらゆるAI/LLMツールや、CursorやDevinのようなAIコーディングエージェントで使用する準備ができています。

🚀 新機能：複数JSONファイルのエクスポート

デザインをダウンロード可能なJSONファイルとしてエクスポートできます！単一のノードを選択すると.jsonファイルに、複数のノードを選択すると.zipアーカイブになります。これにより、AIエージェントはデザインシステム全体や複数のスクリーンを一度に処理できるようになり、AIを活用したデザインからコードへのワークフローにおいて画期的な変化をもたらします。

Figma Rawを選ぶ理由

1. 詳細かつ正確なエクスポート: 基本的なレイヤーを超えて、Figma Rawはコンポーネント名、プロパティ、オートレイアウト設定、そして決定的に重要なFigma変数（デザインシステムトークン）とテキストスタイルの正確な名前を解決して抽出します。
2. シームレスなAI統合: 生成されたJSON（整形済みまたはミニファイ済み）をコピーしたり、ファイルとしてエクスポートしたり、AIツールのプロンプトに直接貼り付けたりできます。コード生成、デザイン分析、ドキュメント作成などを加速させます。
3. デザインシステム対応: Figma Rawはデザインシステムからの正確な名前（例: colors/primary/500, typography/body-large）を含んでいるため、AIに既存のシステムに完全に合致するコードを生成するよう指示でき、一貫性を確保します。
4. 汎用的で将来性: これはユニバーサルなソリューションです。一度エクスポートすれば、特定のプラットフォームに縛られることなく、様々なLLMやAIエージェントでJSONデータを使用できます。
5. AIエージェントを強化: CursorやDevinのようなAIエージェントに、Figmaのデザインから直接、正確で本番環境対応のコードを生成するために必要な豊富で構造化されたデザインコンテキストを提供します。ファイルエクスポートにより、エージェントは複数のデザインを自動的に処理できるようになりました。

仕組み:

1. エクスポートしたいFigmaノード（フレーム、コンポーネント、テキストなど）を選択します。
2. 「Figma Raw」プラグインを実行します。
3. JSONデータ（整形済みまたはミニファイ済み）をコピーするか、「Export JSON」をクリックしてファイルをダウンロードします。
4. そのデータをAI/LLMツールまたはエージェントで使用します。

こんな方に最適です:

1. AIを活用して大規模なコード生成を行うフロントエンド開発者。
2. AIツールへの正確なデザインハンドオフを求めるデザイナー。
3. AIアシストワークフローでデザインシステムの一貫性を維持したいチーム。
4. Figmaデザインから直接作業したいAIコーディングエージェント（Cursor, Devinなど）のユーザー。
5. AIを活用したデザインからコードへのパイプラインを構築しているすべての人。

このプラグインは東京のデザイナー、Yasuhiro Yokota のプライベートプロジェクトです。

Enjoy vibe coding🎉