エレメントのスタイリング

右パネルの Design タブで、各エレメントの見た目を設定します。使用できるプロパティはエレメントの種類によって異なりますが、多くのエレメントは共通のスタイリングオプションを持っています。

サイズとスペース

メイン記事: エレメントの配置

表示

Visibility トグルは、エレメントを画面に表示するかどうかを制御します。

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

サイズ指定

各エレメントには Width と Height の設定があり、3つのモードから選択できます。

Fill: 親要素の空きスペースをすべて占有するように伸長します
Hug: エレメントのコンテンツに合わせて縮小します
Fixed: 寸法に正確なピクセル値を設定します

スペーシング

Spacing セクションには、2つのレイヤーを持つボックスモデルが表示されます。

Margin: エレメントと隣接要素との間のスペースです。値に関わらず、親コンテナの境界を超えて広がることはありません。
Padding: エレメントのボーダーとコンテンツの間のスペースです。

各辺ごとに個別に値を設定できます。

テキストエレメントにはマージンのみがあります。スクリーンにはパディングのみがあります。コンテナや子コンテンツを持つその他のエレメントでは、両方が使用できます。

塗りつぶし

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

このプロパティを使用して、スクリーン全体のヒーロー画像・動画を設定することもできます。

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

Configuring a gradient fill with multiple color stops

画像または動画。画像・動画をエレメントの背景として設定します。

ボーダー

ボーダーはデフォルトでオフになっています。右パネルの 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: ドロップダウンからフォントウェイトを選択します
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。