WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

ファイルの作成

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

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

新規ファイルの作成

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

デザイン編集画面

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

Figmaのデザイン編集画面

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

Figmaのデザイン編集画面(パネル毎)

 名称 
1ツールバー左側でツールの切り替え、右側ではその他のメニューが並んでいる
2レイヤーパネル要素の一覧が表示され、要素の重なり順やグループ分けを管理
3キャンバスデザインを作成するメインの画面
4プロパティパネル選択した要素の設定が表示される

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

基本操作

ツール

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

ツール名キー内容
移動ツール
(Move)
V既に作成した要素の選択・移動ができる
他デザインツールの「選択ツール」と同じ
拡大・縮小ツール
(Scale)
Kテキストの拡大・縮小をマウスで行える
フレームツール
(Frame)
A

デザインの表示領域である「フレーム」を作成したり、編集できる

他デザインツールの「アートボードツール」と同じ

スライスツール
(Slice)
S

画像の書き出し時に使用する「スライス」を作成できる

長方形ツール
(Rectangle)
R長方形の作成ができる
直線ツール
(Line)
L直線の作成ができる
矢印ツール
(Arrow)
shift + L矢印の作成ができる
楕円ツール
(Ellipse)
O楕円の作成ができる
多角形ツール
(Polygon)
 多角形の作成ができる
スターツール
(Star)
 星形の作成ができる
画像を配置
(Place image…)
 画像を選択して配置できる
shift + command + Kでも使用可能
ペンツール
(Pen)
Pベジェ曲線で線の作成ができる
鉛筆ツール
(Pencil)
shift + Pフリーハンドのような線の作成ができる
テキストツール
(Text)
T文字の入力・編集ができる
手のひらツール
(Hand tool)
Hキャンバス内の移動ができる
コメントの追加
(Add comment)
Cデザイン上にコメントを追加できる

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

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

フレームの作成

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

フレームの作成

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

画面の移動と拡大・縮小

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

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

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

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

Figmaでの拡大・縮小

ツール名キー内容
ズームイン+画面が拡大される
ズームアウト画面が縮小される
画面に合わせてすべてをズームshift + 1

キャンバス内の要素に合わせて、すべてが見える拡大率になる

50%にズーム 

拡大率50%になる

100%にズームshift + 0拡大率100%になる
200%にズーム 拡大率200%になる

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

デザインの作成

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

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

要素の作成

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね