SUTRA

About this plugin

🚀 SUTRA: デザインシステムと連携する超高速ワイヤーフレーム・UIジェネレーターSutraとはSutraはFigma上で動作するデザイン支援プラグインです。コンポーネントをキャンバスに即座に生成し、ページレイアウトの骨格を一瞬で作ることができます。プロジェクトの初期ワイヤーフレーム作成から、デザインシステムとの連携まで、段階的に活用できます。1 ワイヤーフレームからデザインシステムまでシームレスに連携プロジェクトの進行度に合わせて、初期の骨格作成から実装レベルのデザインシステム構築まで、1つのツールでシームレスに拡張できる設計になっています。1. ワイヤーフレーム・構成　プラグイン起動後、すぐにコンポーネントやテンプレートをキャンバスに配置する。事前設定は不要です。初期状態から視認性の高い汎用的なデフォルトテーマ（ブルー基調）が適用されており、すぐに情報設計に集中できます。 ブランドカスタマイズ　Tokensタブを開き、プロジェクトのブランドカラーやタイポグラフィ、角丸などを定義する。設定したトークンがFigma Variablesに即座に同期され、生成される全コンポーネントにブランドのトーン＆マナーが反映されます。 デザインシステム運用　ガイドラインの出力や、JSON（W3C形式）のエクスポートを行う。Variablesと完全に紐付いたマスターコンポーネント群を、そのままプロダクトのデザインシステム基盤としてエンジニアと共有できます。2. 豊富なビルトインコンポーネント (Atomic Design準拠)SUTRAには、Atomic Designに準拠した高品質なUIコンポーネントがビルトインされています。Lv1 Atom: ボタン、テキスト入力、バッジ、チェックボックス、スイッチなどLv2 Molecule: アラート、パンくずリスト、アコーディオン、タブ、インプットグループなどLv3 Organism: ナビゲーションバー、データテーブル、カード、ダイアログ、カレンダーなどLv4 Module: APIキー行、ダッシュボードウィジェット、設定パネルなどLayout / Page: ダッシュボード、LP、設定画面などの全体レイアウトテンプレート3. テキストの事前入力 & スロット自動挿入テキスト指定機能: 生成前にボタンやバッジのテキストを指定可能。生成後にFigma上でダブルクリックしてテキストを打ち直す手間を削減します。自動挿入: 「スロットへ自動挿入」をオンにすると、キャンバスで選択中のフレーム（またはその親フレーム）の自動レイアウト構造に合わせて自動的に配置されます。 4. デザイントークン & コード連携のエクスポートUI上でカスタマイズしたスタイル（カラー、間隔、角丸、フォント）を、ワンクリックで各種エンジニアリング用アセットに書き出せます。`sutra-tokens.json` (W3C Design Tokens Draft準拠のJSON)`styles.css` (CSSカスタムプロパティ定義)`guidelines.md` (デザイナー・エンジニア向けのスタイルガイド)`sutra-component-reference.md` (コンポーネント仕様書)Code Connect 用のスタブ（React/Webコンポーネント等のコード連携用） 5. Figma Variables & コントラスト比検証トークン設定を、FigmaのローカルVariablesコレクションへ一瞬で同期・反映。WCAG / APCA 規格に基づき、カラーコントラスト比を自動検証し、アクセシビリティ上の課題を警告します。--- 🛠 使い方Figmaのメニューから **プラグイン > SUTRA** を起動します。**Components** または **Layout** タブから、配置したいUIのボタンをクリックしてキャンバスに挿入します。**Tokens** タブを開き、ブランドの配色、間隔（8pxグリッドなど）、角丸、フォントファミリを調整します。**Figma Variablesに同期** を実行すると、FigmaのVariablesにデザインがバインドされ、全体のトーン＆マナーを一括コントロールできるようになります。実装フェーズでは、**Export** ボタンからトークンJSONやCSS、Code Connect定義を出力し、開発チームへ共有します。