開発者向けにFigmaのオンボーディングを実施してみた
解決したい問題
内容によってはコーディング前に検討する体制を作りたい。
例えば、情報の内容、配置、表示量、導線確認、文言やカラーの選択など
メリット
コーディング無しで展開&レビューが可能になる → 短時間で複数案を検討 内容
Fimgaとは
他のツールとの違い
無料で使える
ブラウザ上で使える
URLで共有できる
コミュニティが強い
実装との相性が良い
変数の取り扱い
コンポーネントベースのデザイン
Figmaの役割
構造検討
スタイル検討
スタイルガイドの管理
使い方
②デザイナーのアウトプットの確認
③最低限のスタイル検討
①UI検討時のワイヤーフレーム
なぜワイヤーフレーム？
実装で検討したいこと
リアルなコンテンツを使った挙動
遷移やアニメーションなど動的な操作感
ワイヤーフレームで検討したいこと
何を表示するか？
どこに配置するか？
メリット
レビュー
コストの計算
並行作業
つまり「出発前に地図を確認する作業」
UIの説明
コミュニティ
使うもの
Frame
Rect
Text
Arrow
共有方法
②デザイナーのアウトプットの確認
サイズや距離のスペースの確認
フォントとline-height
カラー
③最低限のスタイル検討
部分的な更新
コンポーネントの利用
よく使うショートカット
移動ツール : space
拡大縮小 : Z option + Z
ツールの選択 :
rect : R
pen : P
frame : F
グループ化 / 非グループ化 : cmd + G cmd * shift + G
移動しながらコピー : ドラッグしながら option
繰り返し : cmd + D