WebデザインをFigmaで制作する際、Illustrator・Photoshop派が最初に戸惑う5つのこと

今だけ無料でAIチューター（先生）付きレッスンを提供しています。
AI先生があなたの学習をやさしくサポートします。今までは有料ユーザーにのみ開放していましたが、今なら無料でWeb/AI制作7講座が受講できます。 この機会にAIつきの学習を体験してみてください。
（無料、限定100名、10月19日まで）

» 今すぐ無料講座をチェックする

最近、Figmaでの納品を求められるWebデザイン案件が増えています。
IllustratorやPhotoshopを使用してきた方が、FigmaでWebデザインを作成しようとすると「デザイン制作の操作自体はなんとなくわかるけど…」と微妙な気分になることも。基本操作やツールなどは今までの経験で使用できるものの、Figma特有の考え方や設定で戸惑う場面もあると思います。

そこで、今回はFigma乗り換えあるある、はじめてFigmaを使う時に迷いがちなFigma特有の考え方や設定についてご紹介していきます。

• なぜFigmaの案件が増えているのか
• クライアントがFigmaを指定する理由
• Figmaの使い始めにIllustrator・Photoshop派が戸惑う5つのこと
• 1. ファイルのグルーピングと「共有」する感覚
• 2. キャンバスの設定と基本操作
• 3. ファイルの共有の方法
• 4. コメント機能でクライアントと直接やり取りする
• 5. IllustratorやPhotoshopにはない機能
• まとめ

なぜFigmaの案件が増えているのか

かつて、Webデザインといえば Illustrator や Photoshop で作るのが当たり前でした。

レイアウトを整え、画像を書き出し、完成したデータをクライアントに「納品」する――。
その流れ自体は今も大きく変わっていませんが「納品」の形 が変わり始めています。その代表例がFigmaです。

クライアントがFigmaを指定する理由

Figmaが登場してから、Webデザインの現場では“クラウド共有”が当たり前になりました。

たとえば、Illustratorで作成したデザインだと、修正のたびにファイルを書き出して送り直さなければなりません。ファイル名にバージョン管理用の日付などを入れて更新して、それをメールに添付して「aiファイルを送ります」というやり取りは少なくなっています。

一方、Figmaならデザインはクラウド上に保存され、クライアントや他の制作者はURLを開くだけで同じ画面を確認できます。ブラウザ上で最新デザインが常に見えるため、「修正しました」と伝えるだけで済みます。メールの往復も、添付ファイルの管理も不要です。複数のデザイナーやエンジニアが同時に同じファイルを開き、互いのカーソルをリアルタイムで確認できます。コメント機能、バージョン履歴、権限管理など、“作業を共有する前提”の仕組みも整っていいるので、修正や確認のスピードが非常に早いのです。

この「データを送らずに、みんなで見られる」「すぐに変更が確認できる」仕組みが、Figmaが急速に広まった最大の理由です。

Figmaの使い始めにIllustrator・Photoshop派が戸惑う5つのこと

ここからは実際に、IllustratorやPhotoshopでWebデザインを制作始めた方が「Figmaを使い始めた際に戸惑う部分」について紹介していきます。

1. ファイルのグルーピングと「共有」する感覚

Figmaで多くの方が最初に戸惑うのは「保存」という概念が見当たらないことです。

Figmaの基本構造：チーム・プロジェクト・ファイル・ドラフト

Figmaはすべてがクラウド上で動作しているため、基本的にファイルはFigmaのサーバーに保存されます。
そのため、作業の単位や場所の考え方も独特です。

Figmaにログインすると左側のメニュー部分にチームの選択があります。
この「チーム（Team）」が、Figmaでいうところの最上位のまとまりです。

Figmaではチームの中に「プロジェクト（Project）」と「ドラフト（Draft）」があります。
プロジェクトは制作するテーマごとにグループ分けをした中間階層になります。チーム＝会社、プロジェクト＝部署、のようなイメージです。各プロジェクトの中にはデザインを行う「ファイル（File）」が並び、このファイルを使ってデザインデータの制作や、フィードバック送信・修正などを行っていきます。

