サポートされてるデザインオプション

埋め込みコンポーネントに使用できるデザインのオプションをご確認ください。

埋め込みコンポーネントの Figma UI ツールキットには、それぞれのコンポーネント、共通パターン、サンプルアプリケーションが含まれています。これを使用してウェブサイトで埋め込み UI を視覚化し、設計できます。

You can use any of the following appearance properties on the customization page. This page also automatically generates a snippet for you to use on your site based on the specified appearance parameters.

Variables

The variables object includes the following optional properties, which apply to all Connect embedded components in your application.

よく使用される変数

名前	タイプ	値のサンプル
`fontFamily`	文字列	`sans-serif`
埋め込みコンポーネント全体で使用されるフォントファミリーの値。埋め込みコンポーネントが、要素が配置されているサイトの `font-family` 値を継承する場合、この設定はその継承を上書きします。
`fontSizeBase`	文字列	`16px`
埋め込みコンポーネントのルートに設定されるベースラインのフォントサイズ。これにより、その他のフォントサイズ変数の値が拡大/縮小されます。ピクセル値のみを使用できます。
`spacingUnit`	文字列	`8px`
他のすべてのスペースの元となるスペースの基本単位。この値を増減することで、レイアウトの間隔を調整します。ピクセル値のみを使用できます。
`borderRadius`	文字列	`15px`
埋め込みコンポーネントで使用される一般的な境界角丸半径。これにより、すべてのコンポーネントのデフォルトの境界の角丸半径が設定されます。ピクセル値のみを使用できます。
`colorPrimary`	文字列	`#0074D4`
埋め込みコンポーネント全体で使用される主要な色。これを、ブランドの主要カラーに設定してください。16 進値または RGB/HSL の文字列が受け入れられます。
`colorBackground`	文字列	`#FFFFFF`
オーバーレイ、ツールチップ、ポップオーバーなど、埋め込みコンポーネントの背景の色。16 進値または RGB/HSL の文字列が受け入れられます。
`colorText`	文字列	`#444444`
通常のテキストに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`colorDanger`	文字列	`#DF1B41`
エラーまたは破壊的なアクションを示すために使用される色。16 進値または RGB/HSL の文字列が受け入れられます。

使用頻度の少ない変数

