Figmaは、UI/UXデザインやWebデザインなどのデジタルデザインに特化したツールで、その最大の特徴はブラウザベースの設計にあります。インターネットブラウザさえあれば、誰でも簡単にアクセスでき、チームメンバーとのスムーズな共有やコラボレーションが可能です。さらに、コンポーネント機能による再利用可能なUIパーツの管理や、バリアブルズ・スタイル機能による配色・フォントの一元管理など、現代のデジタルデザインに不可欠な機能が充実しています。本記事では、Figmaを使って実現できることを詳しく解説していきます。
Figmaのサービスサイトhttps://www.figma.com/ja-jp/
BONO では無料のFigma入門コースを提供しています。
動画のやり方を見ながら、真似することで、Figma操作の基本を誰でも習得できます
Figma&UIデザインコース
https://www.bo-no.design/rdm/uidezainru-men
Figmaをこれから学びたい方はぜひ活用してみてください。
Figmaの真の強みは、これらの機能が単独で存在するのではなく、シームレスに連携している点にあります。UIデザインからプロトタイプ作成、チームコラボレーションまで、一つのプラットフォームで完結できることは、現代のデザインワークフローにおいて大きなアドバンテージとなっています。
デザイナーだけでなく、エンジニア、プロジェクトマネージャー、そしてクライアントまで、プロジェクトに関わる全ての人々がスムーズにコミュニケーションを取れる環境を提供するFigma。これからのデジタルプロダクト開発において、ますます重要なツールとなっていくことでしょう。
初心者の方も、まずは基本的な機能から少しずつ試してみることをお勧めします。Figmaの持つ可能性を、ぜひ御社のプロジェクトでも活用してみてください
現代のデザインワークフローにおいて、Figmaは以下の7つの主要な機能を提供しています：
それぞれの機能について、実践的な活用方法を見ていきましょう。
デジタルプロダクトの設計において、UIデザインは最も重要な要素の一つです。Figmaは特にUIデザインにおいて卓越した機能を提供しており、開発チームとの協業を強力にサポートします。
これらの機能により、デザインからエンジニアリングへの橋渡しがスムーズになります。例えば、コンポーネント機能を使用することで、ボタンやフォームといったUIパーツを一元管理でき、デザインの一貫性を保ちながら効率的な開発が可能になります。
Webデザインの現場でも、Figmaは強力な味方となります。従来のデザインツールと比べて、特に以下の点で優位性を発揮します：
例えば、Webサイトのヘッダーやフッターといった共通パーツを一度作成すれば、それを複数のページで使い回すことができます。さらに、元となるコンポーネントを編集すれば、そのパーツを使用している全てのページに変更が反映されます。
グラフィックデザインツールとしても、Figmaは十分な機能を備えています。特に基本的なバナーデザインにおいては、以下のような用途で活躍します：
高度なエフェクトや質感表現が必要な場合はPhotoshopが適していますが、基本的な平面デザインであれば、Figmaの機能で十分にカバーできます。実際、多くのクリエイターがFigmaだけでコンテンツのサムネイル制作を行っています。
Figmaは従来のプレゼンテーションツールとは一線を画す、新しいスライド作成環境を提供します：
特筆すべきは、新しく登場した「Figmaスライド」です。このサービスにより、Figmaのデザイン機能を最大限に活かしながら、プレゼンテーション特化の環境で作業することが可能になりました。
Figmaの強みの一つは、デザインとプロトタイプ作成を同一ツール内で完結できる点です：
デザインからプロトタイプまでをシームレスに作成できることで、アイデアの検証やユーザビリティテストがより効率的に行えます。
ブラウザベースのツールであることを活かし、Figmaは優れたコラボレーション機能を提供します：
チームメンバーやステークホルダーとの円滑なコミュニケーションを実現し、プロジェクトの進行を加速させます。
Figmaはデザインシステムの構築と管理において、特に優れた機能を提供します：
これらの機能により：
が実現可能となります。
デジタルデザインツールとして急速に普及しているFigma。その人気の背景には、他のデザインツールにはない独自の特長があります。従来のデザインツールが抱えていた課題を解決し、より効率的でシームレスなデザインワークフローを実現しています。今回は、Figmaの主要な4つのメリットについて、実践的な活用シーンを交えながら詳しく解説していきます。
Figmaの最大の特長は、デジタルプロダクト制作に特化した機能群です。特に、UIデザインやWebデザインにおいて、その真価を発揮します。従来のデザインツールでは、デザインとコードの間に大きなギャップが存在していましたが、Figmaはそのギャップを最小限に抑える革新的な機能を提供しています。
オートレイアウト機能
例えば、従来のデザインツールでは、デザイナーが思い描いた通りにレイアウトを組むことができても、それが実際の実装では再現が難しいということがよくありました。Figmaのオートレイアウト機能を使用すると、FlexboxやGridといったWebの標準的なレイアウトシステムに近い形でデザインを構築できます。これにより、デザインの段階から実装の制約を考慮することができ、後々の手戻りを防ぐことができます。
これらの機能を活用することで、例えばブランドカラーやフォントサイズといった基本的な要素から、ボタンやフォームといった複雑なUIコンポーネントまで、一貫性を保ちながら効率的に管理することができます。特に大規模なプロジェクトやチーム開発において、この機能の価値は計り知れません。
従来のデザインツールと一線を画すFigmaの特長として、ブラウザベースの設計が挙げられます。この特徴は、特にリモートワークが一般化した現代のワークスタイルと相性が良く、場所を問わない柔軟な働き方を可能にします。
ただし、以下の点には注意が必要です：
Figmaは、チームでのデザイン制作を強力にサポートします。特に、複数のステークホルダーが関わる現代のプロダクト開発において、このコラボレーション機能は非常に重要な役割を果たします。
例えば、従来のワークフローでは、デザインの共有やフィードバックのやり取りに多くの時間と手間が必要でした。Figmaでは、デザインの作成から共有、フィードバック、修正までのサイクルを大幅に短縮することができます。また、プロジェクトの進行状況を常に全員が把握できることで、より効率的な意思決定が可能になります。
2024年現在、Figmaは機能制限付きながら、無料プランを提供しています。これは、デザインツールの導入を検討している個人やチームにとって、大きなメリットとなっています。
※具体的な制限事項や料金プランの詳細については、別途「料金プラン」の記事でご紹介いたします。
Figmaには4つの料金プランが用意されており、個人からエンタープライズまで、様々な規模や目的に応じて選択することができます。各プランの詳細を見ていきましょう。
個人やスモールチームの入門に最適な無料プランです。基本的な機能を備えており、Figmaを始めるのに十分な機能を提供しています。
主な機能：
ユースケース：
現在、有料プランにはプロフェッショナル・ビジネス・エンタープライズの3つがあります。有料プランにする特徴としてはチーム間のコラボレーション機能の解放があります。
□ 無料プラン（スターターチーム）の主な制限
□ 有料プランで解放される重要機能
デザイン面での拡張機能
開発連携の強化
プロジェクト管理の向上
Figma.comにアクセスして、新規登録からアカウントを作成しましょう。Figmaは日本語に対応しているので日本語のサイトにアクセスすると良いでしょう。
「無料で始める」のボタンからアカウント作成をはじめましょう。
登録時に入力したメールアドレスに確認のメールが届きます。メールから確認のリンクをクリックして始めましょう。
.webp)
認証メールをクリックする、「表示名」の登録が始まります。Figmaで使用したいアカウント名を入力しましょう（あとから変更できます）
そのあといくつかアンケートが出てくるので回答しましょう。
そのあといくつかアンケートが出てくるので回答しましょう。プランも無料から使い始めることができます。
.webp)
そのあといくつかアンケートが出てくるので回答しましょう。
プランも無料から使い始めることができます。
.webp)
Figmaの登録が成功したら、Figma操作の起点になるホーム/チーム画面についての使い方を把握しておきましょう。ここではファイルを作成したり、ファイルの管理・閲覧などができます。
主に左のサイドバーの「管理：ナビ」と右側の「ファイル・作成」に分かれます。管理・ナビでは、ファイルの整理や管理をしたりすることが主になります。ファイル・作成のエリアでは現在選択しているプロジェクトなどの中にあるファイルの一覧を確認することができます。
.webp)
自分のアカウント管理や設定は、アカウントをクリックして詳細を選択することで可能になります。メールアドレスの変更などの自分の情報の編集確認や、テーマの変更でダークモードに対応できたりします。
最近開いたり、作成されたファイルが一覧で閲覧できます。無料プランのように作成できるファイルに限りがある場合はほとんどの場合はこちらを見ることで、ファイルを探すことができるでしょう。
Figmaはチームごとにプランの課金が基本的には行われます（エンタープライズなどのプランを除く）。そのためチームをクリックすることで今誰がチームの編集権限を持っているかなどを確認することができます。
ファイルに対する”フォルダ”のような概念です。複数のファイルをプロジェクトに所属することで、ファイル管理を容易にすることができます。
ファイルを新規作成できる導線になります。主に以下のようなものを作成できます。基本的なデザイン作業に関しては「デザインファイル」を作成して編集することがメインになります。
メインはデザインファイルを作成を使ってデザインを作成しましょう。FigJamはオンライン上で付箋やマインドマップを使ってアイデアをブレストしたりすることに特化したツールになります。会議のメモをしたりするときにも使うことができます。
Figmaスライドは2024年からリリースした新しいツールです。Figmaの仕組みを使ってスライドを作成・管理することができます。
インポートはSketchファイルなど、他のデザインツールからFigmaに変換することができる作成方法です。
選択しているプロジェクトや、表示方法（”最新”のようなもの）のファイルの一覧が閲覧できます。こちらをクリックすることで、ファイルを開いて確認・編集することが可能です。
デザインファイル、FigJam、スライドの３種類はマウスホバーすると表示されるアイコンの違いでも確認することが可能です。
各ファイルに表示されている画像サムネイルも、ファイル内で設定することで変更することができるので管理をすることもできます。
続いて、デザインする上で最も活用するFigmaデザインファイルの基本の解説をしていきます。まずはファイルを開くと表示される各要素について認識をしておきましょう。
全てを暗記するというよりは使いながら慣れていくのがお勧めです。まずは全体像を把握して全体の機能を把握して慣れる確率を上げましょう。
それぞれ役目ごとにブロックを分けて解説をしていきます。今回以下のようにブロックを分けてみました。
1 : ナビゲーション
2 : ファイルの中身
3 : ツール
4 : プロパティ
主にデザインファイルに対しての操作をする機能や、ホーム画面に戻る導線があります。
こちらをクリックすることでデザインファイルから、ホーム画面へ戻ることができます。
スクリーンショットで「無題」と書いているところをクリックすると、ファイルのタイトルを編集することができます。
ファイルをシェアすることができます。シェアする際にリンク設定を”公開”にすることで、同じチームにいないアカウントの人でも、ファイルの閲覧・コピーなどが可能になり、コラボレーションに便利です
プロトタイプ機能のプレビューをすることができます。パソコンブラウザで自分のデザインを確認したり、スマホアプリを使うことでスマホでの表示を確認することができます。
このエリアで、編集中のファイルの中身を確認することができます。
デザインを作っているとさまざまな要素を追加していきますが、それが「レイヤー」の部分に階層で現れます。
また「ページ」を増やすことで、全く別のシートでデザインを作り始めることも可能になります。例えば、作成しているときのバージョンをページで管理したり、「ラフ」と「確定版」のように別けることも可能です。
実際にデザインを作成するときに使う道具が置かれている場所になります。例えばテキストを配置したり、複数の要素をグループにまとめたり、四角形を置いたりするツールが用意されています。またアクションでFigma内の要素を検索したりすることもできます。
また選択するとツールの中に他ツールが格納されています（スクショの黒いメニュー）。その中から他のツールを選択できます。また右側に書いてあるアルファベットはショートカット表記になっています。半角で該当するキーボードを押すことですぐにそのツールを呼び出すことができます。
Figmaを操作する上での基本ツールです。編集したい、移動したいオブジェクトの選択ができる「移動」ツールはかなり多用します。ショートカット”V”でいつでも呼び出すことができるので、覚えておくと良いでしょう。
手のひらツールはMacbookについているトラックパッドや、Spaceキーを押しながらクリック移動でも代替利用することができます。
「拡大縮小機能」も画像の拡大などで覚えておくと便利です。同じ比率で指定した倍率に拡大・縮小をしてくれるツールです。
フレームツールは他のデザインツールでいうところのグループに近い機能です。Figmaでは基本的にFrame/フレームの箱を使ってキャンバス、デザインする範囲、を指定したり、複数の要素を1つの箱としてまとめたりします。
セクションツールはデザインファイル上の要素を整理する際に便利な機能です。デザインに干渉しないグループを呼び出すことができ、整理することが容易になるツールです。慣れてきた初心者はぜひ覚えておくと、ファイル整理の速度を劇的に上げることができるでしょう。
Figmaのセクションツールに関して詳しくはこちらの動画でも解説しています。
長方形や直線などの図形を呼び出すことができます。UI作成上は慣れてくるFrameフレームツールを使って線を引いたり、四角を作ったりすることが多いためあまり使わないかもしれませんが、グラフィカルな要素を作るときに使うツールになるので覚えておきましょう。
画像や動画の貼り付けも可能ですが、画像や動画ファイルをFigmaにそのままドラッグ＆ドロップすることでも貼り付けすることはできます。
イラストレーターで使えるようなベクターでパスを編集できるペンツールです。Figma自体がベクターファイルに対応しているため、簡単なパス作業でのグラフィック作成はFigmaでも可能です。
鉛筆ツールはドラッグすることで線を引けるツールです。会議中に場所を示すなどで使うと便利です。
Figmaのファイル上にコメントを残すことができる機能です。自分用のメモを書いたり、他の人に伝えるメモを書いたりするときに使用することができます。
メモを残すとその残した場所に追従する形でメモが残ります。Figmaでコラボレーションするときに便利な機能です。ただ、ホバー・クリックしないと中身がわからないので多用しすぎると少し煩雑になってしまうので、使い所やチームでのルール決めなどは必要な場合があります。
文字を配置するツールです。こちらもUIデザインやWebデザイン、バナー作成している時には基本の機能になるため頻繁に使うツールになるでしょう。ショートカットは”T”を押すことでいつでも呼び出すことができます。
2024年のUI3にFigmaがアップデートされてから登場した機能です。メインではFigmaファイル上の操作を検索することができたり、プラグインやAI機能を呼び出すことができます。
操作に迷った時は検索することでツールを出してくれますし、プラグインやAI機能など、Figmaのプラスαの機能を呼び出す際に触ることになる場所です。
Figmaの右パネルは選択中のオブジェクトに沿った内容が表示され、選択中のものを編集するために必要な情報が表示されます。例えば「テキスト」をクリック選択しているときには、テキストサイズを変更するためのボックスなどが表示されます。
中身を編集したいときは左のパネルに表示される、というのを知っておくと慣れる速度が早まるでしょう。
バリアブルやスタイルという、繰り返し使用するUI要素を登録できる機能へアクセスできます。”ローカル”という表現がついていますが、これは開いているファイルだけの繰り返し設定する内容を登録できるという意味です。
有料プランにすることで、チーム内の他ファイルに使いまわせる「ライブラリ」という機能を使うことで、ローカルで登録した内容を他ファイルに使い回すことも可能です。
選択中の際は、その選択したオブジェクトを編集できる要素が表示されます。
Figmaでは選択したものをJPG/PNG/SVG/PDFに書き出すことが可能です。選択したもの状態で「エクスポート」を選択することで、書き出しサイズの倍率とファイル形式を選択して、素材として書き出すことができます。
エンジニアリングで必要な画像素材や、説明に必要なイメージはこちらから書き出しましょう。
Webの標準的なFlexboxの考え方を採用し、レスポンシブデザインを効率的に実現します。
要素間の余白や配置を自動で調整し、コンテンツ量の変更にも柔軟に対応。実装を考慮したデザインが可能です。
動画やチュートリアルの内容は、実際のURLを参照することをお勧めします。これらのリソースでは、段階的にオートレイアウトの基礎から応用まで学ぶことができます。
Figmaのプロトタイプ機能を使うことで、静的なデザインに動きや画面遷移を追加し、実際のプロダクトに近い形でデザインを確認・共有することができます。
UIやWebサイト上でのインタラクション（クリックによる画面の移動や、ボタンを押すことでの状態変化など）をFigmaで作成したデザインファイルに設定することができます。
プロトタイプ機能で設定した動きをプレビューで確認することができます。
□ デスクトップでの確認
□ スマートフォンでの確認
プレビューを他のユーザーでも確認するためにリンクでシェアすることが可能です。
Figmaはブラウザベースのツールであり、これにより驚くほど簡単にデザインの共有が可能です。
誰でもシェアされたデザインデータをがワンクリックで閲覧可能になります。またリンクの公開設定をチームのみ、または閲覧課に設定することもできるので 自分のチームにいないメンバーにもデザインデータをシェアすることが可能になります
Figmaはブラウザをベースにしているのでシェアが簡単に可能です リンクを生成することでメールやスラックなどに貼れ、 シェアは同様にプロトタイプのみのシェアも可能になっています プロトタイプが表示されるプレビューの画面でシェアを押すことによってプロトタイプのシェアをすることが可能です
Figmaはデザインファイルに直接コメントを残すことができます。
コメント機能を選択してクリックすることによって、コメントしたい箇所を選択してコメントを残すことができます。また、コメント機能は範囲をドラッグで指定することによって、一定の範囲に対してのコメントを残すことも可能になります。
コンポーネントは、デザインの再利用性と一貫性を高めるFigmaの中核機能です。ボタンやナビゲーション、カードなどのUIパーツを一元管理することで、効率的なデザイン作業と品質の維持を実現します
コンポーネントをさらに強力に活用するための機能として、バリアントが提供されています。この機能により、UIの状態管理がより直感的かつ効率的になります。
スタイル登録は、デザインの基本要素を定義・管理するための機能です。テキストスタイルやシャドウなど、細かなデザイン要素を統一的に管理することができます。
バリアブルは、Figmaでのデザインシステム構築をより強力にサポートする新機能です。デザインの基本要素をトークン化し、より体系的な管理を可能にします。
バリアブル機能の具体的な活用方法については、詳細なチュートリアルを提供しています。Variables機能の基本から応用まで、ステップバイステップで学ぶことができます。
バリアブル/Variables機能の使い方はこちらの記事で解説しています。https://www.bo-no.design/contents/figma-variables-turtorial
2024年、デザインツールの定番であるFigmaに新しいAI機能が追加されました。本記事では、実務でよく使う可能性の高いAI機能と開発者向け機能について、初心者にもわかりやすく解説していきます。
First Draft（ファーストドラフト）は、UIやウェブサイトのデザインデータをAIが自動生成してくれる新機能です。よく見かけるパターンのデザインであれば、イメージに近いものを瞬時に生成してくれます。例えば「お問い合わせフォームページ」などはすぐに近いものを出してくれるでしょう。
具体的な使用例：
※注意点：
この機能は完成品のデザインではなく、アイデアの第一段階となる「ドラフト」を生成することが目的です。
Figmaでは、AIが自動でレイヤー名を付けてくれる機能が存在します。これはかなり便利で、レイヤーの構造をAIが読み取ることで、適したレイヤー名に全て変更してくれます。
□ 使い方：
写真から特定の要素だけを抽出したい場合に便利な機能です。簡単な画像の切り抜き素材が欲しい場合はFigmaだけで完結して行うことができます。
特徴：
注意点：
。
開発者向けの特別なモードで、デザインからコーディングへの移行を支援します。開発者がデザインデータを見ることに特化したWebモードという機能もFigmaには存在します。有料プランへの加入が必要です。
Figmaは、現代のデジタルデザインワークフローを大きく変革するツールとして急速に普及しています。その特徴と機能を振り返ってみましょう。
デザインツールとしてのFigmaは、単なる作図ツールの域を超え、チーム全体のデザインワークフローを効率化するプラットフォームへと進化しています。特に2024年に追加されたAI機能により、デザイナーの作業効率は更に向上することが期待されます。
初心者の方も、基本的な機能から段階的に習得することで、効率的なデザインワークフローを構築することができます。Figmaの持つ可能性を最大限に活用し、より良いデザイン制作に取り組んでみましょう
Figmaの登録はこちらからhttps://www.figma.com/ja-jp/
BONO では未経験からでもUIUXデザイナーに転職した実績のあるオンラインコースを提供しています。
現場歴10年以上のデザイナーが考案・更新している「学習ロードマップ」のコースに沿って、3つの基礎を身につけ、デザイナーを目指すことができます。
詳しくはBONOのUIUXコース、または、BONOのサイトをご覧ください。
UIUXデザインコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
Figmaは、UI/UXデザインやWebデザインなどのデジタルデザインに特化したツールで、その最大の特徴はブラウザベースの設計にあります。インターネットブラウザさえあれば、誰でも簡単にアクセスでき、チームメンバーとのスムーズな共有やコラボレーションが可能です。さらに、コンポーネント機能による再利用可能なUIパーツの管理や、バリアブルズ・スタイル機能による配色・フォントの一元管理など、現代のデジタルデザインに不可欠な機能が充実しています。本記事では、Figmaを使って実現できることを詳しく解説していきます。
Figmaのサービスサイトhttps://www.figma.com/ja-jp/
BONO では無料のFigma入門コースを提供しています。
動画のやり方を見ながら、真似することで、Figma操作の基本を誰でも習得できます
Figma&UIデザインコース
https://www.bo-no.design/rdm/uidezainru-men
Figmaをこれから学びたい方はぜひ活用してみてください。
Figmaの真の強みは、これらの機能が単独で存在するのではなく、シームレスに連携している点にあります。UIデザインからプロトタイプ作成、チームコラボレーションまで、一つのプラットフォームで完結できることは、現代のデザインワークフローにおいて大きなアドバンテージとなっています。
デザイナーだけでなく、エンジニア、プロジェクトマネージャー、そしてクライアントまで、プロジェクトに関わる全ての人々がスムーズにコミュニケーションを取れる環境を提供するFigma。これからのデジタルプロダクト開発において、ますます重要なツールとなっていくことでしょう。
初心者の方も、まずは基本的な機能から少しずつ試してみることをお勧めします。Figmaの持つ可能性を、ぜひ御社のプロジェクトでも活用してみてください
現代のデザインワークフローにおいて、Figmaは以下の7つの主要な機能を提供しています：
それぞれの機能について、実践的な活用方法を見ていきましょう。
デジタルプロダクトの設計において、UIデザインは最も重要な要素の一つです。Figmaは特にUIデザインにおいて卓越した機能を提供しており、開発チームとの協業を強力にサポートします。
これらの機能により、デザインからエンジニアリングへの橋渡しがスムーズになります。例えば、コンポーネント機能を使用することで、ボタンやフォームといったUIパーツを一元管理でき、デザインの一貫性を保ちながら効率的な開発が可能になります。
Webデザインの現場でも、Figmaは強力な味方となります。従来のデザインツールと比べて、特に以下の点で優位性を発揮します：
例えば、Webサイトのヘッダーやフッターといった共通パーツを一度作成すれば、それを複数のページで使い回すことができます。さらに、元となるコンポーネントを編集すれば、そのパーツを使用している全てのページに変更が反映されます。
グラフィックデザインツールとしても、Figmaは十分な機能を備えています。特に基本的なバナーデザインにおいては、以下のような用途で活躍します：
高度なエフェクトや質感表現が必要な場合はPhotoshopが適していますが、基本的な平面デザインであれば、Figmaの機能で十分にカバーできます。実際、多くのクリエイターがFigmaだけでコンテンツのサムネイル制作を行っています。
Figmaは従来のプレゼンテーションツールとは一線を画す、新しいスライド作成環境を提供します：
特筆すべきは、新しく登場した「Figmaスライド」です。このサービスにより、Figmaのデザイン機能を最大限に活かしながら、プレゼンテーション特化の環境で作業することが可能になりました。
Figmaの強みの一つは、デザインとプロトタイプ作成を同一ツール内で完結できる点です：
デザインからプロトタイプまでをシームレスに作成できることで、アイデアの検証やユーザビリティテストがより効率的に行えます。
ブラウザベースのツールであることを活かし、Figmaは優れたコラボレーション機能を提供します：
チームメンバーやステークホルダーとの円滑なコミュニケーションを実現し、プロジェクトの進行を加速させます。
Figmaはデザインシステムの構築と管理において、特に優れた機能を提供します：
これらの機能により：
が実現可能となります。
デジタルデザインツールとして急速に普及しているFigma。その人気の背景には、他のデザインツールにはない独自の特長があります。従来のデザインツールが抱えていた課題を解決し、より効率的でシームレスなデザインワークフローを実現しています。今回は、Figmaの主要な4つのメリットについて、実践的な活用シーンを交えながら詳しく解説していきます。
Figmaの最大の特長は、デジタルプロダクト制作に特化した機能群です。特に、UIデザインやWebデザインにおいて、その真価を発揮します。従来のデザインツールでは、デザインとコードの間に大きなギャップが存在していましたが、Figmaはそのギャップを最小限に抑える革新的な機能を提供しています。
オートレイアウト機能
例えば、従来のデザインツールでは、デザイナーが思い描いた通りにレイアウトを組むことができても、それが実際の実装では再現が難しいということがよくありました。Figmaのオートレイアウト機能を使用すると、FlexboxやGridといったWebの標準的なレイアウトシステムに近い形でデザインを構築できます。これにより、デザインの段階から実装の制約を考慮することができ、後々の手戻りを防ぐことができます。
これらの機能を活用することで、例えばブランドカラーやフォントサイズといった基本的な要素から、ボタンやフォームといった複雑なUIコンポーネントまで、一貫性を保ちながら効率的に管理することができます。特に大規模なプロジェクトやチーム開発において、この機能の価値は計り知れません。
従来のデザインツールと一線を画すFigmaの特長として、ブラウザベースの設計が挙げられます。この特徴は、特にリモートワークが一般化した現代のワークスタイルと相性が良く、場所を問わない柔軟な働き方を可能にします。
ただし、以下の点には注意が必要です：
Figmaは、チームでのデザイン制作を強力にサポートします。特に、複数のステークホルダーが関わる現代のプロダクト開発において、このコラボレーション機能は非常に重要な役割を果たします。
例えば、従来のワークフローでは、デザインの共有やフィードバックのやり取りに多くの時間と手間が必要でした。Figmaでは、デザインの作成から共有、フィードバック、修正までのサイクルを大幅に短縮することができます。また、プロジェクトの進行状況を常に全員が把握できることで、より効率的な意思決定が可能になります。
2024年現在、Figmaは機能制限付きながら、無料プランを提供しています。これは、デザインツールの導入を検討している個人やチームにとって、大きなメリットとなっています。
※具体的な制限事項や料金プランの詳細については、別途「料金プラン」の記事でご紹介いたします。
Figmaには4つの料金プランが用意されており、個人からエンタープライズまで、様々な規模や目的に応じて選択することができます。各プランの詳細を見ていきましょう。
個人やスモールチームの入門に最適な無料プランです。基本的な機能を備えており、Figmaを始めるのに十分な機能を提供しています。
主な機能：
ユースケース：
現在、有料プランにはプロフェッショナル・ビジネス・エンタープライズの3つがあります。有料プランにする特徴としてはチーム間のコラボレーション機能の解放があります。
□ 無料プラン（スターターチーム）の主な制限
□ 有料プランで解放される重要機能
デザイン面での拡張機能
開発連携の強化
プロジェクト管理の向上
Figma.comにアクセスして、新規登録からアカウントを作成しましょう。Figmaは日本語に対応しているので日本語のサイトにアクセスすると良いでしょう。
「無料で始める」のボタンからアカウント作成をはじめましょう。
登録時に入力したメールアドレスに確認のメールが届きます。メールから確認のリンクをクリックして始めましょう。
認証メールをクリックする、「表示名」の登録が始まります。Figmaで使用したいアカウント名を入力しましょう（あとから変更できます）
そのあといくつかアンケートが出てくるので回答しましょう。
そのあといくつかアンケートが出てくるので回答しましょう。プランも無料から使い始めることができます。
そのあといくつかアンケートが出てくるので回答しましょう。
プランも無料から使い始めることができます。
Figmaの登録が成功したら、Figma操作の起点になるホーム/チーム画面についての使い方を把握しておきましょう。ここではファイルを作成したり、ファイルの管理・閲覧などができます。
主に左のサイドバーの「管理：ナビ」と右側の「ファイル・作成」に分かれます。管理・ナビでは、ファイルの整理や管理をしたりすることが主になります。ファイル・作成のエリアでは現在選択しているプロジェクトなどの中にあるファイルの一覧を確認することができます。
自分のアカウント管理や設定は、アカウントをクリックして詳細を選択することで可能になります。メールアドレスの変更などの自分の情報の編集確認や、テーマの変更でダークモードに対応できたりします。
最近開いたり、作成されたファイルが一覧で閲覧できます。無料プランのように作成できるファイルに限りがある場合はほとんどの場合はこちらを見ることで、ファイルを探すことができるでしょう。
Figmaはチームごとにプランの課金が基本的には行われます（エンタープライズなどのプランを除く）。そのためチームをクリックすることで今誰がチームの編集権限を持っているかなどを確認することができます。
ファイルに対する”フォルダ”のような概念です。複数のファイルをプロジェクトに所属することで、ファイル管理を容易にすることができます。
ファイルを新規作成できる導線になります。主に以下のようなものを作成できます。基本的なデザイン作業に関しては「デザインファイル」を作成して編集することがメインになります。
メインはデザインファイルを作成を使ってデザインを作成しましょう。FigJamはオンライン上で付箋やマインドマップを使ってアイデアをブレストしたりすることに特化したツールになります。会議のメモをしたりするときにも使うことができます。
Figmaスライドは2024年からリリースした新しいツールです。Figmaの仕組みを使ってスライドを作成・管理することができます。
インポートはSketchファイルなど、他のデザインツールからFigmaに変換することができる作成方法です。
選択しているプロジェクトや、表示方法（”最新”のようなもの）のファイルの一覧が閲覧できます。こちらをクリックすることで、ファイルを開いて確認・編集することが可能です。
デザインファイル、FigJam、スライドの３種類はマウスホバーすると表示されるアイコンの違いでも確認することが可能です。
各ファイルに表示されている画像サムネイルも、ファイル内で設定することで変更することができるので管理をすることもできます。
続いて、デザインする上で最も活用するFigmaデザインファイルの基本の解説をしていきます。まずはファイルを開くと表示される各要素について認識をしておきましょう。
全てを暗記するというよりは使いながら慣れていくのがお勧めです。まずは全体像を把握して全体の機能を把握して慣れる確率を上げましょう。
それぞれ役目ごとにブロックを分けて解説をしていきます。今回以下のようにブロックを分けてみました。
1 : ナビゲーション
2 : ファイルの中身
3 : ツール
4 : プロパティ
主にデザインファイルに対しての操作をする機能や、ホーム画面に戻る導線があります。
こちらをクリックすることでデザインファイルから、ホーム画面へ戻ることができます。
スクリーンショットで「無題」と書いているところをクリックすると、ファイルのタイトルを編集することができます。
ファイルをシェアすることができます。シェアする際にリンク設定を”公開”にすることで、同じチームにいないアカウントの人でも、ファイルの閲覧・コピーなどが可能になり、コラボレーションに便利です
プロトタイプ機能のプレビューをすることができます。パソコンブラウザで自分のデザインを確認したり、スマホアプリを使うことでスマホでの表示を確認することができます。
このエリアで、編集中のファイルの中身を確認することができます。
デザインを作っているとさまざまな要素を追加していきますが、それが「レイヤー」の部分に階層で現れます。
また「ページ」を増やすことで、全く別のシートでデザインを作り始めることも可能になります。例えば、作成しているときのバージョンをページで管理したり、「ラフ」と「確定版」のように別けることも可能です。
実際にデザインを作成するときに使う道具が置かれている場所になります。例えばテキストを配置したり、複数の要素をグループにまとめたり、四角形を置いたりするツールが用意されています。またアクションでFigma内の要素を検索したりすることもできます。
また選択するとツールの中に他ツールが格納されています（スクショの黒いメニュー）。その中から他のツールを選択できます。また右側に書いてあるアルファベットはショートカット表記になっています。半角で該当するキーボードを押すことですぐにそのツールを呼び出すことができます。
Figmaを操作する上での基本ツールです。編集したい、移動したいオブジェクトの選択ができる「移動」ツールはかなり多用します。ショートカット”V”でいつでも呼び出すことができるので、覚えておくと良いでしょう。
手のひらツールはMacbookについているトラックパッドや、Spaceキーを押しながらクリック移動でも代替利用することができます。
「拡大縮小機能」も画像の拡大などで覚えておくと便利です。同じ比率で指定した倍率に拡大・縮小をしてくれるツールです。
フレームツールは他のデザインツールでいうところのグループに近い機能です。Figmaでは基本的にFrame/フレームの箱を使ってキャンバス、デザインする範囲、を指定したり、複数の要素を1つの箱としてまとめたりします。
セクションツールはデザインファイル上の要素を整理する際に便利な機能です。デザインに干渉しないグループを呼び出すことができ、整理することが容易になるツールです。慣れてきた初心者はぜひ覚えておくと、ファイル整理の速度を劇的に上げることができるでしょう。
Figmaのセクションツールに関して詳しくはこちらの動画でも解説しています。
長方形や直線などの図形を呼び出すことができます。UI作成上は慣れてくるFrameフレームツールを使って線を引いたり、四角を作ったりすることが多いためあまり使わないかもしれませんが、グラフィカルな要素を作るときに使うツールになるので覚えておきましょう。
画像や動画の貼り付けも可能ですが、画像や動画ファイルをFigmaにそのままドラッグ＆ドロップすることでも貼り付けすることはできます。
イラストレーターで使えるようなベクターでパスを編集できるペンツールです。Figma自体がベクターファイルに対応しているため、簡単なパス作業でのグラフィック作成はFigmaでも可能です。
鉛筆ツールはドラッグすることで線を引けるツールです。会議中に場所を示すなどで使うと便利です。
Figmaのファイル上にコメントを残すことができる機能です。自分用のメモを書いたり、他の人に伝えるメモを書いたりするときに使用することができます。
メモを残すとその残した場所に追従する形でメモが残ります。Figmaでコラボレーションするときに便利な機能です。ただ、ホバー・クリックしないと中身がわからないので多用しすぎると少し煩雑になってしまうので、使い所やチームでのルール決めなどは必要な場合があります。
文字を配置するツールです。こちらもUIデザインやWebデザイン、バナー作成している時には基本の機能になるため頻繁に使うツールになるでしょう。ショートカットは”T”を押すことでいつでも呼び出すことができます。
2024年のUI3にFigmaがアップデートされてから登場した機能です。メインではFigmaファイル上の操作を検索することができたり、プラグインやAI機能を呼び出すことができます。
操作に迷った時は検索することでツールを出してくれますし、プラグインやAI機能など、Figmaのプラスαの機能を呼び出す際に触ることになる場所です。
Figmaの右パネルは選択中のオブジェクトに沿った内容が表示され、選択中のものを編集するために必要な情報が表示されます。例えば「テキスト」をクリック選択しているときには、テキストサイズを変更するためのボックスなどが表示されます。
中身を編集したいときは左のパネルに表示される、というのを知っておくと慣れる速度が早まるでしょう。
バリアブルやスタイルという、繰り返し使用するUI要素を登録できる機能へアクセスできます。”ローカル”という表現がついていますが、これは開いているファイルだけの繰り返し設定する内容を登録できるという意味です。
有料プランにすることで、チーム内の他ファイルに使いまわせる「ライブラリ」という機能を使うことで、ローカルで登録した内容を他ファイルに使い回すことも可能です。
選択中の際は、その選択したオブジェクトを編集できる要素が表示されます。
Figmaでは選択したものをJPG/PNG/SVG/PDFに書き出すことが可能です。選択したもの状態で「エクスポート」を選択することで、書き出しサイズの倍率とファイル形式を選択して、素材として書き出すことができます。
エンジニアリングで必要な画像素材や、説明に必要なイメージはこちらから書き出しましょう。
Webの標準的なFlexboxの考え方を採用し、レスポンシブデザインを効率的に実現します。
要素間の余白や配置を自動で調整し、コンテンツ量の変更にも柔軟に対応。実装を考慮したデザインが可能です。
動画やチュートリアルの内容は、実際のURLを参照することをお勧めします。これらのリソースでは、段階的にオートレイアウトの基礎から応用まで学ぶことができます。
Figmaのプロトタイプ機能を使うことで、静的なデザインに動きや画面遷移を追加し、実際のプロダクトに近い形でデザインを確認・共有することができます。
UIやWebサイト上でのインタラクション（クリックによる画面の移動や、ボタンを押すことでの状態変化など）をFigmaで作成したデザインファイルに設定することができます。
プロトタイプ機能で設定した動きをプレビューで確認することができます。
□ デスクトップでの確認
□ スマートフォンでの確認
プレビューを他のユーザーでも確認するためにリンクでシェアすることが可能です。
Figmaはブラウザベースのツールであり、これにより驚くほど簡単にデザインの共有が可能です。
誰でもシェアされたデザインデータをがワンクリックで閲覧可能になります。またリンクの公開設定をチームのみ、または閲覧課に設定することもできるので 自分のチームにいないメンバーにもデザインデータをシェアすることが可能になります
Figmaはブラウザをベースにしているのでシェアが簡単に可能です リンクを生成することでメールやスラックなどに貼れ、 シェアは同様にプロトタイプのみのシェアも可能になっています プロトタイプが表示されるプレビューの画面でシェアを押すことによってプロトタイプのシェアをすることが可能です
Figmaはデザインファイルに直接コメントを残すことができます。
コメント機能を選択してクリックすることによって、コメントしたい箇所を選択してコメントを残すことができます。また、コメント機能は範囲をドラッグで指定することによって、一定の範囲に対してのコメントを残すことも可能になります。
コンポーネントは、デザインの再利用性と一貫性を高めるFigmaの中核機能です。ボタンやナビゲーション、カードなどのUIパーツを一元管理することで、効率的なデザイン作業と品質の維持を実現します
コンポーネントをさらに強力に活用するための機能として、バリアントが提供されています。この機能により、UIの状態管理がより直感的かつ効率的になります。
スタイル登録は、デザインの基本要素を定義・管理するための機能です。テキストスタイルやシャドウなど、細かなデザイン要素を統一的に管理することができます。
バリアブルは、Figmaでのデザインシステム構築をより強力にサポートする新機能です。デザインの基本要素をトークン化し、より体系的な管理を可能にします。
バリアブル機能の具体的な活用方法については、詳細なチュートリアルを提供しています。Variables機能の基本から応用まで、ステップバイステップで学ぶことができます。
バリアブル/Variables機能の使い方はこちらの記事で解説しています。https://www.bo-no.design/contents/figma-variables-turtorial
2024年、デザインツールの定番であるFigmaに新しいAI機能が追加されました。本記事では、実務でよく使う可能性の高いAI機能と開発者向け機能について、初心者にもわかりやすく解説していきます。
First Draft（ファーストドラフト）は、UIやウェブサイトのデザインデータをAIが自動生成してくれる新機能です。よく見かけるパターンのデザインであれば、イメージに近いものを瞬時に生成してくれます。例えば「お問い合わせフォームページ」などはすぐに近いものを出してくれるでしょう。
具体的な使用例：
※注意点：
この機能は完成品のデザインではなく、アイデアの第一段階となる「ドラフト」を生成することが目的です。
Figmaでは、AIが自動でレイヤー名を付けてくれる機能が存在します。これはかなり便利で、レイヤーの構造をAIが読み取ることで、適したレイヤー名に全て変更してくれます。
□ 使い方：
写真から特定の要素だけを抽出したい場合に便利な機能です。簡単な画像の切り抜き素材が欲しい場合はFigmaだけで完結して行うことができます。
特徴：
注意点：
。
開発者向けの特別なモードで、デザインからコーディングへの移行を支援します。開発者がデザインデータを見ることに特化したWebモードという機能もFigmaには存在します。有料プランへの加入が必要です。
Figmaは、現代のデジタルデザインワークフローを大きく変革するツールとして急速に普及しています。その特徴と機能を振り返ってみましょう。
デザインツールとしてのFigmaは、単なる作図ツールの域を超え、チーム全体のデザインワークフローを効率化するプラットフォームへと進化しています。特に2024年に追加されたAI機能により、デザイナーの作業効率は更に向上することが期待されます。
初心者の方も、基本的な機能から段階的に習得することで、効率的なデザインワークフローを構築することができます。Figmaの持つ可能性を最大限に活用し、より良いデザイン制作に取り組んでみましょう
Figmaの登録はこちらからhttps://www.figma.com/ja-jp/
BONO では未経験からでもUIUXデザイナーに転職した実績のあるオンラインコースを提供しています。
現場歴10年以上のデザイナーが考案・更新している「学習ロードマップ」のコースに沿って、3つの基礎を身につけ、デザイナーを目指すことができます。
詳しくはBONOのUIUXコース、または、BONOのサイトをご覧ください。
UIUXデザインコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
Figmaは、UI/UXデザインやWebデザインなどのデジタルデザインに特化したツールで、その最大の特徴はブラウザベースの設計にあります。インターネットブラウザさえあれば、誰でも簡単にアクセスでき、チームメンバーとのスムーズな共有やコラボレーションが可能です。さらに、コンポーネント機能による再利用可能なUIパーツの管理や、バリアブルズ・スタイル機能による配色・フォントの一元管理など、現代のデジタルデザインに不可欠な機能が充実しています。本記事では、Figmaを使って実現できることを詳しく解説していきます。
Figmaのサービスサイトhttps://www.figma.com/ja-jp/
BONO では無料のFigma入門コースを提供しています。
動画のやり方を見ながら、真似することで、Figma操作の基本を誰でも習得できます
Figma&UIデザインコース
https://www.bo-no.design/rdm/uidezainru-men
Figmaをこれから学びたい方はぜひ活用してみてください。
Figmaの真の強みは、これらの機能が単独で存在するのではなく、シームレスに連携している点にあります。UIデザインからプロトタイプ作成、チームコラボレーションまで、一つのプラットフォームで完結できることは、現代のデザインワークフローにおいて大きなアドバンテージとなっています。
デザイナーだけでなく、エンジニア、プロジェクトマネージャー、そしてクライアントまで、プロジェクトに関わる全ての人々がスムーズにコミュニケーションを取れる環境を提供するFigma。これからのデジタルプロダクト開発において、ますます重要なツールとなっていくことでしょう。
初心者の方も、まずは基本的な機能から少しずつ試してみることをお勧めします。Figmaの持つ可能性を、ぜひ御社のプロジェクトでも活用してみてください
現代のデザインワークフローにおいて、Figmaは以下の7つの主要な機能を提供しています：
それぞれの機能について、実践的な活用方法を見ていきましょう。
デジタルプロダクトの設計において、UIデザインは最も重要な要素の一つです。Figmaは特にUIデザインにおいて卓越した機能を提供しており、開発チームとの協業を強力にサポートします。
これらの機能により、デザインからエンジニアリングへの橋渡しがスムーズになります。例えば、コンポーネント機能を使用することで、ボタンやフォームといったUIパーツを一元管理でき、デザインの一貫性を保ちながら効率的な開発が可能になります。
Webデザインの現場でも、Figmaは強力な味方となります。従来のデザインツールと比べて、特に以下の点で優位性を発揮します：
例えば、Webサイトのヘッダーやフッターといった共通パーツを一度作成すれば、それを複数のページで使い回すことができます。さらに、元となるコンポーネントを編集すれば、そのパーツを使用している全てのページに変更が反映されます。
グラフィックデザインツールとしても、Figmaは十分な機能を備えています。特に基本的なバナーデザインにおいては、以下のような用途で活躍します：
高度なエフェクトや質感表現が必要な場合はPhotoshopが適していますが、基本的な平面デザインであれば、Figmaの機能で十分にカバーできます。実際、多くのクリエイターがFigmaだけでコンテンツのサムネイル制作を行っています。
Figmaは従来のプレゼンテーションツールとは一線を画す、新しいスライド作成環境を提供します：
特筆すべきは、新しく登場した「Figmaスライド」です。このサービスにより、Figmaのデザイン機能を最大限に活かしながら、プレゼンテーション特化の環境で作業することが可能になりました。
Figmaの強みの一つは、デザインとプロトタイプ作成を同一ツール内で完結できる点です：
デザインからプロトタイプまでをシームレスに作成できることで、アイデアの検証やユーザビリティテストがより効率的に行えます。
ブラウザベースのツールであることを活かし、Figmaは優れたコラボレーション機能を提供します：
チームメンバーやステークホルダーとの円滑なコミュニケーションを実現し、プロジェクトの進行を加速させます。
Figmaはデザインシステムの構築と管理において、特に優れた機能を提供します：
これらの機能により：
が実現可能となります。
デジタルデザインツールとして急速に普及しているFigma。その人気の背景には、他のデザインツールにはない独自の特長があります。従来のデザインツールが抱えていた課題を解決し、より効率的でシームレスなデザインワークフローを実現しています。今回は、Figmaの主要な4つのメリットについて、実践的な活用シーンを交えながら詳しく解説していきます。
Figmaの最大の特長は、デジタルプロダクト制作に特化した機能群です。特に、UIデザインやWebデザインにおいて、その真価を発揮します。従来のデザインツールでは、デザインとコードの間に大きなギャップが存在していましたが、Figmaはそのギャップを最小限に抑える革新的な機能を提供しています。
オートレイアウト機能
例えば、従来のデザインツールでは、デザイナーが思い描いた通りにレイアウトを組むことができても、それが実際の実装では再現が難しいということがよくありました。Figmaのオートレイアウト機能を使用すると、FlexboxやGridといったWebの標準的なレイアウトシステムに近い形でデザインを構築できます。これにより、デザインの段階から実装の制約を考慮することができ、後々の手戻りを防ぐことができます。
これらの機能を活用することで、例えばブランドカラーやフォントサイズといった基本的な要素から、ボタンやフォームといった複雑なUIコンポーネントまで、一貫性を保ちながら効率的に管理することができます。特に大規模なプロジェクトやチーム開発において、この機能の価値は計り知れません。
従来のデザインツールと一線を画すFigmaの特長として、ブラウザベースの設計が挙げられます。この特徴は、特にリモートワークが一般化した現代のワークスタイルと相性が良く、場所を問わない柔軟な働き方を可能にします。
ただし、以下の点には注意が必要です：
Figmaは、チームでのデザイン制作を強力にサポートします。特に、複数のステークホルダーが関わる現代のプロダクト開発において、このコラボレーション機能は非常に重要な役割を果たします。
例えば、従来のワークフローでは、デザインの共有やフィードバックのやり取りに多くの時間と手間が必要でした。Figmaでは、デザインの作成から共有、フィードバック、修正までのサイクルを大幅に短縮することができます。また、プロジェクトの進行状況を常に全員が把握できることで、より効率的な意思決定が可能になります。
2024年現在、Figmaは機能制限付きながら、無料プランを提供しています。これは、デザインツールの導入を検討している個人やチームにとって、大きなメリットとなっています。
※具体的な制限事項や料金プランの詳細については、別途「料金プラン」の記事でご紹介いたします。
Figmaには4つの料金プランが用意されており、個人からエンタープライズまで、様々な規模や目的に応じて選択することができます。各プランの詳細を見ていきましょう。
個人やスモールチームの入門に最適な無料プランです。基本的な機能を備えており、Figmaを始めるのに十分な機能を提供しています。
主な機能：
ユースケース：
現在、有料プランにはプロフェッショナル・ビジネス・エンタープライズの3つがあります。有料プランにする特徴としてはチーム間のコラボレーション機能の解放があります。
□ 無料プラン（スターターチーム）の主な制限
□ 有料プランで解放される重要機能
デザイン面での拡張機能
開発連携の強化
プロジェクト管理の向上
Figma.comにアクセスして、新規登録からアカウントを作成しましょう。Figmaは日本語に対応しているので日本語のサイトにアクセスすると良いでしょう。
「無料で始める」のボタンからアカウント作成をはじめましょう。
登録時に入力したメールアドレスに確認のメールが届きます。メールから確認のリンクをクリックして始めましょう。
認証メールをクリックする、「表示名」の登録が始まります。Figmaで使用したいアカウント名を入力しましょう（あとから変更できます）
そのあといくつかアンケートが出てくるので回答しましょう。
そのあといくつかアンケートが出てくるので回答しましょう。プランも無料から使い始めることができます。
そのあといくつかアンケートが出てくるので回答しましょう。
プランも無料から使い始めることができます。
Figmaの登録が成功したら、Figma操作の起点になるホーム/チーム画面についての使い方を把握しておきましょう。ここではファイルを作成したり、ファイルの管理・閲覧などができます。
主に左のサイドバーの「管理：ナビ」と右側の「ファイル・作成」に分かれます。管理・ナビでは、ファイルの整理や管理をしたりすることが主になります。ファイル・作成のエリアでは現在選択しているプロジェクトなどの中にあるファイルの一覧を確認することができます。
自分のアカウント管理や設定は、アカウントをクリックして詳細を選択することで可能になります。メールアドレスの変更などの自分の情報の編集確認や、テーマの変更でダークモードに対応できたりします。
最近開いたり、作成されたファイルが一覧で閲覧できます。無料プランのように作成できるファイルに限りがある場合はほとんどの場合はこちらを見ることで、ファイルを探すことができるでしょう。
Figmaはチームごとにプランの課金が基本的には行われます（エンタープライズなどのプランを除く）。そのためチームをクリックすることで今誰がチームの編集権限を持っているかなどを確認することができます。
ファイルに対する”フォルダ”のような概念です。複数のファイルをプロジェクトに所属することで、ファイル管理を容易にすることができます。
ファイルを新規作成できる導線になります。主に以下のようなものを作成できます。基本的なデザイン作業に関しては「デザインファイル」を作成して編集することがメインになります。
メインはデザインファイルを作成を使ってデザインを作成しましょう。FigJamはオンライン上で付箋やマインドマップを使ってアイデアをブレストしたりすることに特化したツールになります。会議のメモをしたりするときにも使うことができます。
Figmaスライドは2024年からリリースした新しいツールです。Figmaの仕組みを使ってスライドを作成・管理することができます。
インポートはSketchファイルなど、他のデザインツールからFigmaに変換することができる作成方法です。
選択しているプロジェクトや、表示方法（”最新”のようなもの）のファイルの一覧が閲覧できます。こちらをクリックすることで、ファイルを開いて確認・編集することが可能です。
デザインファイル、FigJam、スライドの３種類はマウスホバーすると表示されるアイコンの違いでも確認することが可能です。
各ファイルに表示されている画像サムネイルも、ファイル内で設定することで変更することができるので管理をすることもできます。
続いて、デザインする上で最も活用するFigmaデザインファイルの基本の解説をしていきます。まずはファイルを開くと表示される各要素について認識をしておきましょう。
全てを暗記するというよりは使いながら慣れていくのがお勧めです。まずは全体像を把握して全体の機能を把握して慣れる確率を上げましょう。
それぞれ役目ごとにブロックを分けて解説をしていきます。今回以下のようにブロックを分けてみました。
1 : ナビゲーション
2 : ファイルの中身
3 : ツール
4 : プロパティ
主にデザインファイルに対しての操作をする機能や、ホーム画面に戻る導線があります。
こちらをクリックすることでデザインファイルから、ホーム画面へ戻ることができます。
スクリーンショットで「無題」と書いているところをクリックすると、ファイルのタイトルを編集することができます。
ファイルをシェアすることができます。シェアする際にリンク設定を”公開”にすることで、同じチームにいないアカウントの人でも、ファイルの閲覧・コピーなどが可能になり、コラボレーションに便利です
プロトタイプ機能のプレビューをすることができます。パソコンブラウザで自分のデザインを確認したり、スマホアプリを使うことでスマホでの表示を確認することができます。
このエリアで、編集中のファイルの中身を確認することができます。
デザインを作っているとさまざまな要素を追加していきますが、それが「レイヤー」の部分に階層で現れます。
また「ページ」を増やすことで、全く別のシートでデザインを作り始めることも可能になります。例えば、作成しているときのバージョンをページで管理したり、「ラフ」と「確定版」のように別けることも可能です。
実際にデザインを作成するときに使う道具が置かれている場所になります。例えばテキストを配置したり、複数の要素をグループにまとめたり、四角形を置いたりするツールが用意されています。またアクションでFigma内の要素を検索したりすることもできます。
また選択するとツールの中に他ツールが格納されています（スクショの黒いメニュー）。その中から他のツールを選択できます。また右側に書いてあるアルファベットはショートカット表記になっています。半角で該当するキーボードを押すことですぐにそのツールを呼び出すことができます。
Figmaを操作する上での基本ツールです。編集したい、移動したいオブジェクトの選択ができる「移動」ツールはかなり多用します。ショートカット”V”でいつでも呼び出すことができるので、覚えておくと良いでしょう。
手のひらツールはMacbookについているトラックパッドや、Spaceキーを押しながらクリック移動でも代替利用することができます。
「拡大縮小機能」も画像の拡大などで覚えておくと便利です。同じ比率で指定した倍率に拡大・縮小をしてくれるツールです。
フレームツールは他のデザインツールでいうところのグループに近い機能です。Figmaでは基本的にFrame/フレームの箱を使ってキャンバス、デザインする範囲、を指定したり、複数の要素を1つの箱としてまとめたりします。
セクションツールはデザインファイル上の要素を整理する際に便利な機能です。デザインに干渉しないグループを呼び出すことができ、整理することが容易になるツールです。慣れてきた初心者はぜひ覚えておくと、ファイル整理の速度を劇的に上げることができるでしょう。
Figmaのセクションツールに関して詳しくはこちらの動画でも解説しています。
長方形や直線などの図形を呼び出すことができます。UI作成上は慣れてくるFrameフレームツールを使って線を引いたり、四角を作ったりすることが多いためあまり使わないかもしれませんが、グラフィカルな要素を作るときに使うツールになるので覚えておきましょう。
画像や動画の貼り付けも可能ですが、画像や動画ファイルをFigmaにそのままドラッグ＆ドロップすることでも貼り付けすることはできます。
イラストレーターで使えるようなベクターでパスを編集できるペンツールです。Figma自体がベクターファイルに対応しているため、簡単なパス作業でのグラフィック作成はFigmaでも可能です。
鉛筆ツールはドラッグすることで線を引けるツールです。会議中に場所を示すなどで使うと便利です。
Figmaのファイル上にコメントを残すことができる機能です。自分用のメモを書いたり、他の人に伝えるメモを書いたりするときに使用することができます。
メモを残すとその残した場所に追従する形でメモが残ります。Figmaでコラボレーションするときに便利な機能です。ただ、ホバー・クリックしないと中身がわからないので多用しすぎると少し煩雑になってしまうので、使い所やチームでのルール決めなどは必要な場合があります。
文字を配置するツールです。こちらもUIデザインやWebデザイン、バナー作成している時には基本の機能になるため頻繁に使うツールになるでしょう。ショートカットは”T”を押すことでいつでも呼び出すことができます。
2024年のUI3にFigmaがアップデートされてから登場した機能です。メインではFigmaファイル上の操作を検索することができたり、プラグインやAI機能を呼び出すことができます。
操作に迷った時は検索することでツールを出してくれますし、プラグインやAI機能など、Figmaのプラスαの機能を呼び出す際に触ることになる場所です。
Figmaの右パネルは選択中のオブジェクトに沿った内容が表示され、選択中のものを編集するために必要な情報が表示されます。例えば「テキスト」をクリック選択しているときには、テキストサイズを変更するためのボックスなどが表示されます。
中身を編集したいときは左のパネルに表示される、というのを知っておくと慣れる速度が早まるでしょう。
バリアブルやスタイルという、繰り返し使用するUI要素を登録できる機能へアクセスできます。”ローカル”という表現がついていますが、これは開いているファイルだけの繰り返し設定する内容を登録できるという意味です。
有料プランにすることで、チーム内の他ファイルに使いまわせる「ライブラリ」という機能を使うことで、ローカルで登録した内容を他ファイルに使い回すことも可能です。
選択中の際は、その選択したオブジェクトを編集できる要素が表示されます。
Figmaでは選択したものをJPG/PNG/SVG/PDFに書き出すことが可能です。選択したもの状態で「エクスポート」を選択することで、書き出しサイズの倍率とファイル形式を選択して、素材として書き出すことができます。
エンジニアリングで必要な画像素材や、説明に必要なイメージはこちらから書き出しましょう。
Webの標準的なFlexboxの考え方を採用し、レスポンシブデザインを効率的に実現します。
要素間の余白や配置を自動で調整し、コンテンツ量の変更にも柔軟に対応。実装を考慮したデザインが可能です。
動画やチュートリアルの内容は、実際のURLを参照することをお勧めします。これらのリソースでは、段階的にオートレイアウトの基礎から応用まで学ぶことができます。
Figmaのプロトタイプ機能を使うことで、静的なデザインに動きや画面遷移を追加し、実際のプロダクトに近い形でデザインを確認・共有することができます。
UIやWebサイト上でのインタラクション（クリックによる画面の移動や、ボタンを押すことでの状態変化など）をFigmaで作成したデザインファイルに設定することができます。
プロトタイプ機能で設定した動きをプレビューで確認することができます。
□ デスクトップでの確認
□ スマートフォンでの確認
プレビューを他のユーザーでも確認するためにリンクでシェアすることが可能です。
Figmaはブラウザベースのツールであり、これにより驚くほど簡単にデザインの共有が可能です。
誰でもシェアされたデザインデータをがワンクリックで閲覧可能になります。またリンクの公開設定をチームのみ、または閲覧課に設定することもできるので 自分のチームにいないメンバーにもデザインデータをシェアすることが可能になります
Figmaはブラウザをベースにしているのでシェアが簡単に可能です リンクを生成することでメールやスラックなどに貼れ、 シェアは同様にプロトタイプのみのシェアも可能になっています プロトタイプが表示されるプレビューの画面でシェアを押すことによってプロトタイプのシェアをすることが可能です
Figmaはデザインファイルに直接コメントを残すことができます。
コメント機能を選択してクリックすることによって、コメントしたい箇所を選択してコメントを残すことができます。また、コメント機能は範囲をドラッグで指定することによって、一定の範囲に対してのコメントを残すことも可能になります。
コンポーネントは、デザインの再利用性と一貫性を高めるFigmaの中核機能です。ボタンやナビゲーション、カードなどのUIパーツを一元管理することで、効率的なデザイン作業と品質の維持を実現します
コンポーネントをさらに強力に活用するための機能として、バリアントが提供されています。この機能により、UIの状態管理がより直感的かつ効率的になります。
スタイル登録は、デザインの基本要素を定義・管理するための機能です。テキストスタイルやシャドウなど、細かなデザイン要素を統一的に管理することができます。
バリアブルは、Figmaでのデザインシステム構築をより強力にサポートする新機能です。デザインの基本要素をトークン化し、より体系的な管理を可能にします。
バリアブル機能の具体的な活用方法については、詳細なチュートリアルを提供しています。Variables機能の基本から応用まで、ステップバイステップで学ぶことができます。
バリアブル/Variables機能の使い方はこちらの記事で解説しています。https://www.bo-no.design/contents/figma-variables-turtorial
2024年、デザインツールの定番であるFigmaに新しいAI機能が追加されました。本記事では、実務でよく使う可能性の高いAI機能と開発者向け機能について、初心者にもわかりやすく解説していきます。
First Draft（ファーストドラフト）は、UIやウェブサイトのデザインデータをAIが自動生成してくれる新機能です。よく見かけるパターンのデザインであれば、イメージに近いものを瞬時に生成してくれます。例えば「お問い合わせフォームページ」などはすぐに近いものを出してくれるでしょう。
具体的な使用例：
※注意点：
この機能は完成品のデザインではなく、アイデアの第一段階となる「ドラフト」を生成することが目的です。
Figmaでは、AIが自動でレイヤー名を付けてくれる機能が存在します。これはかなり便利で、レイヤーの構造をAIが読み取ることで、適したレイヤー名に全て変更してくれます。
□ 使い方：
写真から特定の要素だけを抽出したい場合に便利な機能です。簡単な画像の切り抜き素材が欲しい場合はFigmaだけで完結して行うことができます。
特徴：
注意点：
。
開発者向けの特別なモードで、デザインからコーディングへの移行を支援します。開発者がデザインデータを見ることに特化したWebモードという機能もFigmaには存在します。有料プランへの加入が必要です。
Figmaは、現代のデジタルデザインワークフローを大きく変革するツールとして急速に普及しています。その特徴と機能を振り返ってみましょう。
デザインツールとしてのFigmaは、単なる作図ツールの域を超え、チーム全体のデザインワークフローを効率化するプラットフォームへと進化しています。特に2024年に追加されたAI機能により、デザイナーの作業効率は更に向上することが期待されます。
初心者の方も、基本的な機能から段階的に習得することで、効率的なデザインワークフローを構築することができます。Figmaの持つ可能性を最大限に活用し、より良いデザイン制作に取り組んでみましょう
Figmaの登録はこちらからhttps://www.figma.com/ja-jp/
BONO では未経験からでもUIUXデザイナーに転職した実績のあるオンラインコースを提供しています。
現場歴10年以上のデザイナーが考案・更新している「学習ロードマップ」のコースに沿って、3つの基礎を身につけ、デザイナーを目指すことができます。
詳しくはBONOのUIUXコース、または、BONOのサイトをご覧ください。
UIUXデザインコース
https://www.bo-no.design/rdm/roadmap-uiuxdesigner
0 Comments