こんにちは。Fightly!です。

今回はFigmaの基本的な操作テクニックを備忘録としてまとめておきます。

まだツールに慣れていない方向けの内容になるかと思います。

基本操作テクニック

以下のテクニックをまとめておきます。

• 選択ツール
• 要素のダイレクト選択
• 選択解除
• 手のひらツール
• 画面の拡大縮小
• 距離の測定
• スポイト
• 複製
• 要素のサイズ変更
• スタイルを保ったまま貼り付け

選択ツール

基本となるツールです。Vがショートカットキーです。

操作を行いたい要素を選択できます。

Shiftを押しながら複数要素を同時に選択することができます。

要素のダイレクト選択

グループ化されているなどの、複雑に配置された要素をワンクリックで選択（ダイレクト選択）することができます。

Ctrl（⌘）を押しながらクリックでダイレクト選択します。

選択解除

Escを押すことで選択している状態を解除することができます。

とりあえずEsc押せばいつもの状態に戻ります。

テキストツールで文字を入力した後などに使うことでスムーズに選択ツールへ移行できます。

手のひらツール

画面を動かして視点を変えるツールになります。

キーボードのHで手のひらツールに切り替えられます。

Spaceを押している間も手のひらツールになります。

マウスの中クリックでも手のひらツールとして使えます。

画面の拡大縮小

Ctrl（⌘）+マウスホイールぐりぐりで画面を拡大したり縮小したりできます。

ノートパソコンだったらトラックパッドで指を2本使って直感的に拡大縮小できます。

距離の測定

Alt(option)を押しながら測りたい要素にマウスカーソルを持っていくと距離を測ることができます。

クリックするのではなく、マウスカーソルを持っていくだけです。

スポイト

画面上にある色を取得することができます。

ショートカットキーiでスポイトツールが使えます。

複製

要素を選択してAlt(option)キーを押しながらドラッグすると複製することができます。

Ctrl（⌘）+CでコピーしてCtrl（⌘）+Vで貼り付けするより早いです。

要素のサイズ変更

要素の角にあるアンカーポイントをドラッグすることで大きさを変形させることができます。

Shiftを押しながら比率を固定したまま変形できます。

Alt(option)を押しながらだと中心を基点にサイズ変更もできます。

Shift+Alt(option)同時押しで両方の効果を適用できます。

スタイルを保ったまま貼り付け

Shift+Ctrl（⌘）+Vでコピーした書式を保ったままコピー先に貼り付けることができます。

（フォントサイズやフォントの種類をコピー先の状態に保ってくれます）

とりあえずダミーテキストでデザインを作っておいてあとで原稿から入れ込みをするときなどに、とりあえずShift+Ctrl（⌘）+Vで貼り付け！といった感じで使ってます。

▼通常の貼り付け　Ctrl（⌘）+V

▼スタイルを保ったまま貼り付け　Shift+Ctrl（⌘）+V

まとめ

まだまだ紹介したいテクニックがあるのですが、とりあえず初歩的な部分をまとめました。

みなさまのサイト制作の助けになれば幸いです。