Figma Memo

2019年3月26日 21:33

Abstract + Sketch でUIデザインしている運用チームでFigma導入検討時にまとめたメモ。まだ検証期間中ですが、バージョン間の差分比較がAbstractに比べるとわかりづらいのに対してデザインリーダーが否定的になっている。(2022年追記 : もう別部署なのですがFigma移行してました)自分としてはStyle管理がSketchより好き。運用より新規プロジェクト時に使うのが良いかなと思いました。SketchからFigmaへはデータ移行できても、逆は現状できないので、やはり他ツールにしたい場合は作り直す必要がある...。
( note初投稿なのですが箇条書きとかテーブル使えないの割と不便ですな... )

はじめに

Figmaはインターフェイスデザインツール。複数人が同時編集でき、リアルタイムで作業が確認できるのが特徴。
ブラウザ用に構築されているため、どのプラットフォーム(Windows、Mac、Linux、Chromebook)でも使用できる。その代わり、オフライン状態で操作することはできない。

インストールと準備

1. アカウント作成
https://www.figma.com/

2. Figma App・本体のインストール
https://www.figma.com/downloads/
ブラウザとの違い
・ローカルフォントが使える
・Figmaアプリ内コマンドにショートカット設定できる
環境設定>キーボード>ショートカット>アプリケーションで「追加」

3. Figma Mirror・(使用デバイスでアプリインストール)
iOS
https://itunes.apple.com/jp/app/figma-mirror/id1152747299
Android
https://play.google.com/store/apps/details?id=com.figma.mirror

Figma Pricing (プラン別価格)
※ 最初はFreeで検証でもよいがライブラリが使用できない。既にSketchでライブラリ作成していたので使いたかった。
https://www.figma.com/pricing/

Style・スタイル

各Styleを定義して、Text Style + Color Style + Effect Style を組み合わせるができるのがメリット。色ごとにText Styleを作らなくていいのがよい。
・Text Styles (文字サイズ、行間、文字揃え)
・Color Styles (色)
・Effect Styles (ドロップシャドウなどのエフェクト)
・Grid Styles (レイアウトグリッド)

Components・コンポーネント

SketchだとSymbolのこと。SketchのようにSymbolsページにするのではなく、各Pageごとにコンポーネント設定して使用する模様。そのほうが見やすいが、全体的に使うものは場所をひとつにしたほうがよさげ ?

Constrains・制約

オブジェクトに対する制約を設定する。SketchだとResizing機能こと。

Tips

スペースの一括変換
GUIで一括変換できる。サイドメニューからも可能。

画像の一括流し込み
Place Image ( K + shift + command ) で、複数画像をストックし、任意オブジェクトに流し込むことが可能。

カラー明度調整ショートカット
16進数カラーコードを選択状態で、↑ ( ↑ + shift ) もしくは↓ ( ↓ + shift ) を押すと一段ずつ明度を調整可能。

Nudge Amount・カーソル移動範囲数値指定
カーソル移動時と、Shiftを押しながらカーソル移動時の数値設定

GroupではなくFrameを使うべし
Ps, Ai, Sketchでいうアートボードのことだが、フレームの中に更にフレームを作ることができる。
・互いの内側に配置することができる(主に制約に使用)
・子要素の切り取りをオン/オフができる
・Clip Contentにチェックを入れると、フレーム外にはみ出ているものの表示/非表示を切替可能(マスクようなもの)
・フレーム内に、独自のレイアウトグリッド、列、行を持つことができる
・オーバーライドされない限り、すべての子に適用されるレイヤー効果を持つことができる(Groupだと乗算使えない)

Shortcuts・ショートカット

Keyboard Shortcuts ( ? + control + shift ) でショートカットリストが確認できる。
アプリの場合「システム環境設定...>キーボード>ショートカット>アプリケーション>Figma.app」でショートカット追加可能。
※ ショートカットリストで確認できるが、自分が書いて覚えるためにまとめたのだがテーブル使用できないので画像でアップ... ( スペルミスってたらすみません )
Essential