ドラフトはどのプロジェクトにも属していない個人の作業スペース、同じチームやプロジェクトの人にも公開していない“ローカルフォルダ”のファイルに近いイメージです。ただし、ドラフトもチーム配下にあることに注意が必要。

下図のように、プロジェクトごとに異なるドラフトが保存されています。
「あれ？あのファイルが無い」と思ったら、違うチームを開いていた…これ、結構あるあるです。

このように、Figmaでのファイルは「誰と共有するか」が基本の考え方になっています。
自分がいま開いているファイルが、どのチームやプロジェクトに属しているのかを理解しておくことが大切です。

保存ボタンがない→ほぼ自動で作業履歴が残るので大丈夫

Figmaのデザイン制作では、基本的に「保存」をする必要はありません。 というのも、作業内容はすべて自動的にクラウドへ反映されるからです。ブラウザを閉じても、アプリを終了しても、最新の状態がそのまま残ります。

Figmaの自動保存は優秀で、作業のたびにリアルタイムで履歴が記録され、いつ・誰が・どの部分を修正したのかを後から確認することができます。

以前の状態に戻すこともできるため、「うっかり上書きしてしまった」という不安はありません。IllustratorやPhotoshopの場合は別名保存を使って「2025_1105-xxx」など手動で名前を変えて世代管理をする必要がありましたが、このファイルの世代管理の手間は無くなります。

ちなみに、自動保存の履歴は編集日時 - 編集者の形で表示されます。
ずらーっと並んでわかりにくい、初稿共有など重要な編集点をわかりやすくしておきたいときは「バージョン履歴を追加」を使うと、メッセージ付きの保存ができます。

バージョン履歴を追加

• Windows :Ctrl + Alt + S
• Mac OS :⌘ + Option + S

自動保存とは別に表示できるため、復元ポイントのように使いたい場合は便利。私はクライアントへの共有前などに手動追加しておくことが多いです。Figmaで意識的に「保存」の操作をするのは、こういった明確なポイント（履歴）を作っておきたい場合だけでOKです。

URLを送るだけで共有できる仕組みがある

Figmaの大きな特徴は、デザインを見せる時に、メールにデータを添付したりファイル共有サービスに預ける必要が無いこと。FigmaではファイルごとにURLが発行されるため、そのリンクを相手に伝えるだけで即座に同じデザインを確認できます。

なお、共有設定には「閲覧のみ」「編集可」という２つの権限があります。
このあたりの設定については、後期の3. ファイルの共有とコメントのやり取りで詳しく紹介します。

2. キャンバスの設定と基本操作

Figmaを触り始めると、多くの方が「なんとなく使えるけれど、思ったように動かない」と感じます。 IllustratorやPhotoshopに慣れている人ほど、この違和感は大きいかもしれません。 Figmaは見た目こそ似ていますが、設計思想がまったく異なるのです。

「アートボード」がない？ 代わりに「フレーム」という概念

IllustratorrやPhotoshopでWebデザインを作成してきた方は、最初にアートボードを設定することが多いと思います。Webデザインを作っていく際のキャンバス、枠組みをまず始めに設定する形ですね。

対して、Figma。
「デザイン」のボタンから新規デザインを追加すると、いきなり空白のワークスペースが表示されます。


アートボードどこやねん。と思った方も少なくないでしょう。

Adobeソフトでの「アートボード」の役割を持つ枠組みは、Figmaでは「フレーム（Frame）」というツールを使用して作成します。
一度配置したフレームは、選択ツールで位置変更やサイズ変更ができます。

ちょっと厄介なのが、Figmaでのフレームは単なる描画領域ではなく、要素をまとめて管理するための箱のような存在であるという点。アートボード代わりに使用するページのレイアウト全体を包むフレームもあれば、ボタンやカードなど小さな単位のフレームもあります。

