Layer Tree for AI
Export layer structure and design details for AI tools like Claude and ChatGPT
Plugin Preview
About this plugin
### EnglishLayer Tree for AI exports your Figma layer structure in formats optimized for AI assistants.**Features:**- Tree view: Visual hierarchy with └── ├── │ characters- JSON export: Complete design details including colors, fonts, spacing, and auto layout**What JSON includes:**- Size and position- Colors (fills, strokes) in HEX format- Corner radius- Auto Layout settings (direction, gap, padding, alignment)- Text properties (font, size, line height, letter spacing)- Effects (shadows, blur)- Component information**Use cases:**- Ask AI to convert your design to React/HTML/CSS code- Get AI feedback on your design structure- Document your design systemSimply select layers, click export, and paste into your favorite AI tool.---### Japanese (日本語)Layer Tree for AIは、FigmaのレイヤーをAIツール向けに最適化された形式で出力します。**機能:**- ツリー表示: └── ├── │ を使った階層表示- JSON出力: 色、フォント、余白、Auto Layoutなど完全なデザイン詳細**JSONに含まれる情報:**- サイズと位置- 色(塗り、線)HEX形式- 角丸- Auto Layout設定(方向、gap、padding、配置)- テキスト(フォント、サイズ、行間、文字間隔)- エフェクト(シャドウ、ブラー)- コンポーネント情報**活用例:**- デザインをReact/HTML/CSSコードに変換- デザイン構造についてAIにフィードバックをもらう- デザインシステムのドキュメント化レイヤーを選択して出力ボタンを押すだけ。
Plugin Details
| Version | 1 |
|---|---|
| Created | December 17, 2025 |
| Last Updated | December 17, 2025 |
| Category | Import & export plugins |
| Creator | f-sugino |
| Stats | 4 installs, 2 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML