プロトタイプで式を使用する – Figma Learn - ヘルプセンター

🚧 バリアブルは現在、オープンベータ版です。この期間中、さらに機能を追加し、エクスペリエンスに磨きをかけていきます。次に何が登場するかはこちら →

はじめに

この機能を使用できるユーザー

すべての有料プランで利用可能。

ファイルへの編集可のアクセス権があれば、誰でもプロトタイプを作成できます。

ファイルへの閲覧のみまたはプロトタイプの閲覧のみのアクセス権があれば、誰でもプロトタイプを閲覧できます。

バリアブルを使用したプロトタイプ作成により、シンプルなフレームやインタラクションをいくつか使用するだけで、ユーザーの選択によって変化するリアルなプロトタイプを作成することができます。

プロトタイプをさらに強化するには式が有効です。式を使うことで、動的な文字列や数値の生成、ブール式の評価をすることができます。

式を使ったプロトタイプ作成でできること:

購入総額を計算するショッピングカートの作成
音量や進行バーなど、拡大縮小するオブジェクトの構築
ユーザーの選択に基づく新たな文字列の結合や構築

バリアブルの詳細はこちら:

もっと多くのハンズオン練習を受けたいですか?

高度なプロトタイプ作成のプレイグラウンドファイル→を確認

式を使用する箇所

式によって、基本的な演算を使用してバリアブルの値を操作する方法を提供します。以下に使用できます:

選択したバリアブルが数値、文字列、ブールタイプの場合のバリアブルを設定プロトタイプアクション
条件付きアクションの一部としての条件付きプロトタイプアクション

インタラクションの詳細モーダル上の以下のフィールドに式を直接書くことができます。

1: An interaction details panel, with a Set Variable action setting the itemCount variable to itemCount + 1. 2: An interaction details modal, with a Conditional action evaluating IF itemCount == 0.

[バリアブルを～に設定]: 選択したバリアブルの新たな値を示す式を入力
[条件付きアクション] if: アクションに必要な条件を示すブール式を入力

プロトタイプで式を作成するには、サポートされている構文を使用して利用可能なフィールドに直接書くか、選択パネルを使用して提案されたバリアブルや演算から選択します。

1. Interaction details modal. User clicks suggested variables and operators from the dropdown to build an expression. 2. Interaction details modal. User manually types in variables and operators to build an expression.

式が完成したら、EnterまたはReturnを押します。サポートされている演算や構文で書いた式のみが動作します。無効な式は赤く表示されます。

式を書く

式は値と演算子で構成されます。

演算子は、実行または評価(加算や減算など)している機能を表します。
値は、演算子が実行中または評価中の項目です。

たとえば、以下の式をご覧ください。

variableName + 2

この例では、演算子は加算であり、+ プラス記号で示されています。値はvariableNameと2です。

式の種類は、利用できる値や演算子で決定されます。

数値式

数値式は以下の値の種類で書くことができます。

数字バリアブル
数字リテラル(0.5、1、10など)

以下の演算子は数値式で使用できます。

演算	記号
加算	+
減算	-
乗算	*
除算	/

An interaction on an Add to Cart button. The interaction is setting the number totalCost variable to subTotal multiplied by salesTax.

文字列式

文字列式は以下の値の種類で書くことができます。