Figmaでは“入れ子構造”でフレームを作るのが基本です。
HTMLでいうところのbody, div, main, section, article, asideなどの部分、これらの役割をフレームが全て担っているようなイメージです。

キーボードショートカットがよくわからない

基本的なショートカットキーはIllustratorやPhotoshopと、Figmaとで同じものも結構あります。
しかし、上記のフレームツールなど異なるツールもありますから、ショートカットキー派の方は思った操作にならないことも出てくるでしょう。

メインメニュー（Figmaアイコン） > ヘルプとアカウント > キーボードショートカット からショートカットキーを確認できますので、迷ったときはこちらを活用するのがおすすめです。

レイヤーは「重ね順」よりも「階層」で考える

IllustratorやPhotoshopでは、レイヤー＝描画の上下関係を示すものでした。
Figmaでも同様に重ね順としての役割もありますが、より重要なのは構造的な階層を示す役割を担っているという点です。

• IllustratorやPhotoshop: 編集しやすいよう画像だけのグループ、文字だけのグループなどに分けがち
• Figma: 実際のHTMLに近い形で階層化していった方が効率が良い

Figmaの場合は、下図のように、セクションを囲うフレームがあり、その中にカードを並べるフレーム、カードのフレームがあって中に画像やタイトルがある…といった入れ子構造を意識して作るのが一般的。簡単に言うなら「HTMLにした時と同じような入れ子構造でデザインを作る」のがベストなのです。
これを理解しておくと、Figmaの設定が理解しやすく、調整もかなり楽になります。

また、4. IllustratorやPhotoshopにはない便利機能で紹介するオートレイアウトなど使う場合は、階層の順番がそのまま要素の並び順になります。
この点を理解しておくと、「意図しない場所に、要素が勝手に動いてしまう」問題はほぼ解決できます。。

3. ファイルの共有の方法

Figmaを使ううえで、欠かせないのがクライアントやチームの人たちとの「やり取り」です。
Figmaでは同じファイルを同時に開きながら、意見を交わすことができます。IllustratorやPhotoshopのようにファイルを「送る」のではありませんので、「同じ場所を見せる」という感覚を持って操作しましょう。

ファイルの共有の基本

Figmaではドラフト（Draft）状態のファイルでも、プロジェクト内にあるファイルでも共有する（他人に見せる）ことは可能です。

以下では【基礎編】WEB制作初心者のためのFigmaデザイン入門講座で使用したデザインの共有URLを使って、見え方の違いを比較していきます。皆さんもご自身のファイルで「リンクをコピー」して、シークレットウィンドウなどで開いてみてください。

Figmaにサインインしていない状態で「リンクをコピー」で取得したURLを開くと、以下のように表示されます。デザインの閲覧のみが出来る形です。

ツールパレットなども表示されていますが、触るとサインアップ/サインインを求められます。

では、別のアカウントでサインアップした状態で開いてみます。
下図、赤い線で囲った用にツールパレットがシンプルな形になっています。これは権限が「閲覧のみ」になっている場合の表示です。

真ん中にある「編集を依頼」ボタンは、ファイルの編集権限の依頼です。
修正箇所のコメントは、吹き出しのアイコンから追加していきます。

ファイルをチーム内に共有する場合

チームで共有する場合は、ファイルを所属するチームやプロジェクトのフォルダに移動する必要があります。

デザイン画面の右上にある「共有」ボタン、もしくは下記のファイル一覧の中から共有したいファイルを右クリック > 共有 から設定できます。

ドラフトファイルの場合は、ファイル共有の上部に「ファイルをプロジェクトに移動する」という項目が表示されます。ファイルを移動をクリックして、共有したいプロジェクトを選択すればOK。

ドラフトからプロジェクト内にファイルが移動されます。
これで、このプロジェクトに所属するメンバー全員が同じファイルを開けるようになります。

