n8n:ui-design

UI デザイン

フロントエンドでコンポーネントを構築、スタイリング、使用するための包括的なガイドです。

リファレンス

• コンポーネントをスタイリングする際は、packages/frontend/@n8n/design-system/src/styleguide/*.mdx を使用します
• アニメーションには、rules/web-animation-guidelines.md を使用します
• UI の変更をレビューする際は、rules/web-interface-guidelines.md を使用します

ベストプラクティス

• 必ず packages/frontend/@n8n/design-system/src/css/ の _tokens.scss または _primitives.scss にある CSS 変数を使用します。長さ、色、フォントサイズ、時間をリテラル値として記述する前に、必ずそれぞれを確認してください。各スペーシングトークンには、コメントで px 値が記載されています：--spacing--5xs: 0.125rem; /** 2px **/。このコメントを grep して、px 値に対応するトークンを探します。grep ではトークンファミリーごとに 1 件ずつ結果が返るため、プロパティに合ったファミリーを選びます：margin と padding には --spacing--*、border-radius には --radius--*、height には --height--* を使用します。スタイルガイドの packages/frontend/@n8n/design-system/src/styleguide/spacing-size.mdx にも、同じスケールが表として記載されています。スペーシングスケールは 2px から始まるため、値が小さいことはハードコードする理由にはなりません。ハードコードするのは、検索しても該当するトークンが見つからない場合に限ります。その理由をコメントに記載してください。
• 必ず packages/frontend/@n8n/design-system/src/components の既存コンポーネントを優先して使用します。@deprecated と記されていないコンポーネントを優先してください。
• ソリッドコンポーネントに hover/active のアルファ動作を追加する場合は、明示的なパーセンテージを指定した color-mix() を優先します。
• アニメーションやトランジションを扱う場合は、必ず packages/frontend/@n8n/design-system/src/css/mixins/motion.scss の mixin を優先して使用します

コンポーネント

カスタム実装を作成するのではなく、既存の design-system コンポーネントを使用します：

• 「ワークフローの削除を確認するモーダルダイアログを追加する」→ N8nDialog を使用します
• 「ワークフローのステータスを選択するドロップダウンを追加する」→ N8nDropdown または N8nSelect を使用します
• 「新しいアイテムを追加する + アイコン付きボタンを追加する」→ iconOnly prop を指定した N8nButton を N8nTooltip でラップし、さらに N8nTooltip でラップします。N8nIcon と適切な aria-label を使用します。
• 「破壊的な操作を行うボタンを追加する」→ variant="destructive" を指定した N8nButton を使用します
• 「背景色を白／黒にする」→ ライトモードでは白に var(--background--surface) を使用し、ダークモードでは「black」を使用します
• 「タイトルを自然にアニメーション表示する」→ motion.scss の fade-in-up mixin と var(--duration--base) を使用します