【初心者向け】Figmaのデザインの作り方をわかりやすく解説！

Figmaを使えば、WebサイトやアプリのUIデザインをブラウザ上で簡単に作成でき、チームでのリアルタイム共同編集も可能です。しかし、初めて使う方にとっては操作方法や基本機能が複雑に感じられることもあります。

今回は、Figmaの基本操作からデザイン制作の手順、プロトタイプ作成や共有方法まで、初心者でも理解できる形で解説します。

Figmaの基本機能・操作

Figmaを使い始める方に向けて、基本的な機能と操作方法について詳しく解説していきます。

Figmaで何ができる?

Figmaは、WebサイトやアプリのUIデザインやワイヤーフレームを効率良く作成できる、ブラウザベースのデザインプラットフォームです。

最大の特徴は、ブラウザ上で複数人がリアルタイムで共同編集できる点にあり、チームでのデザイン作業を大幅に効率化できます。開発チームとの連携もスムーズで、デザインから実装への橋渡しがスムーズに行えます。

数多くのプラグインが用意されているため、機能を柔軟に拡張できるほか、コンポーネント管理機能によって、ボタンやアイコンなどのUIパーツを一元管理し、デザインの統一性を保つことが可能です。

オートレイアウト機能も特徴的な機能のひとつで、ボタンやカードといった要素を自動的に整列・配置してくれるため、手作業で調整する手間が大幅に削減できます。

具体的にFigmaで作成できるものとしては、ワイヤーフレーム、プロトタイプ、ホームページやWeb広告用のグラフィックデザイン、SNS投稿用の画像、プレゼンテーション資料などがあげられます。

Figmaの画面構成

Figmaのデザインファイルを開くと、作業に必要な要素が画面に表示されます。

出典：Figma Design公式ページ

画面の中央には、実際にデザイン作業を行うキャンバスエリアが広がっています。この空間にフレームやオブジェクトを配置してデザインを構築していきます。

画面の下側には、デザイン作業に必要な各種ツールが並ぶツールバーが配置されており、移動ツールや図形ツール、テキストツールなどを素早く切り替えられます。

画面の左側には、レイヤーパネルが表示されており、作成したフレームやオブジェクトの階層構造を確認したり、レイヤーの表示・非表示を切り替えたりできます。

画面の右側には、プロパティパネルが配置されています。選択した要素の詳細設定を行う場所で、サイズや色、フォントなどの属性を細かく調整できます。

Figmaの基本ツール

Figmaのツールバーには、デザイン作業を効率的に進めるための複数のツールがまとめられています。各ツールメニューから関連機能にアクセスできる構造になっており、作業内容に応じて使い分けることができます。

①移動ツールメニュー
移動ツールはキャンバス上でオブジェクトを選択して移動する際に使用するツールです。オブジェクトに影響を与えずにファイル内を移動できる「手のひら」ツールや、オブジェクト全体のサイズを変更する際に便利な「スケールツール」が含まれます。

②領域ツールメニュー
フレーム、セクション、スライスの3つのツールがあります。フレームはFigmaの主要な構成要素で、図形やテキスト、画像といったデザイン要素を保持するコンテナの役割を果たします。セクションはファイルを整理してナビゲーションを容易にしたり、開発準備が完了したコンテンツをマークしたりする際に役立ちます。スライスツールは、エクスポートする画面の領域を指定できます。

③シェイプツールメニュー
長方形、直線、矢印、楕円、多角形、星、そして画像や動画を配置する機能が用意されています。

④作成ツールメニュー
ペンツールと鉛筆ツールがあります。ペンツールはベクターパス（点と点を線でつないで形を表現する仕組み）やアンカーポイント（線の折れ曲がりや位置を決める点）、ベジェ曲線（自由にコントロールできる数式ベースの曲線）を使用して複雑な描画をする際に使用します。鉛筆ツールは、デザインファイルにフリーハンドの描画や注釈を追加できます。

⑤テキストツール
テキストを配置するためのツールです。キャンバスを一度クリックすると水平方向に伸びるテキストレイヤーが追加され、クリックしてドラッグすると固定サイズのテキストレイヤーを作成できます。

⑥コメントツールメニュー
コメント、注釈、測定の機能です。キャンバスに考えやアイデア、フィードバックを注釈として残すことができ、チームでのコミュニケーションがスムーズになります。
※注釈と測定は有料プランです。

⑦アクションメニュー
AI機能、ライブラリアセットの検索ツール、プラグインやウィジェットなど、便利な機能にアクセスできます。

⑧開発モード
デザインの検査やナビゲーションを行うための開発者向けインターフェースです。

