新機能「バリアブル」を活用した、体系的デザインとプロトタイピング手法 2023年9月13日

ちょうどFigma強化中にとってはこれとない、
いいチャンスのセミナーがありました。

今日もC&R篠崎さんの司会でスタート。
講師は池原さん。

■新たに追加になったもの。
・最小幅(高さ)×最大幅(高さ)
・オートレイアウト「折り返す」
・開発モード

■最小幅(高さ)×最大幅(高さ)
オートレイアウトにしたときでも、最小幅を入力することにより、
内包する文字が少しでもボタンの幅が小さくならない。
最大幅はその逆。

■オートレイアウト「折り返す」
オートレイアウトのグリッドデザインにぴったり表現できる。
(ボックスのサイズには四則演算が使える)
PC・タブレット・モバイルの3つを用意しなくても済む。

■ローカルバリアブル(ベータ)
デザインとプロトタイピングに使用する再利用可能な「変数」
→カラー、数値、文字列、ブーリアン
→ローカルスタイルに似ている。
→ブーリアン(Trueかfalse)

→エイリアスを使える
→適用範囲を指定できる
→複数のモード(状態)を、一つの変数に関連付けられる(有料)
→プロトタイプから動的に変更できる(有料)
→プロトタイプの条件分岐に使用できる(有料)

→バリアブルを書き換えると適用されている要素も変わる
→ブーリアンで表示、非表示を変更できる。
→バリアブルの適用範囲をしぼることができる。
→変数に別の変数を入れることができる。
 変数に色を使うことによって一括変換ができる。(エイリアス)

・モード(有料版)
 →バリアブルを複数持たせることができる。

・プロトタイプの作りかた
 →プロトタイプ中に動的にバリアブルを変更できる(これも有料版)

※ここらへんでついていけなくなりました。
 そんな複雑なプロトタイプ作ってるんだー。

・まとめ
Figmaの新機能を活用することで、
より「伝えやすい」デザインと
より「実装に近い」プロトタイピングが可能になる。

コメント

タイトルとURLをコピーしました