⌨️よく使うショートカットキー
| キー | 機能 |
|---|---|
| [Ctrl] + [Shift] + ? | ショートカット確認 |
| [Ctrl] +Click | ダイレクト選択 ┐ ＊正式にはネスト選択 |
| \ (￥キー) or [shift] + [Enter] | └ 選択中の要素の親を選択 |
| Enter | 選択中の要素の子を選択 |
| [Alt] + L | 選択中の要素以外すべて閉じる |
| [Alt] + < / > | カーニング調整 |
| [Ctrl] + [Alt] + B | コンポーネント解除 |
| [Ctrl] + ] | 全面に移動（レイヤー上に）・＆[Shift( ] のみでも)]→最前面 |
| [Ctrl] + [ | 背面に移動（レイヤー下に）・＆[Shift( [ のみでも)]→最背面 |
| [Ctrl] + 0 | 100%表示 |
| [Shift] + 1 | 全体表示 |
| [Shift] + 2 | 選択範囲に合わせZOOM |
| [Shift] + R | ルーラー |
| [Ctrl] + \ (￥キー) | UIパネルを隠す |
| *[Ctrl] + [Shift] + * | 左のパネルだけ隠す |
| [Ctrl] + [Alt] + \ | ﾏﾙﾁﾌﾟﾚｲﾔｰｶｰｿﾙを表示/非表示 |
| [Ctrl] + [Shift] + H | 非表示（選択してまとめて隠せる） |
| [Ctrl] + [Shift] + L | ロック |
| [Shift] + A | オートレイアウト |
| [Ctrl] + [Alt] + G | フレーム化 |
🔌基本のプラグイン
Insert Big Image
Batch Styler
使っている色やフォントなどを一括変更
↑は、スタイル設定してる場合しか使えない、それ以前のやり方↓
-
選択の基本機能 ☆[次のオプションですべて選択]
同じフォントで検索
同じテキストプロパティで検索
Recognize
OCRではこれが良い（画像選択→Japanese選択→文字抜き出し）
Clean Document
- 非表示レイヤーをまとめて削除
- 値の小数点を四捨五入（画像の縦横比無視など注意）
Nisa Text
複数行のテキストを分割←→統合、その他文字単位で分割、並び替え等様々テキスト編集
※選択したまま[⌘+Z]すると消失するので注意
Font Fascia
font-familyを一覧表示
remove bg
https://www.remove.bg/dashboard#api-key
フリーだがアカウント登録要～.tokyoにて登録
APIキー取得＞Figma内で登録して使用できるようになる
※サイトでもDDして実行可（フリーだと解像度低）
Noise
紙のようなマットな質感、ざらざらした質感を表現、粒状ノイズ画像
https://wentz-design.com/post/figma-noise-tool-plugin/
Mockup
スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む、はめ込みたいデバイスの画面が斜めになっている場合でも対応
https://wentz-design.com/post/figma-mobile-and-destop-mockup/
🔰基本のおさえどころ
画像のオリジナル解像度
は、「開発者モード」の「インスペクトパネル」で確認できる
フォント設定
★Proportional alternate widths を ON
→ プロポーショナルメトリクスを有効化できる
＝ CSSの font-feature-settings: "palt"; で再現できる
グループには塗りを設定できない
グループレイヤー（親）に塗りを設定したいなら、フレームにする必要がある。
制約は中の要素の配置を制御できる
フレーム内の要素は制約を指定することができるが、制約十字（中央×中央）で中央基準にすることができる。
要素の制約を中央×中央にしておくことで、親（フレーム）を広げても中の要素は中央に居続ける。
拡大縮小で中の要素も比率を保てる
移動ツールで要素の拡大縮小をしようとすると、テキストなど小さくならない要素がある。
しかし、拡大縮小ツールなら中の要素含め、全体を拡大縮小することができる。
テキスト文字列で検索・置換
◎テキスト文字列の検索・置換が役立つ！
対象は「ページ内」まで。＊選択フレーム内、は不可
🔍→すぐ隣の設定アイコン→『置換』
Discussion