Serendie UI Plugin
更新 2026/5/14
機能
AI相談機能
Serendie UI Kitを使ったUIコンポーネントの設計を、チャット形式で相談することができます。
- 「この画面のテキストにはどのデザイントークンを使えばいい？」
- 「Buttonコンポーネントのプロパティはどう使い分けたらいい？」
- 「いま作っているコンポーネントをレビューしてほしい」
- 「このコンポーネントの命名の相談に乗ってほしい」
- 「Sliderコンポーネントに必要なプロパティを、他のデザインシステムを調査した上で教えて」
上記のような質問が典型例です。このような質問に、Serendie Design Systemのガイドラインやアセットを参照しながら回答します。選択中のフレームなどFigma上のコンテキストがAIに共有されるので、状況を細かく説明する手間なく、すぐに質問できます。
また、コンポーネント設計においては、Serendie UIに限らずUI Kitのスタンダードに習うことも大切です。Serendie UI Pluginは、Material Design 3やArk UIなど、関連するデザインシステムのドキュメントも参照しながら、具体的な改善方法やベストプラクティスについてアドバイスを提供します。
検証・修正機能
Serendie UIはカラーロールやタイポグラフィロールなどデザイントークンのルールが基礎となっています。これらのルールを守ることでコントラスト比など、アクセシビリティが確保されます。検証機能は、Figma上で指定した要素が、デザイントークンのルールに沿っているかをチェックします。
また、選択した画面デザインを分析し、Serendie UIのコンポーネントが利用可能な箇所を検出します。
検出された項目は、一括で自動修正することも可能です。修正の精度は、対象となる画面の複雑さによって変わるため、参考として利用してください。
使い方
AIに相談する
- 相談の対象となる要素をFigma上で選択 (AIにコンテキストとして伝わります)
- 質問候補から選ぶか、相談内容を自由に入力
デザインを検証・修正する
- 検証したい要素をFigma上で選択
- 「検証する」ボタンをクリックすると、デザイントークンの検証結果を表示
- コンポーネントが利用可能な箇所を検出 (AIで分析を行うため対象画面の複雑さによって時間がかかります)
- 「コンポーネントの適用」「デザイントークンの修正」ボタンを押すと自動修正
検証結果は3種類のアイコンで表示されます。
- エラー: デザイントークンのルールに沿っていない箇所があり、修正が必要です
- 警告: デザイントークンが設定されていないなど、確認をおすすめする箇所です
- 正常: 問題ありません
検証結果の項目をクリックすると、Figma上で該当する要素が選択され、どこに問題があるのか確認できます。