スタイルと外観

Design タブ（右パネル）では、各要素の見た目を調整できます。利用できるプロパティは要素の種類によって異なりますが、ほとんどの要素には共通のスタイルオプションがあります。

サイズ、間隔、配置については、レイアウトと配置を参照してください。

表示設定

Visibility トグルは、画面上に要素を表示するかどうかを制御します。

Show（デフォルト）: 要素は常に表示されます。
Conditional: 特定の条件が満たされた場合にのみ要素が表示されます。詳しくは条件付き表示を参照してください。
Hide: 要素は常に非表示になります。要素を削除せずにフローから一時的に除外したい場合に使用します。

塗りつぶし

Fill セクションでは、要素の背景を設定できます。ソリッドカラー、グラデーション、画像、動画の4種類の塗りつぶしタイプが使用可能です。

このプロパティを使って、画面全体のヒーロー画像や動画を設定できます。

単色。カラーピッカーを使うか、16進数値を入力するか、プロジェクト全体のカラースタイルを割り当てます。不透明度を調整して背景を半透明にすることもできます。
グラデーション 。2つ以上のカラーストップを使ってグラデーションの塗りつぶしを追加します。ストップをドラッグして色の変化を調整し、グラデーションの角度を変えて方向をコントロールします。

Configuring a gradient fill with multiple color stops

Image または Video 。要素の背景として画像・動画を設定します。

ボーダー

ボーダーはデフォルトでオフになっています。右パネルの Border の横にあるをクリックして追加してください。ボーダーを削除するには、Border 見出しの横にあるをクリックします。

ボーダーを追加した場合、以下の設定を行えます：

Color：カラーピッカーを使用するか、16進数値を入力するか、プロジェクト全体のカラースタイルを割り当てます。opacity を調整してボーダーを半透明にすることもできます。
Width：ボーダーの太さをピクセル単位で指定します。

コーナー

Corners セクションはボーダー半径（角丸）を設定します。

Radius スライダー: 4つすべてのコーナーに同じ半径を設定します
コーナーごとの切り替え : 有効にすると、各コーナーに異なる半径を個別に設定できます

エフェクト

Effects の横にあるプラスボタンをクリックすると、1つ以上のビジュアルエフェクトを追加できます。

Drop shadow: 要素の背後に影を表示します
Inner shadow: 要素の境界内に影を表示します
Background blur: 背景をぼかします
Layer blur: 要素とその子要素をぼかします

同じ要素に複数のエフェクトを重ねて適用できます。表示アイコンをクリックすると、エフェクトを一時的に無効にできます。

アニメーション

Animation の横にあるボタンをクリックすると、アニメーション効果を追加できます。現在利用できるアニメーションは Pulse のみで、要素がリズミカルに拡大・縮小して注目を集めます。

Pulse アニメーションは以下のパラメーターで設定できます。

パラメーター	説明
Scale amount (%)	元のサイズに対して要素がどれだけ拡大するか
Duration (ms)	1回のアニメーションサイクルの長さ
Delay between loops (ms)	繰り返しの間の一時停止
Shadow color	パルスする影エフェクトの色
Shadow size (px)	パルスする影のサイズ

アニメーションのプレビュー

ビルダーはデフォルトで静止したスクリーンを表示します。アニメーションを確認するには、以下のいずれかの方法でオンにします。

デバイスプレビューの上にある Toggle animations ボタンをクリックします。スクリーンのアニメーションのオン・オフを切り替え、オンにすると再度クリックするまでアニメーションが連続再生されます。このボタンは、アクティブなスクリーンに少なくとも1つのアニメーションが含まれている場合にのみ表示されます。
スクリーンレイヤーの横にある三点アイコンからスクリーンのコンテキストメニューを開き、Play Animation を選択します。

外観

Opacity: 0%（透明）から100%（不透明）の範囲で設定します
Rotation: 度数値を入力してエレメントを回転させます

タイポグラフィプロパティ（テキストエレメント）

テキストエレメントには以下のコントロールを含む Typography セクションが表示されます。

フォント

サイズとウェイト

カスタムフォントの場合、Weight、Bold、Italic のコントロールはエディタの組み込みプレビューにのみ影響します。異なるウェイトやスタイルを表示するには、フォントのバリエーションごとに別々のファイルをアップロードしてください。

Weight: ドロップダウンからフォントウェイトを選択します
Size: ドロップダウンからサイズを選択するか、カスタム値を入力します

色

カラースウォッチをクリックしてカラーピッカーを開きます。16進数値を入力するか、パレットを使用するか、再利用可能なスタイルから選択します。不透明度スライダーを調整してテキストを半透明にできます。

揃え

2グループの揃えコントロールがあります。

水平: 左揃え、中央揃え、右揃え
垂直: 上揃え、中央揃え、下揃え

装飾

None : 装飾なし（デフォルト）
Underline : テキストに下線を追加します
Strikethrough : テキストに取り消し線を追加します

トランケーション

トランケーションを有効にすると、Max Lines の設定を超えたテキストを切り捨てます。複数の言語をサポートする場合に便利です。翻訳後の文字列が元の文字列より長くなっても、トランケーションによってレイアウトが崩れるのを防ぎます。

テキストエレメントを選択すると、キャンバス上でその上部にインラインツールバーも表示されます。このツールバーから、右パネルをスクロールせずにフォント、ウェイト、サイズ、揃えにすばやくアクセスできます。

状態別設定（インタラクティブエレメント）

インタラクティブエレメントは複数のビジュアル状態をサポートします。該当するエレメントを選択すると、右パネルに States セクションが表示されます。状態を切り替えて、それぞれに異なるビジュアルプロパティを設定します。

各状態では、塗りつぶし、ボーダー、タイポグラフィの色、不透明度など、あらゆるビジュアルプロパティを上書きできます。

選択可能な状態

メイン記事: 選択可能な要素

選択可能なグループに属する要素（クイズの選択肢、プロダクト、タブ、トライアルのトグルなど）は、デフォルトで2つの状態を持ちます：

Default: 要素の通常の外観
Selected: ユーザーがその選択肢を選んだときの外観。塗りつぶし、ボーダーカラー、テキストカラーなどのプロパティを上書きして、アクティブな選択肢を強調できます選択可能な要素が操作不可の状態をスタイリングするには、3番目のステートを手動で追加します。States settings を開き、Disabled state を追加してください。

Disabled ステートは条件によって制御されます。これを選択し、Set conditions をクリックして、実行時に要素が無効になる条件（例：必須フィールドが空の場合など）を定義します。

インプット状態

入力フィールドには追加の状態があります。

Default: 通常の未フォーカス状態の外観
Active: フィールドがフォーカスされ、入力可能な状態
Invalid: 入力値がバリデーションに失敗した状態
Disabled: フィールドがインタラクティブでない状態

Switching states and applying visual overrides

その他の状態を持つエレメント

一部のエレメントは、標準の Default / Selected / Disabled パターン以外で状態別スタイリングを公開しています。

プログレスインジケーターのステップ — ステップごとに3つの状態: Completed、Current、Upcoming。
カルーセルのドット — 2つのカラーバリアント: 非アクティブなドットの Color と現在のスライドのドットの Active Color。