プロトタイプで式を使用する – 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と等しい場合に評価します。

式の概念

負の数

負の数を式に使用することができます。負の数を表すには、負号-を使用します。

ブール値を否定する

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

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

ブール値を否定するには、ブーリアンバリアブルの前に!またはnotを入力します。

例として、次の式を考えてみましょう: ! boolVar

boolVar値がtrueの場合、このステートメントはfalseと評価されます。
boolVar値がfalseの場合、このステートメントはtrueと評価されます。