名前	タイプ	値のサンプル
`buttonPrimaryColorBackground`	文字列	`#0074D4`
プライマリーボタンの背景として使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`buttonPrimaryColorBorder`	文字列	`#0074D4`
プライマリーボタンに使用される境界の色。16 進値または RGB/HSL の文字列が受け入れられます。
`buttonPrimaryColorText`	文字列	`#FFFFFF`
プライマリーボタンに使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。
`buttonSecondaryColorBackground`	文字列	`#EBEEF1`
セカンダリ―ボタンの背景として使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`buttonSecondaryColorBorder`	文字列	`#EBEEF1`
セカンダリ―ボタンの境界として使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`buttonSecondaryColorText`	文字列	`#393B3E`
セカンダリ―ボタンに使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。
`colorSecondaryText`	文字列	`#717171`
セカンダリ―テキストに使用される色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`actionPrimaryColorText`	文字列	`#0074D4`
プライマリーアクションとリンクに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`actionPrimaryTextDecorationLine`	文字列	`underline`
プライマリーアクションとリンクのテキストの装飾に使用される線の種類。有効な text-decoration-line 値が受け入れられます。
`actionPrimaryTextDecorationColor`	文字列	`#0074D4`
プライマリーアクションとリンクのテキスト装飾に使用される色。16 進値または RGB / HSL 文字列が受け入れられます。
`actionPrimaryTextDecorationStyle`	文字列	`solid`
プライマリーアクションとリンクのテキスト装飾の種類。有効な text-decoration-style 値が受け入れられます。
`actionPrimaryTextDecorationThickness`	文字列	`1px`
プライマリーアクションとリンクのテキスト装飾の太さ。有効な text-decoration-thickness 値が受け入れられます。
`actionSecondaryColorText`	文字列	`#444444`
セカンダリ―アクションとリンクに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`actionSecondaryTextDecorationLine`	文字列	`underline`
セカンダリーアクションとリンクのテキストの装飾に使用される線の種類。有効な text-decoration-line 値が受け入れられます。
`actionSecondaryTextDecorationColor`	文字列	`#0074D4`
セカンダリーアクションとリンクのテキスト装飾に使用される色。16 進値または RGB / HSL 文字列が受け入れられます。
`actionSecondaryTextDecorationStyle`	文字列	`solid`
セカンダリーアクションとリンクのテキスト装飾の種類。有効な text-decoration-style 値が受け入れられます。
`actionSecondaryTextDecorationThickness`	文字列	`1px`
セカンダリーアクションとリンクのテキスト装飾の太さ。有効な text-decoration-thickness 値が受け入れられます。
`badgeNeutralColorBackground`	文字列	`#E4ECEC`
ステータスバッジで中立的なステータスまたはステータスの欠如を表すために使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeNeutralColorText`	文字列	`#545969`
ステータスバッジで中立的なステータスまたはステータスの欠如を表すために使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeNeutralColorBorder`	文字列	`#CBD5D6`
ステータスバッジで中立的なステータスまたはステータスの欠如を表すために使用される境界の色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeSuccessColorBackground`	文字列	`#CEF6BB`
ステータスバッジで結果が成功であったことを強調するために使用される背景の色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`badgeSuccessColorText`	文字列	`#05690D`
ステータスバッジで結果が成功であったことを強調するために使用されるテキストの色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`badgeSuccessColorBorder`	文字列	`#B4E1A2`
ステータスバッジで結果が成功であったことを強調するために使用される境界の色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`badgeWarningColorBackground`	文字列	`#FCEEBA`
ステータスバッジで、アクションが必要であるが、解決は任意である状況を強調表示するために使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeWarningColorText`	文字列	`#A82C00`
ステータスバッジで、アクションが必要であるが、解決は任意である状況を強調表示するために使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeWarningColorBorder`	文字列	`#F5DA80`
ステータスバッジで、アクションが必要であるが、解決は任意である状況を強調表示するために使用される境界の色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeDangerColorBackground`	文字列	`#F9E4F1`
ステータスバッジで、ユーザーがすぐに対応する必要がある優先度の高い重大な状況で結果が失敗であったことを示すために使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeDangerColorText`	文字列	`#B3063D`
ステータスバッジで、ユーザーがすぐに対応する必要がある優先度の高い重大な状況で結果が失敗であったことを示すために使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。
`badgeDangerColorBorder`	文字列	`#F2C9E3`
ステータスバッジで、ユーザーがすぐに対応する必要がある優先度の高い重大な状況で結果が失敗であったことを示すために使用される境界の色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`offsetBackgroundColor`	文字列	`#FFFFFF`
表で選択された行や特定の UI など、情報を強調表示するときに使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。
`formBackgroundColor`	文字列	`#FFFFFF`
フォーム項目に使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。
`colorBorder`	文字列	`#D7D7D7`
コンポーネント全体の境界に使用される色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`formHighlightColorBorder`	文字列	`#D7D7D7`
フォーム項目にフォーカスを当てたときの強調表示に使用される色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。
`formAccentColor`	文字列	`#0074D4`
チェックボックス、ラジオボタン、スイッチなど、フォーム項目の塗りつぶしに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。
`buttonBorderRadius`	文字列	`4px`
ボタンに使用される境界の角丸半径。ピクセル値のみを使用できます。
`formBorderRadius`	文字列	`6px`
フォームエレメントに使用される境界の角丸半径。ピクセル値のみを使用できます。
`badgeBorderRadius`	文字列	`4px`
バッジに使用される境界の角丸半径。ピクセル値のみを使用できます。
`overlayBorderRadius`	文字列	`8px`
オーバーレイに使用される境界の角丸半径。ピクセル値のみを使用できます。
`overlayZIndex`	数字	`1000`
埋め込みコンポーネント全体でオーバーレイに使用する Z インデックス。オーバーレイの Z オーダーを制御するには、この数値を設定してください。
`overlayBackdropColor`	文字列	`#F9E4F1`
オーバーレイが開かれたときの背景の色。16 進値または RGB / RGBA / HSL の文字列が受け入れられます。
`bodyMdFontSize`	文字列	`16px`
中程度の本文のタイポグラフィーのフォントのサイズ。本文のタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`bodyMdFontWeight`	文字列	`400`
中程度の本文のタイポグラフィーのフォントの太さ。本文のタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`bodySmFontSize`	文字列	`14px`
小さい本文のタイポグラフィーのフォントのサイズ。本文のタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`bodySmFontWeight`	文字列	`400`
小さな本文のタイポグラフィーのフォントの太さ。本文のタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`headingXlFontSize`	文字列	`28px`
特大の見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`headingXlFontWeight`	文字列	`700`
特大の見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`headingXlTextTransform`	文字列	`uppercase`
特大の見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。
`headingLgFontSize`	文字列	`24px`
大きい見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`headingLgFontWeight`	文字列	`700`
大きな見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`headingLgTextTransform`	文字列	`uppercase`
大きな見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。
`headingMdFontSize`	文字列	`20px`
中程度の見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`headingMdFontWeight`	文字列	`700`
中程度の見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`headingMdTextTransform`	文字列	`uppercase`
中程度の見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。
`headingSmFontSize`	文字列	`16px`
小さな見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`headingSmFontWeight`	文字列	`700`
小さい見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`headingSmTextTransform`	文字列	`uppercase`
小さな見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。
`headingXsFontSize`	文字列	`12px`
極小の見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`headingXsFontWeight`	文字列	`700`
極小の見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`headingXsTextTransform`	文字列	`uppercase`
極小の見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。
`labelMdFontSize`	文字列	`14px`
中程度のラベルのタイポグラフィーのフォントのサイズ。ラベルのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`labelMdFontWeight`	文字列	`400`
中程度のラベルのタイポグラフィーのフォントの太さ。ラベルのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`labelMdTextTransform`	文字列	`uppercase`
中程度のラベルのタイポグラフィーのテキスト変換。ラベルのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。
`labelSmFontSize`	文字列	`12px`
小さなラベルのタイポグラフィーのフォントのサイズ。ラベルのタイポグラフィーの変数では、有効なフォントサイズの値が受け入れられます。
`labelSmFontWeight`	文字列	`400`
小さいラベルのタイポグラフィーのフォントの太さ。ラベルのタイポグラフィーの変数では、有効なフォントの太さの値が受け入れられます。
`labelSmTextTransform`	文字列	`uppercase`
小さなラベルのタイポグラフィーのテキスト変換。ラベルのタイポグラフィーの変数では、有効なテキスト変換値が受け入れられます。

Overlays

The overlays property controls whether to use a dialog (also known as a modal) UI or a drawer UI for overlays. Choose the value that best suits your website.

名前	タイプ	Example value
`overlays`	文字列	`dialog`
The type of overlay embedded components uses. Valid values are `dialog` (default) and `drawer`.