Figmaでデザインを作成するときの基本的な操作方法

Figmaのアカウントを作成したら、次は基本操作についてです。
まだアカウントを作成していない人は前回の記事をご覧ください。

Webrandum

ブラウザ上で動作するデザインツール「Figma」のアカウント作成から必要最低限の設定

https://webrandum.net/figma

いまやデザインツールはAdobe XD、Sketch、Figmaの3つが主流となっています。自分のそれぞれの使用状況は下記の通りです。 Sketch：業務でも使っていて、1番よく使うデザインツール Adobe XD：たまに業務でも触ることがあって、プライベートでもちょこちょこ触る Figma：プライベートで多少触って、前々から情報は見るようにしていたレベルデザインツールに限らずですが、SNSで大盛り上がりしていると、そのあと急激に廃れてしまいそうで怖く感じてしまいます（ちょうど2017〜2019年辺りはどんどん新しいデザインツールが出てきたタイ...

また、今後は基本的にブラウザ上ではなく、アプリをインストールしています。
画面も操作も同じですが、記事内のスクリーンショットはアプリのものになります。

ファイルの作成

まずはファイルの作成方法からです。
Figmaを開いてサイドバーの中から、「ファイルを作成したいチームプロジェクト」の右にある「＋」アイコンをクリックします。

「Design file」という項目があるので、それをクリックすると新規ファイルが作成できます。

「Design file」以外にも、オンラインホワイトボードの「FigJam」や、「Import」「Browse templates」を使ってテンプレートを使って新規ファイルの作成もできます。

デザイン編集画面

新規ファイルを作成すると、デザイン編集画面が開きます。

それぞれエリア分けすると、下の画像のようになります。

Adobe XDやSketchと同じようなレイアウトなので、それらのデザインツールを使ったことがある人なら何がどこにあるのか、なんとなく分かると思います。

基本操作

ツール

用意されてあるツールは下記の通りです。
ツールバー左側で切り替えられますが、ショートカットキーも用意されていて、すばやく変更もできます。

基本的には他のデザインツールと変わりませんが、Figmaではデザインの作業領域のことを「フレーム」と呼びます（一般的に「アートボード」と呼ばれる）。
ただ、機能はアートボードと変わりませんし、ショートカットキーはA（Artboardの頭文字）なので、あまり気にする必要はなさそうです。

ちなみに、楕円ツールのショートカットキーは、AdobeXDではEなのですが、SketchやFigmaではOです。
個人的にはEの方が、右手でマウスを持ったまま押せますし、長方形ツールのRのすぐ隣なので便利で分かりやすいのですが……

フレームの作成

フレームツールに切り替えてドラッグしても作成もできますが、フレームツールに切り替えると右サイドバーに候補が表示されます。

これをクリックするとフレームが作成できます。
デザインはこのフレーム内に要素を追加していって行います。

画面の移動と拡大・縮小

spaceを押しながら画面上をドラッグするとキャンバス内の移動ができます。

他にもHを押して手のひらツールに切り替えてドラッグするか、スクロールで移動できます。
ちなみに、shiftを押しながらスクロールすると横スクロールになります。

拡大に関しては、space + commandでスクロールすると拡大縮小できます。

もしくは、ツールバー右側にある「○%」の部分をクリックするとメニューが表示され、そこからでも切り替えられます。

よく使うので移動や拡大縮小の方法は覚えておきましょう。

デザインの作成

あとはツールを使って、フレーム上に要素を作成していきます。

試しに長方形ツールで長方形を作成すると、右側のプロパティパネルに設定項目が表示されます。
「位置」「サイズ」「色」「ボーダー」「エフェクト」など必要な項目はすべてここにあるので、見た目の設定は基本的にここで行います。