文字列リテラル("John Doe”、“アイテム2”, “5”など)
数字リテラル
文字列バリアブル、数字バリアブル

文字列リテラルは、引用符で囲む必要があります。数値は文字列値に加えることができます。

以下の演算子は文字列式に使用できます。

演算	記号
文字列に追加	+

An interaction on an avator selection frame. The interaction is setting the value of the string userName variable to Ernie, then setting the value of the string welcomeMessage variable to Welcome back + userName.

ブール式

ブール式は以下の値の種類で書くことができます。

ブールリテラル(true、false)
数字リテラル
文字列リテラル
ブールバリアブル、文字列バリアブル、数字バリアブル

以下の演算子はブール式に使用できます。

演算	記号
等しい	==
等しくない	!=
および	and
または	or
より大きい	>
未満	<
以上	>=
以下	<=
加算**	+
減算**	-
乗算**	*
除算**	/
文字列に追加**	+

**数値演算子や文字列演算子はブール式の評価に使用しませんが、複雑な式での演算の補助として使用できます。

A design of a cake making checklist. On the final step, there is an interaction:
Set boolean variable cakeComplete to cakeVisibility == true and frostingVisibility
== true and sprinkleVisibility == true.

ブール式はtrueまたはfalseの値に解かれます。1つの式を使ってブールバリアブルを設定した場合、式の結果はtrueまたはfalseのどちらかに評価され、ブールバリアブルの新たな値が設定されます。

たとえば、以下の単純なインタラクションと式をご覧ください。

itemCountを0に設定
itemCount > 5

itemCountの値は0であり、5未満です。したがって、この式の値はfalseとなります。ただし、下記の例を見てみましょう。

itemCountを6に設定
itemCount > 5

itemCountの値は6であり、5より大きいため、この式の値はtrueとなります。

ブール式の例を以下のタブで示します。この例では、以下のステートメントがtrueとなります。

numberVariable1 ==  1
numberVariable2 ==  2
stringVariable1 ==  red
stringVariable2 ==  blue

値が等しい場合、trueを返します。
値が等しくない場合、falseを返します。

例:

booleanVariableを設定:
numberVariable1 == numberVariable2

結果:1は2と等しくないため、booleanVariableはfalseに設定されます。

booleanVariableを設定:
numberVariable1 + 1 == numberVariable2

結果:1+1は2と等しいため、booleanVariableはtrueに設定されます。

値が等しくない場合、trueを返します。
値が等しい場合、falseを返します。

例:

booleanVariableを設定:
stringVariable1 != stringVariable2

結果:redはblueと等しくないため、booleanVariableはtrueに設定されます。

booleanVariableを設定:
numberVariable1 + 1 != numberVariable2

結果:2は2と等しいため、booleanVariableはfalseに設定されます。

両方の値が真の場合、trueを返します。
両方の値が偽の場合、falseを返します。

例:

booleanVariableを設定:
numberVariable1 == 1 and numberVariable2 == 2

結果:1と1and2と2が等しいため、booleanVariableはtrueに設定されます。

booleanVariableを設定:
numberVariable1 > 5 and numberVariable2 == 2

結果:1は5未満のため、booleanVariable はfalseに設定されます。

片方または両方の値が真の場合、trueを返します。
両方の値が偽の場合、falseを返します。

例:

booleanVariableを設定:
stringVariable1 == red or stringVariable2 == purple

結果:redはredと等しいため、booleanVariableはtrueに設定されます。

booleanVariableを設定:
stringVariable1 == green or stringVariable2 == orange

結果:redはgreenともorangeとも等しくないため、booleanVariableはfalseに設定されます。

注: ブール式は、条件ステートメントの評価にも使用されます。

複雑な式と演算子の順序

複雑な式では、複数の演算子を1つの式に使用して作成します。括弧を使って式をグループ化します。

複雑な式では、以下の順序で基本の数学演算子が実行されます。

括弧
乗算/除算
加算/減算

ブール式演算子は以下の順序で実行されます。

括弧
比較(==、!=、>、<、など)
And
Or

すべての演算子は左から右に実行されます。

以下は式の例です。

x + y * z

まずはyをzで乗算し、次にxを加算します。

以下のブール式になります。

x == (y > z)

まずはyがzより大きい場合に評価します。次にxが解であるy > zと等しい場合に評価します。

式の概念

数字を否定する

正の数値を負の数値に設定するには、0からその数値を減算します。

たとえば、正の値の数字バリアブル(numVar) は、以下の式を使って否定することができます。

0 - numVar

負の数値を正の数値に設定するには、-1を掛けます。

たとえば、負の値の数字バリアブル(numVar)は、以下の式で正にすることができます。

(0 - 1) * numVar

ブール値を否定する

ブール値を否定することは、その倫理状態を反転させることです。真のブール値を否定すると偽となり、偽のブール値を否定すると真となります。

トグル、ボタン、その他の設定など、相反する2つのステータスのあるオブジェクトを作成する際、ブール値の否定が有効です。

ブール値を否定するには、以下の式を使用します。

boolVar != true

!=演算を使用することで、値が等しくない場合trueを返し、値が等しい場合falseを返します。つまり、以下のようになります。

boolVar値がtrueの場合、trueはtrueと等しいため、ステートメントはfalseと評価されます。
boolVar値がfalseの場合、falseはtrueと等しくないため、ステートメントはtrueと評価されます。

試してみる

例:音量コントロールバーを作成

はじめに、基本のシェイプをいくつか使ってフレームを設定し、音量バーとコントロールを表示しましょう。

長方形を1つ追加して、音量コンテナ(ここでは幅260、高さ100)を表示します。
2つ目の長方形を追加し、音量レベルを表示します。この長方形は1つ目の長方形の上に配置し、左側に揃えます。2つ目の長方形の幅は、1つ目の長方形よりも小さくします(高さ100、幅は14以上)。
線を使ってプラス記号とマイナス記号を表すオブジェクトを作成し、音量コンテナの下部に配置します。

A frame with a design of a volume control bar, consisting of two rectangle objects, a plus sign, and a minus sign.

次に、バリアブルを作成する必要があります。新しいコレクションで、数値バリアブルを作成します。その数値バリアブルにvolumeLevelという名前を付け、初期値を14にします。

それでは、volumeLevelバリアブルを音量レベルを表す長方形の幅の値にバインドしましょう。

小さい方の長方形をクリックして選択します。
右サイドバーの[デザイン]タブで、幅の値を確認します。
幅の値フィールドにカーソルを合わせてから、 [バリアブルを適用]を選択します。
バリアブル選択パネルのバリアブルvolumeLevelを選択します。

これでフレームとバリアブルの設定が完了しました。それではプロトタイプ作成のインタラクションを作成しましょう。

フレームのプラス記号オブジェクトをクリックします。
右サイドバーの[プロトタイプ]タブから、プラスアイコンをクリックして新しいインタラクションを追加します。
トリガーを[タップ/クリック]に、アクションを[バリアブルを設定]にそれぞれ設定します。volumeLevelバリアブルを選択します。
式を使って新しい値を設定します。ユーザーがプラスアイコンをクリックするたびに5ずつ大きくなるように音量レベルの幅を設定するには、次の式を使います。
volumeLevel + 5
続けて、手順1～4でマイナスアイコンのアクションを設定します。今回は、バリアブルの新しい値の設定に次の式を使います。
volumeLevel - 5

プロトタイプを再生して、インタラクションをテストしましょう。 The prototype plays. When the plus sign is clicked, volume level increases in width. When minus button is clicked, volume level decreases in width.