Figmaの基本画面（インターフェース）完全攻略！どこで何ができるかを知る

Figmaは、ブラウザ上で動作する高機能なデザインツールですが、はじめて使う人にとってはそのインターフェースがわかりにくく少し複雑に感じてしまうかもしれません。

この記事では、Figmaの基本画面の構成・各エリアの役割や使い方を丁寧に解説します。

「どこで何ができるのか」をしっかり理解して、作業効率アップしていきましょう！

Figmaの画面構成は大きく4つ

Figmaの操作画面は、主に以下の4つの領域に分かれています。Figmaの画面を見ながら確認してみてくださいね！

それぞれの役割についてさらに詳しく見ていきましょう。

左側のサイドバーには、主に「レイヤー」と「アセット」の2つのタブがあります。作業対象の切り替えや構造の把握に重要なエリアとなっています。

デザイン内にあるすべての要素が階層構造で表示される場所となります。

レイヤーはIllustratorやPhotoshopを使ったことがある人にはおなじみの概念です。Figmaではここでフレーム、グループ、シェイプ、テキストなどの構成要素を確認・整理できます。

・要素をドラッグして並び替え
・グループ化／解除
・名前変更やロック／非表示設定も可能

階層が深くなると管理も大変になり、構造もわかりにくくなる為適切な名前付けが必要です。

再利用可能なコンポーネントやライブラリ内の素材が一覧表示されます。
チームで共有するUIパーツやブランドアイテムが集約されており、ドラッグ＆ドロップでキャンバスに配置することが可能です。

画面の中央に広がるのがキャンバス（Canvas）です。実際にデザインを配置したり編集するスペースです。

・フレーム（アートボード）を配置して画面ごとのデザインを構成
・テキストや図形、画像の配置パーツの整列やグループ化
・プロトタイプの遷移先指定

Figmaは無限キャンバスを採用しているので、自由に画面を増やして設計全体を俯瞰してみることが可能です。複数の画面を並べて設計するアプリ開発などに最適といえます。

選択したオブジェクトに応じて内容が変わるのが、右側のサイドバーです。
ここには3つのタブがあり、それぞれ異なる役割があります。

・色、サイズ、ボーダー、シャドウ、角丸などのビジュアル設定
・テキストのフォント、行間、文字サイズなどの設定
・コンポーネントやAuto Layoutの設定

上記の内容がデザインタブで行えます。

まさにFigmaの中心的な編集エリアです。選択する要素によって表示が動的に切り替わるのが特徴的です。

・画面遷移のリンク設定
・アニメーションやディレイの設定
・スマホ／PC表示時のフロー構築

上記の内容がプロトタイプタブで行えます。

この機能により、デザインからそのままプロトタイプ作成が可能です。別のツールを使う必要がなくなるのに加えて、フィードバックが早くもらえるのがメリットです。

・デザイン要素の数値情報＆スタイルガイドを確認可能
・開発者はここからCSSやiOS／Android向けコードをコピー

上記の内容がインスペクトタブで行えます。開発との連携時に役立つタブです。エンジニアはここだけ見れば実装に必要な情報が揃うので非常に便利です。

画面上部には、Figmaでよく使うツールが並んでいます。

また、上部右側には「共有（Share）」「Zoom」「表示モード」などの便利機能も配置されています。

基本画面を理解した上で、以下のポイントを意識することで作業効率が上がります。

レイヤー名はこまめに整理する
階層が深くなると編集しづらくなるため、レイヤーを見れば構造がわかるようにしましょう。
コンポーネント化を活用する
変更が一括反映できるので便利です。同じような作業を延々と繰り返す必要がなくなるので活用しましょう。
ショートカットを覚える
頻繁に使う操作はショートカットで時短しましょう。覚えるまで大変かもしれませんがすぐになれますし効率が上がります。
コメント機能でチームとの連携を強化
コミュニケーションの手間を減らすことが可能です。メッセージツールなどを介さなくてもFigma上でフィードバック、修正対応や確認依頼が完結します。