Figmaの書籍も出している、
もちさんが講師でした。
2023年06月カンファレンスで4つの新機能が発表
そこで発表された目玉機能がバリアブル。
Web担当フォーラムの記事
https://webtan.impress.co.jp/e/2023/07/14/45228
今まではデザイナー向けの機能だったが、
開発者向けの機能が実装された。
▼どんなときに使えばいいか
Webサービス・スマホアプリ
UIデザイン全般
特にデザインと実装を密に進めるフェーズ
※バリアブルはβ版なんです。
・バナーやチラシなどのグラフィックデザイン
・LPとかコーポレートサイト
には必要ない。
▼バリアブルなにができるの？
特定のカテゴリのものに対して
変数を決めることができる。
型の種類は4種類、
カラー、テキスト、数値、ブーリアン
スタイルと何が違うねん！
→バリアブルとスタイルの違いについて
その１
数値や文字列も登録できる！
スタイルはカラー、テキストスタイル、エフェクト、グリッドが定義できます。
テキストの文字サイズ、行間とか文字間には定義できない
その２
モードを追加できる
ライトテーマ、ダークテーマなど
その３
バリアブルにバリアブルが設定できる
スタイルにはスタイルを設定できない
※箱の中に箱が入っている状態
▼UIデザインについて知るとわかってくる
・デザインシステム
・デザイントークン
・プリミティブトークン
・セマンティックトークン
▼デザインシステム
例：SmartHRのデザインシステム
▼デザイントークン
デザインシステムを構成しているひとつひとつの要素
▼プリミティブトークン
原材料
▼セマンティックトークン
コンテキストを持たせたトークン
・メンテナンスの容易さ
・意味の明確化
・再利用性と拡張性
バリアブルにバリアブルが設定できる
＝
プリミティブトークンとセマンティックトークンの関係をFigmaで再現できる
▼まとめ
・バリバブルはUIデザインの時に使えばいい！
・バリアブルは特定のカテゴリのものに対して変数を決めることができる。
・スタイルとの違いは登録できるものの種類、モードの追加、バリアブルにバリアブルが設定できるという点である
・デザイントークンのプリミティブトークンとセマンティックトークンを再現できることから開発に沿ったデザイン設計ができる
■質疑応答
・バリアブルのモードの追加については有料プランになる。
・Figmaの最新情報はどうやって得ているのでしょうか
→Twitter or Figma公式
・日本語について多少のバグがある。
・デザインシステムは最初に考えるものですが、途中で変更等はありますか？
→全然あります。
・デザイン上ひとつやふたつしか出番のないプロパティでも登録しておいた方がいいですか。
→しておいた方がいい。
・メルカリですら最近デザインシステムを整備した。
・これからFigmaを学んでいくのですがスタイルとバリアブルのどちらを学んでいけばいいでしょうか。
→UIデザインならバリアブルを使っていくほうがいい。
・PC版、SP版で別ファイルのおなじバリアブルを使えますか？
→使える。
・登録しているスタイルをバリアブルに一括置換できますか？
→プラグインがあったような気がします。
※登録したカラースタイルをバリアブルに
一括変更するプラグイン：Styles to Variables
・バリアブルの名前は英語のほうがいい理由ってなんですか？
→実装に合わせたほうがいいので英語にしたほうがいい。
・バリアブルとスタイルの使い分けはどんなときですか？
→Webだったらスタイル、UIデザインならバリアブル
→Figmaの思想でいえばバリアブルだけでできるようになるかも。
・作成しバリアブルデーはプロダクトやチーム間の移行はできますか？
→チーム間の移行はできないかも。後々は対応するかも。
・バリアブルを使う練習方法はなにかないですか？
→デジタル庁などの良いFigmaファイルを見る
・XDからFigmaに移行するとき、もちさんはいつから使ってましたか。
→5年前くらい
・Figmaになれるまでどれくらいかかってましたか。
→スケッチから1週間くらいで移行した。
→XDは使ってない。
→データ移行等はFigmaはノーストレス
・Figmaでデザインデータをもとにコーディングが楽になる方法はありますか？
→Figam to Studioを試してみてはいかかでしょうか。
最後にもちさんから新しいスクールの説明会があって、
ウェビナー終了。
▼もちさんのYoutube
https://www.youtube.com/channel/UCmb4qG7cmQ6hoOUwrCNrYrA
▼もちさんのnote
https://note.com/makko/n/ne5407b680ad9ttps://note.com/makko/n/ne5407b680ad9
まだまだ修行が必要ですなぁ。
コメント