⑨Figma Draw
ビジュアルデザインに使えるツールをまとめた機能です。

【3STEP】Figmaを使ったデザインの作り方

Figmaでデザインを作成する基本的な流れを、3つのステップに分けて解説していきます。

STEP1｜デザインファイルを新規作成する

まずは、画面の左上にあるアイコンから「ファイル」メニューを開き、「デザインファイルを新規作成」を選択しましょう。または、画面右上にある「デザインファイル」ボタンをクリックしても、新しいデザインファイルを作成できます。

この際、プロジェクトごとに適切なファイル名を付けておくと、後から見返す際に便利です。

STEP2｜フレームを作る

デザインファイルを作成したら、次にデザインの土台となるフレームを作成します。

フレームは、デザイン要素を配置するための枠組みとなるもので、Figmaにおける重要な構成要素です。画面左上のツールバーからフレームツールのアイコンを選択するか、キーボードのFキーを押します。

フレームツールを選択すると、画面右側のプロパティパネルに、あらかじめ用意されたデバイスサイズのテンプレート一覧が表示されます。制作するデザインの用途に応じて、適切なサイズのフレームを選びましょう。

または、フレームツールを選択した状態で、キャンバス上をドラッグすれば、自由なサイズのフレームを作成できます。

複数のデバイスサイズに対応したデザインを作成する場合は、同じデザインファイル内に複数のフレームを配置することも可能です。

STEP3｜デザインを制作する

フレームを作成したら、いよいよ実際のデザイン制作に取り掛かります。

例として、Webサイトのトップページを作成する大まかな手順を以下にまとめました。

初めてFigmaを使う方の場合は、Figmaで提供されている公式チュートリアルなども活用して、基本操作を覚えることをおすすめします。
＞＞Figma「Figmaの基本 – Figma Basics 日本語版」

Figmaのプロトタイプ制作～共有の方法

デザインを作成したあとは、プロトタイプとして動作を確認し、チームメンバーと共有します。その手順と方法を解説します。

プロトタイプを制作する

プロトタイプは、実際のウェブサイトやアプリのように、ページ遷移やボタンの動きを再現した試作品です。

プロトタイプを作成するには、画面右側の「デザイン」タブを「プロトタイプ」に切り替えます。プロトタイプモードに切り替えると、作成したデザイン要素に対して動きを設定できるようになります。

例えば、スライドインやフェードといったアニメーションを選択することで、より実際の動作に近いプロトタイプを作成できます。

プロトタイプを動作させる

作成したプロトタイプの動作を確認するには、プレビュー機能を使用します。

画面右上にある再生アイコン（三角マークのボタン）をクリックすると、別のブラウザウィンドウが自動的に起動し、プレビュー画面が表示されます。このプレビューモードでは、設定したインタラクションが実際にどのように動作するかを確認できます。

画面の遷移速度やアニメーションの滑らかさ、ユーザーの操作フローなどを実際に体験することで、デザインの課題や改善点を早期に発見できます。

デザインを出力する

Figmaで作成したデザインは、PNG、JPG、SVG、PDFの4つの形式から選択できます。

画面左側のレイヤーパネルで、出力したいフレームやオブジェクトを選択しましょう。次に、画面右側のプロパティパネルを下にスクロールすると、「エクスポート」セクションが表示され、出力形式が選べます。

出力サイズも調整でき、等倍のほか、2倍や3倍といった高解像度での出力も可能です。設定が完了したら、エクスポートボタンをクリックして、保存場所を指定すれば出力完了です。

メンバーと共有する

デザインを共有するには、画面右上にある「共有」ボタンをクリックします。表示されたモーダルウィンドウで、共有方法と権限を設定できます。

共有されたメンバーは、リアルタイムでデザインの変更を確認でき、コメント機能を使ってフィードバックを残すこともできます。

まとめ

Figmaは、ブラウザ上で動作するデザインツールで、UIデザインやワイヤーフレーム、プロトタイプの作成が無料で始められます。リアルタイムでの共同編集機能により、チームでの作業効率が大幅に向上し、デザインから開発への引き継ぎもスムーズに行えます。

デザイナーとの協働をさらにスムーズにしたい、あるいは簡単なデザイン修正を自分でも行えるようになりたいとお考えなら、専門のトレーニングも検討してみてはいかがでしょうか。

Proximoでは、企業の実務に即したカスタマイズトレーニングを提供しており、Figmaの実践的なスキルを短期間で習得できます。チーム全体のデザインリテラシー向上にもつながります。

サービスについて詳しくは以下リンクをご覧ください。
＞＞Proximoのサービス詳細ページはこちら