figmaはじめる時のポイント

2020年6月3日 22:37

あらまし

はじめてfigma使ったら、結構つまずいたので、素早くfigma仲良くするためのポイントを書き残しておく。ちなみに決して使いづらいというわけではない。

社内でよく使われているから。なので、なんとなくこういうことができるんだなという事前知識はある状態からスタート。

どこに何をおけばいいのかから躓く。
左上の＃のようなアイコンを押すと、右に画面のサイズ一覧がでるので、それをクリックしてキャンバスを作って、それをページとみなしてモノを置いていくらしい。
ちなみに、グレー部分をドラッグしてもキャンバスが作れる。

・画面遷移に着目して作ると良さそう
　・クリックしたら展開やホバーで色変化みたいなのは難しそう

・モーダルは結構楽に作れる
　・Prototype → Interaction → on click → Open Overlay → オーバレイしたいフレームを選ぶ
　・モーダル → モーダル呼び出しすると、モーダル on モーダルになる

・デザインフェーズ → 遷移付与フェーズで作業するとよさそう
　・タブもワークスペースに表示されるものも違うので、そっちの方が楽
　　・Prototypeタブ選択時は遷移の線が出現する
　・ちなみに遷移はまとめて選択で一気に実装もできる

・適宜フレーム化しておくと楽。テーブル・ヘッダ・フッタとか。
　・グループ化もあるのを今知った…グループ化のが良い場合もあるかも。

・ボタンは矩形＋文字でなく、フレーム + Fill + Auto layoutが楽
　・Auto layoutの詳細設定2段目でpaddingっぽいのを選べるので、それでpaddingしておくと、大きさが文字にあわせて自動変化する

・他のキャンバス（ページ）を編集するために選ぶには、名前部分を押すと選びやすい
　・名前の編集は、名前をダブルクリックした後、左に目をやると編集モードに入ってたりする

chot.designのfigma入門：章立てがしっかりしてるので、知りたい内容をピンポイントでみやすい。文章が簡潔で画像も豊富なのでとても理解しやすい。