Figma Variablesで%を変更するUIを変数使ってプロトに仕込む
毎度頭ごちゃごちゃVriablesです。
さて、UIのプロト作成で左右のシェブロンを押すと真ん中の設定値が可変するUIを検討しました。数値の飛びと動きを参考に伝えたいのでプロトタイプ化することにしました。こんな仕様。
左右に設定を可変させるシェブロン（-と+）
設定値は10刻み
単位は%
＋（右）を押すと10ずつUP、ー（左）を押すと10ずつDown
とりあえずは以下のGUI。でベースのUIがとりあえずこんな感じ。note用に加工済み。
STEP.1 数字Variables作成
まず使用するVariableを作成します。
Variablesテーブルを開いて
Creat Collectionから新しいコレクション;今回は「Product interactions」を作成
Create variableから# Numberを選択
NameをPercent availableに、Valueを10に設定
STEP.2 真ん中の数字にVariable適用
次に真ん中の数字にバリアブルを設定します。
AutoLayout内の10の数字テキストを選択
Variable 「Percent available」を適用
STEP.3 シェブロンのPrototype設定
左右のシェブロンに動きを設定します。まずは右のUPから。
Prototypeモードにする
シェブロンを選択して On click / Set variableを選択
Product interactions以下の # Percent availableを選択
to 指示に再度 # Percent availableを選択
計算を Addition +を選択
+ の後ろに10と文字打ち
これで完了です。
つまり、
「＞を押すと# Percent availableのVariableから# Percent availableのVariable遷移するけど数量を10足して遷移します」
ということです。
左の-も同様に設定だが、Subtraction（-）を設定して10と文字打ち。
これで完成。だけど色々難点あり。
作成できたが問題がいろいろあった。
動きがもっっさり
重いし、クリックしてもリアルタイムに反映されない。でもこれは自分の作成環境やファイルのせいかも。
参照：MacBook Pro 2017 15inchを初期化したらHigh Sierraがインストールできず危うく文鎮化するとこだった件
プラスマイナス青天井。
100%と0%で頭打ちにしたいが、現状青天井。Conditionでif分追加すればこれは抑制できるが僕の頭が追いつかないのでまたの機会。
フォントがnot availableになる
SFのBoldで試したがなぜかレギュラーに強制変換され、not availableのお知らせが一瞬表示された。フォントをどう抑制するかちょっとまだ不明。
https://help.figma.com/hc/en-us/articles/14506587589399-Use-variables-in-prototypes