ファイル共有時に相手と権限を選ぶ

Figmaはファイルを相手に送るのではなく、共有＝見せたい相手がファイルにアクセス出来るようにすることが基本です。意図しない相手にファイルが見られてしまわないよう、誰がファイルを見られのか、誰が編集できるのかを設定すると、なお良いでしょう。

この辺の設定も、「共有」のウィンドウで行います。
注目していただきたいのは、上部のユーザー全員となっている部分です。

上図の設定の場合は、URLを知っている人はだれでもアクセスできるという状態です。 案件で使用するファイルの場合、もう少し公開幅を狭めたいですよね。

以下のようにクリックして「招待されたユーザーのみ」に切り替えると、招待から入力したメールアドレスのFigmaアカウントを持っている人のみがアクセスできるようになります。

共有時に付与できる権限は「閲覧のみ」「編集可」の２種類。

• 閲覧のみ：デザインの閲覧、コメント追加のみ可能です。
• 編集可：デザインを直接編集することが可能です。

デザイン確認・修正依頼をもらうだけであれば「閲覧のみ」で良いでしょう。
プロジェクトのオーナーがクライアントの場合は、クライアント側の設定（プロジェクトで設定されている各ユーザーの権限）が適用されます。

4. コメント機能でクライアントと直接やり取りする

コメント機能の基本

Figmaには「コメント」という機能があります。
コメントツールを選択すると、デザイン上の任意の場所をクリックしてコメントを残すことができます。

デザイナー側は、デザイン上に表示されているコメント（ポストイットのような表示）にマウスカーソルを重ねることでコメントを確認できます。クリックするとそのまま返信なども行えますよ。

コメントツールに持ち替えると、右サイドパネルがコメントの一覧になります。
右パネルからコメントをクリックすることでも、コメントされた箇所・詳細を確認することが可能です。

コメントの返信・解決済み設定

コメントは手軽で便利な反面、使い方を誤ると混乱のもとになります。 修正が終わったコメントを残したままにしておくと、他の人が「まだ未対応なのか」と誤解することがあります。

そのため、行う対応に応じて「返信を入力する」や「解決済み」にするようにしましょう。
方法はクライアント・企業ごとに違うので、過去のやり取りを参照したり、事前に打ち合わせをしておくと良いです。

@を使ってメンションした相手には、コメントが追加された通知のメールも送付されます。
「リンクをコピー」と合わせて、見落とされたくないコメントの時に活用してください。

「解決済み」にしたコメントは、デザイン上や右サイドの一覧から消えます。
過去のやり取りを見直したい場合は、検索横のフィルタマークから表示させることができます。

5. IllustratorやPhotoshopにはない機能

これまでグラフィックツールを使ってきた方の多くは、Figmaを触り始めると「なんとなく使えるけれど…」とちょっと微妙な気分になるかもしれません。
IllustratorやPhotoshopに慣れている人ほど、この違和感は大きいと思います。 FigmaはWebデザインを制作することをベースに作成されたツールです。最初は違和感や使いにくさに感じる部分も、慣れてくれば「おぉ、楽！」に変りますよ。

グループ化よりも便利な「フレーム化（オートレイアウト）」

Illustrator感覚で複数の要素をまとめようとして、つい「グループ化（Ctrl＋G / Cmd + G）」を使う方が多いと思います。

しかし、Figmaにはオートレイアウト（Auto Layout）という強力な機能があります。
オートレイアウトはフレームに設定できる機能の一つで、フレーム（親要素）に設定をすることで子要素同士の間隔や整列を自動的に保つことができます。単にまとめるだけのグループ化とは異なり、オートレイアウトは配置ルールを定義するという違いがあります。

たとえば、ボタン内のテキストを長くしても、背景の長方形が自動で伸びてくれる。
たとえば、幅を変えてもレイアウトが崩れないカードデザインを設定する。

