Figmaとは？3分でわかる基礎知識
Figmaは、ブラウザ上で動作するUIデザインツールです。インストール不要で、インターネット環境があればどこからでも使えます。
Figmaが業界標準になった理由は主に3つあります。
- リアルタイム共同編集：複数人が同時に同じファイルを編集できます
- 無料プランが充実：個人学習なら無料プランで十分な機能が使えます
- 豊富なプラグイン：Unsplash、Iconifyなど作業を効率化するプラグインが多数あります
Figmaの料金プランを比較（2026年最新）
| プラン | 月額 | 特徴 |
|---|---|---|
| 無料（Starter） | ¥0 | ドラフト数無制限、プロジェクト3つまで |
| Professional | 約¥1,800/月 | プロジェクト数無制限、バージョン履歴 |
| Organization | 約¥5,400/月 | 組織向け機能、SSO |
個人学習・ポートフォリオ制作なら、無料プランで十分です。
Figmaの基本的な使い方（初心者向けステップ）
① アカウント作成〜初期設定
figma.comにアクセスし、メールアドレスまたはGoogleアカウントで登録します。登録後、「New design file」から新しいファイルを作成できます。
② フレーム・シェイプ・テキストの基本操作
フレーム（F）はページの「キャンバス」です。スマホ（375×812px）やPC（1440px幅）などのプリセットから選べます。
③ コンポーネントとオートレイアウト
コンポーネントは「再利用できるパーツ」です。ボタンやカードをコンポーネント化しておくと、デザインの一貫性を保ちながら効率よく制作できます。
④ プロトタイプの作り方
右側パネルの「Prototype」タブから、画面遷移を設定できます。ボタンをクリックしたら別のフレームに移動する、といったインタラクションを設定できます。
⑤ 書き出し（Export）の方法
書き出したいレイヤーを選択し、右側パネル下部の「Export」から形式（PNG/JPG/SVG/PDF）を選んで書き出します。
Figma vs Adobe XD、どっちを学ぶべき？
Adobe XDの開発終了について
2024年、AdobeはAdobe XDの新機能開発を終了することを発表しました。今から学ぶなら、圧倒的にFigmaをおすすめします。
まとめ：Figmaは無料で始められるWebデザインの第一歩
Figmaは無料で始められ、業界標準のツールです。今からWebデザインを学ぶなら、Figmaを最初に習得することを強くおすすめします。