Paint By JSON

Paint By JSONとは？

Paint By JSONは、プレースホルダーテキストの代わりに、ライブREST APIデータでフレームを埋められるFigmaプラグインです。エンドポイントに接続し、プラグイン内でJSONレスポンスをプレビューし、JSONパスをレイヤー名にマッピングして、それらのマッピングを再利用可能なPaletteとして保存します。

このプラグインは、実際のコンテンツ構造を反映する必要があるデザイン作業向けに作られています。ユーザーは保存したPaletteを1つのフレームや繰り返しコンポーネントのセットに適用し、ファイルをまたいで再利用でき、充填済みのデザインをJSON、Markdown、またはハンドオフ用のSpec Frameとしてエクスポートできます。

主な機能

• ライブエンドポイント、またはGETで取得できるモックJSONに接続でき、静的な例ではなく実際のデータ構造でデザインを埋められます。
• エンドポイント接続時にヘッダーや認証値を指定できるため、デザイン作業中に保護されたAPIも利用できます。
• JSONパスをFigmaのレイヤー名にマッピングでき、ファイル、ライブラリ、レイヤー構造が変わってもPaletteを移植しやすく保てます。
• エンドポイント設定、ヘッダー、マッピングを再利用可能なPaletteとして保存できるため、同じデータ設定を再構築せずに再適用できます。
• キャンバスに値が入る前に、切り詰め、通貨フォーマット、日付解析、条件分岐、連鎖変換などの基本的な変換を行えます。
• 単一フレームへの充填とコレクションモードの両方に対応し、配列を繰り返しコンポーネントのインスタンスへ反映できます。
• 充填済みデザインをJSON、Markdown、またはSpec Frameにエクスポートして、design-to-codeのハンドオフを支援します。
• プラグインiframe内で動作し、APIレスポンスや認証値を製品データベースではなくユーザーの端末上に保持します。

Paint By JSONの使い方

まずFigmaにプラグインをインストールし、使いたいAPIまたはJSONソースのURLを接続します。必要に応じてヘッダーや認証情報を追加し、プラグイン内でレスポンスをプレビューします。

次に、フレーム内のレイヤー名にJSONフィールドをマッピングし、表示や整形に必要な変換を適用します。設定をPaletteとして保存し、1つのフレームまたは繰り返しコンポーネントのセットに適用します。

フレームが充填されたら、Paletteを他のファイルで再利用するか、結果をJSON、Markdown、またはハンドオフ用のSpec Frameとしてエクスポートします。

ユースケース

• 製品で使用するのと同じAPIから取得した、現実的なユーザー名、タイトル、価格、日付を使って製品画面をデザインする。
• データ値が通常のプレースホルダー文より長い、短い、または構造的に異なる場合に、レイアウトが崩れないかを確認する。
• カード、リスト項目、その他のコレクションベースのUIなど、配列レスポンスから繰り返しコンポーネントを充填する。
• デザインシステムで一貫したレイヤー命名を使っている場合に、同じデータマッピングを複数のフレームやファイルで再利用する。
• デザインと基になるデータ構造をJSON、Markdown、またはSpec Frame形式で含むハンドオフ成果物を準備する。

FAQ

Paint By JSONはライブAPIでしか動作しませんか？ いいえ。GETで取得できるデータであれば、ライブAPIレスポンスにもモックJSONにも接続できるとページには記載されています。

保護されたエンドポイントにも対応していますか？ はい。エンドポイント接続時にヘッダーや認証値を追加できます。

何をエクスポートできますか？ 製品ページでは、充填済みフレームをJSON、Markdown、またはSpec Frameとしてエクスポートできると説明されています。

APIデータはクラウドに保存されますか？ ページによると、プラグインはFigma plugin iframe内で動作し、APIレスポンスと認証値は製品データベースには送信されず、端末上に残ります。

保存できるPalette数に上限はありますか？ ページでは無料プランとProプランを含むプラン上限に触れていますが、表示されている具体的な製品上限は、無料プランで2つ、Proで保存可能なPaletteは50です。

代替案

• Figmaで手動のプレースホルダー内容を使う方法。最もシンプルな代替手段ですが、実際のデータ構造でデザインを検証できません。
• スプレッドシート駆動のデザインワークフロー。構造化されたコンテンツには役立ちますが、FigmaでJSONパスを直接紐づける方法とは通常異なる設定が必要です。
• 一般的なFigmaのデータ充填プラグイン。サンプルコンテンツでレイヤーを埋められる場合がありますが、再利用可能なエンドポイントベースのPaletteやエクスポートには、ここまで特化していないことがあります。
• 別の仕様書を使ったデザインハンドオフ。キャンバス外でデータ要件を説明できますが、データマッピングをFigmaフレーム自体に結び付けてはおけません。