Figma UIデザイン

ブラウザ上で使えるチームデザインツール(デスクトップアプリも有)であるFigmaの基本的な使い方の備忘

##ショートカットキー(一部)

M -> Move: カーソル
F -> Frame: フレーム
S -> Slice: 切り取り
R -> Rectangle: 矩形・長方形
L -> Line: 線
T -> Text: 文字列
C -> Comment: 注釈

##フレーム
Frameを選択すると通常のDesktopサイズはもちろん、Macbook ProやiPhone, Androidといったフレームサイズがデフォルトで用意されているので用途に合わせて選ぶ。

##正方形
Rectangle を選択し、Shift を押しながらドラッグ&ドロップすることで正方形を作れる。
Design タブの H(Height)の横のリンクアイコン(Constrain Propotions)をクリックすることで縦横比を固定できるので、そのうえで H,W の数値を丸める。
複数の正方形を作り、すべての正方形を選択し、右ペインDesign タブのプルダウンでDistribute Horizontal Spacingをクリックすることで均等な距離で配置できる。

##カラー
Fillがオブジェクトの塗りつぶし、Strokeが線の色を指定。また、色に変数を付けることができる。
オブジェクトの色を変更後、右ペインからCreateStyle設定。さらに左メニューLibraries -> Publish でチームで共通化できる。

##プロトタイプ
右ペインの Prototype タブで各ページ遷移のリンクを矢印をつかって視覚的に表現できる。