ボタンテキストごと、PC/TB/スマホなどのデザイン幅ごとにパーツを作り直す手間が省けます。

ちなみに「思った位置にオブジェクトが置けない！」や「並び順が意図したとおりにならない」という場合は、そのグループがオートレイアウトになっている可能性大。
オートレイアウトではレイヤーの順番が並び順になっていたり、親要素（オートフレーム）の配置設定が効いてしまうので、操作したい要素がオートレイアウトに内容されていないか確認してみてください。

スタイルでデザインルールを一括管理できる

Figmaには「スタイル（Style）」という仕組みがあります。　 これは、色や文字、効果などのデザイン要素を共通設定として登録できる機能です。下図の1200のように薄くグレーの背景が付く値が、スタイル登録されているものです。

たとえば「メインカラー」「本文テキスト」「見出しフォント」などをスタイルとして登録しておくと、他のページでも簡単に再利用できます。
万一、全体の色を変更したい場合でも、スタイルを一括で更新するだけで、全ファイルに自動で反映されます。

クラウド上で共有も可能なため、デザインの一貫性を保ちながら、チーム全体で同じルールを使えることが、Figmaの強みのひとつです。

コンポーネントでパーツを再利用する

もうひとつの便利な機能が「コンポーネント（Component）」です。
これは、よく使うパーツをひとまとめにして再利用できる仕組みです。

ボタンやナビゲーションなど、デザイン中で何度も登場する要素をコンポーネント化しておけば、同じ見た目と動きを保ったまま何度でも使うことができます。さらに「マスター（元のコンポーネント）」を修正すれば、すべてのコピーにも自動的に変更が反映されます。

Illustratorのシンボル機能に似ていますが、Figmaでは階層やオートレイアウトを含めた構造をそのまま保持できるため、より柔軟に使えます。

プロトタイプで画面遷移を確認できる

Figmaでは、デザインの段階で簡単な画面遷移を再現することもできます。
これを「プロトタイプ（Prototype）」と呼びます。

リンクを設定したい要素を選び、遷移先のフレームを指定するだけで、クリックによる動作を再現できます。 この機能を使えば、クライアントに「このボタンを押すと次の画面に移動します」と説明しやすくなります。 複雑なアニメーションや演出を作りこむまでしなくても、ユーザーフローを簡単に伝える目的であれば十分です。

同時に編集できるという新しい体験

Figmaの最大の特徴は、複数の人が同時に同じファイルを編集できることです。他のメンバーがどこを操作しているかが、リアルタイムで画面に表示されます。

会議中などでも、相手のカーソルが見えることで、「どの部分の話をしているのか」がすぐにわかります。簡単な修正ならその場で修正してしまえば、相手にもリアルタイムで更新が反映されますので、修正版のやり取りや、クライアントの曖昧な要望からの「そういうことじゃないんだよ！」と言われるストレスを大幅に減らすことができます。

まとめ

Figmaはファイルを「保存する」よりも「共有する」ことを前提に設計されている点が最大の特徴です。クラウドベースのツールであるため、常にファイルが最新の状態で保存されています。Illustratorのように「最新データをどれか確認する」手間がなく、更新は即反映・履歴を使えば「昨日のバージョンに戻したい」といった要望にもすぐ対応できます。

それ以外にも、IllustratorやPhotoshopと似た見た目・機能を持つものの、デザインを作成していく上での考え方には異なる部分があります。初めてFigmaを触るときは、フレームやオートレイアウトの仕組みなど、慣れない部分に戸惑うかもしれません。
しかし、一度“Figma的な考え方”に慣れてしまえば、スムーズにデザイン作業ができますよ。

IllustratorやPhotoshopで培ってきたデザインの基礎は、決して無駄にはなりません。
むしろ、それらの経験があるからこそ、Figmaの合理的な仕組みをより深く理解できるはずです。
Figmaを活用して、あなたのデザインを更に広げていってください！