Figmaの使い方

このWikiHowでは、クラウドベースの強力なユーザー・インターフェース・デザインとプロトタイピング・ツールであるFigmaを使い始める方法をご紹介します。Figmaは、アプリ、ワイヤーフレーム、ウェブサイト、バナーなどのデザインに最適です。このチュートリアルでは、Figma プロジェクトを開始する方法、ゼロからデザインを構築する方法、テキストや画像を追加する方法、そしてコードを 1 行も書かずにプロトタイプをテストする方法について説明します。

方法1

プロジェクトとデザインの作成

1. ウェブ・ブラウザで開きます。Figmaは、Chrome、Safari、Edgeなどのウェブ・ブラウザで使用するように設計されています。データはクラウドに保存されるため、Figmaにログインすれば、いつでもどこでもデザインを利用できます。

   • WindowsまたはmacOS用のデスクトップ・アプリをダウンロードしたい場合は、.NETから入手できます。
2. ログインするか、アカウントを作成します。右上のログインボタンをクリックすると、GoogleアカウントまたはメールアドレスでFigmaアカウントにログインできます。ログインすると、ファイルブラウザが表示されます。

   • まだFigmaにサインアップしていない場合は、右上のサインアップをクリックして、無料アカウントを作成してください。
3. チームを作成または選択します。Figmaを他の人と一緒に使いたいのに、まだ参加するチームがない場合は、簡単にチームを作ることができます。ファイルブラウザの左側にある「新しいチームを作成」をクリックし、名前を入力してから「チームを作成」をクリックするだけです。すでにチームがある場合は、左側のパネルでチーム名をクリックすると、そのチームのファイルブラウザが開きます。

   • チームを作成すると、一緒にプロジェクトに取り組む他の共同作業者を招待するよう求められます。
   • Figmaの無料スターター・バージョンをお持ちの場合、1つのプロジェクトを作成し、1つのプロジェクトにつき最大3つのインターフェイス・デザインを作成できます。 Figma Proを使用すると、各チームに無制限のプロジェクトを作成し、各プロジェクトに無制限のデザインを作成できます。
4. 新規プロジェクトの作成新規プロジェクトを開始するには、チームのファイル・ブラウザーの右上にある新規プロジェクトをクリックし、プロジェクト名を入力します。チーム内でプロジェクトのファイルを表示および編集できる人を選択し、[プロジェクトを作成] をクリックします。

   • チームに属するすべてのプロジェクトが、左パネルのチーム名の下に表示されます。
   • また、左パネルのプロジェクト名をクリックして、既存のプロジェクトを選択して作業することもできます。
5. デザインファイルをプロジェクトに追加します。デザインは、アプリやウェブサイトなど、作業中のデザインを含むファイルです。デザインファイルをプロジェクトに追加するには、右上の+新規をクリックし、デザインファイルを選択します。
6. デザインにわかりやすい名前を付けます。ファイル名はデフォルトで「Untitled」になります。名前を変更するには、上部のUntitledをクリックし、新しい名前を入力し、EnterまたはReturnキーを押します。

   • 将来このデザインで作業したい場合は、ファイルブラウザでチームを選択し、プロジェクト名をクリックしてから、デザイン名をクリックすることで作業できます。
   • Figmaの左上にある "F "メニューをクリックし、"Back to files "を選択すれば、いつでもファイル・ブラウザに戻ることができます。
7. Figmaのコミュニティ・テンプレート新しいデザイン・ファイルの作成方法がわかったので、ワイヤーフレーム、プロトタイプ、またはデザインに取り掛かることができます。しかし、作業を始める前に、Figma のコミュニティ・テンプレートをチェックしてください。ワイヤーフレーム・キット、レスポンシブ・レイアウト、モバイル・アプリのデザインなど、出発点として使えるものが見つかるかもしれません。ファイル・ブラウザーの左側にある「コミュニティ」のリンクをクリックするだけです。

   • 使いたいテンプレートが見つかったら、右上の「複製」をクリックして、Figmaプロジェクト内にコピーを開きます。次に、デザイン名の横にあるドロップダウンメニューをクリックし、名前を変更するを選択して、新しい名前を付けます。

方法2

フレームの追加と修正

1. Frames ツールをクリックします。Framesメニューはハッシュタグのように見え、Figmaの左上にあります。フレームは、キャンバス上のデザインの入れ物です。 デザインは常にフレームに配置する必要があり、フレームは他のフレームの中に入れ子にすることができます。

   • キーボードの F を押しても、Frames メニューを開くことができます。
2. デザインパネルからフレームサイズを選択します。デザイン・パネルは、Figma の右側にあるパネルです。Figmaには、さまざまな画面サイズ、オペレーティング・システム、ソーシャルメディアへの投稿、さらには印刷デザインに対応したサイズのフレームがあらかじめ用意されています。フレーム・サイズをクリックすると、キャンバス上にフレームが表示されます。

   • また、好きな場所でマウスをクリックしてドラッグすれば、自分でフレームを描くこともできます。
   • 画像などの既存のオブジェクトの周りにフレームを作成するには、Option + Command + G（Mac）またはCtrl + Alt + G（Windows）を押します。
3. フレームのプロパティを編集します。フレームを選択すると、右側のデザインパネルに、塗りつぶし（色で塗りつぶす）、ストローク（任意の幅、色、スタイルの線で囲む）、効果（影やぼかしなどの効果を加える）など、フレームに割り当てることができるプロパティが表示されます。

   • フレームのプリセットサイズを変更するには、現在のサイズをクリックし、他のサイズを選択します。
   • フレームのサイズを変更するには、フレームをクリックし、その角をドラッグして希望のサイズにします。または、デザインパネルの "W "と "H "エリアに手動で新しいサイズを入力することもできます。
4. フレームの中に別のフレームを配置する（オプション）。フレームを他のフレームの中に入れ子にして、整理整頓することができます。別のフレームを作成するには、キーボードのFを押し、既存のフレームの中に希望のサイズのフレームを描きます。

   • 一番大きなフレームはトップレベルフレームと呼ばれ、トップレベルフレームの中にあるフレームはネストフレームと呼ばれます。
   • 後でフレームに配置するオブジェクト（テキストや画像など）は子オブジェクトと呼ばれます。
5. 他の画面やページのために、ネストしていないフレームを追加します。画面またはページを複数作成する場合は、それらの画面ごとにトップレベルフレームを追加します。 キーボードのFまたはAをもう一度押して、次のフレーム・サイズを選択するだけで、新しいフレームが既存のフレームの右側に表示されます。

   • フレームの中に配置する子オブジェクトに合わせて、フレーム自体のサイズを自動的に縮小または拡大させたい場合は、フレームをクリックして選択し、デザインパネルの "フレーム "セクションにある4つの矢印のアイコンをクリックします。
6. レイヤーパネルでフレームを識別する。フレームを作成すると（またはテキスト、画像、その他のオブジェクトを含むその他の要素をデザインに追加すると）、レイヤーパネルにレイヤーが追加されます。整理整頓のため、レイヤーには必ず分かりやすい名前を付けてください。

   • すべてのレイヤーを表示するには、左のツールバーの一番上にある「レイヤー」をクリックします。
   • すべてのトップレベルのフレームは、レイヤーパネル上でハッシュタグシンボルが先頭に付きます。
   • 入れ子になったフレームには、等号記号が先頭に付きます。
   • レイヤーパネル上の任意のフレームをダブルクリックして、その名前を編集可能にします。
   • 新しい名前を入力し、Enter または Return キーを押します。
7. フレームを移動するFigma のフレームやその他のオブジェクトを移動する必要がある場合は、フレームをクリックし、キーボードの V キーを押して移動ツールを起動します。その後、マウスをクリックしてドラッグすると、フレームを好きな位置に移動させることができます。

方法 3

画像、オブジェクト、テキストの挿入

1. コンピュータからデザインに画像をドラッグします。これが、Figma でデザインに画像を追加する最も簡単な方法です。画像を追加するには、他にもいくつかの方法があります：

   • 他のアプリやファイルから画像をコピーし、Figma に貼り付けます。
   • 左上の Shapes メニュー（四角）をクリックし、Images を選択して、1つ以上の画像を選択し、Open をクリックします。
     • 複数の画像を選択した場合は、プロンプトが表示されたら、すべて配置をクリックします。それ以外の場合は、画像を挿入したい場所をクリックします。
   • Figma の別の場所から画像をコピーし、必要な場所に貼り付けます。
2. フレームやオブジェクトを画像で埋めます。フレームや図形を作成し、その背景を画像で塗りつぶしたい場合、次のようにします：

   • 左側のレイヤーパネルをクリックし、塗りつぶしたいフレームまたはシェイプを選択します。
   • 右側のデザインパネルで、現在の塗りつぶし色をクリックしてカラーホイールを開きます。
   • カラーホイールの左上にあるドロップダウンメニューをクリックし、イメージを選択します。
   • 小さいウィンドウのプレースホルダ画像にマウスを合わせ、[画像を選択]をクリックします。
   • 画像を選択し、「開く」をクリックします。
3. 画像をダブルクリックして編集します。すると、上部に「画像」と表示された別のウィンドウに編集ツールが表示されます。それでもうまくいかない場合は、まずレイヤーパネルで画像の名前をクリックしてから、画像をダブルクリックします。編集用に画像を開いた状態で、以下のいずれかの操作を行うことができます：

   • 画像の色とコントラストを変更するには、付属のスライダを使用します。
   • 画像を親フレームのサイズに合わせるには、「塗りつぶし」というドロップダウンメニューをクリックし、「フィット」に変更します。
   • 画像をトリミングしたい場合は、「塗りつぶし」というメニューをクリックし、「トリミング」を選択します。青い縁をドラッグして画像の残したい部分を囲み、EnterまたはReturnキーを押します。
   • 画像のサイズを変更するには、画像の四隅にあるバウンディングボックスのどれかを、希望のサイズになるまでドラッグします。
   • デザイン]タブの[ストローク]パネルと[効果]パネルを使用して、イメージをスタイル化します。
   • イメージを回転させるには、4つのバウンディングボックスの外側にマウスカーソルを置いて、カーブした線に変わるまでドラッグします。
4. 鉛筆ツールを使ってスケッチする。フレーム外のキャンバスも含め、デザイン上のどこでもスケッチすることができます。鉛筆ツールをアクティブにするには、キーボードでShift + Pを押し、色とストロークサイズを選択し、クリックしてドラッグして描画します。

   • ドローイングやシェイプを含むオブジェクトを追加する際は、レイヤーパネルのレイヤー名を関連性のあるものに変更することをお忘れなく。
5. 図形メニューをクリックして図形を選択し描画します。シェイプ・メニューは、Figma の左上エリアにある正方形です。長方形、直線、矢印、楕円、多角形、星形を描くことができます。図形を選択したら、マウスをクリックしてドラッグし、好きな大きさで描くことができます。

   • 図形の比率を均等にしたい場合は、Shiftキーを押しながら描画します。
   • 図形を選択し、デザインパネルのオプション（塗りつぶし（色を変える）、ストローク（線／枠で囲む）など）を使って修正します。
6. Tをクリックしてテキストを追加します。これによりテキストツールが開き、2つの異なる方法でテキストを追加できます：

   • テキストを追加すると自動的にテキストボックスが拡張される新しいテキストレイヤーを作成するには、目的の位置で1回クリックし、入力を開始します。
   • あらかじめ用意されたサイズのテキストボックスを描くには、マウスをクリックしてドラッグしてボックスを描き、その中に文字を入力します。
   • .マウスでテキストを選択し、右側のデザインパネルのテキストエリアを使用して、そのテキストとサイズを調整します。
   • デザインパネルの塗りつぶしエリアを使って、テキストの色を変更します。
7. オブジェクトを移動する。オブジェクトを移動するには、Vを押して移動ツールを起動し、オブジェクトをクリックして別の位置にドラッグします。

方法4

スタイルの作成と適用

1. テキストスタイルを作成します。テキストスタイルは、プロジェクトのさまざまな領域のテキストに特定のプロパティを設定するのに最適な方法です。 たとえば、Webサイトのすべての本文テキストのサイズ、フォントフェイス、太さを同じにしたい場合、これらのプロパティを持つ「本文」というスタイルを作成し、そのように見えるようにするテキストに「本文」スタイルを適用するだけです。テキストスタイルの作成方法は次のとおりです：

   • 再利用したいプロパティを持つテキストレイヤーを選択します。
   • 右パネルのテキストエリアの上部にある4つの点のアイコンをクリックします。
   • をクリックします。
   • スタイルに名前を付け、[スタイルを作成] をクリックします。
2. カラースタイルまたはエフェクトスタイルを作成します。カラースタイルでは、他のデザインやプロジェクトで簡単に再利用できるカラーやグラデーションを選択できます。エフェクト・スタイルも同様ですが、ドロップシャドウやぼかしなどのエフェクトのスタイルを作成できます。カラースタイルまたはエフェクトスタイルを作成するには

   • スタイルにしたいカラーまたはエフェクトを持つオブジェクトを選択します。
   • 右パネルの "塗りつぶし "または "エフェクト "の右上にある4つの点をクリックします。
   • をクリックします。
   • スタイルに名前を付け、スタイルの作成をクリックします。
3. テキスト、カラー、またはエフェクトのスタイルを適用します。カラー、テキスト、エフェクトのスタイルを作成したら、1つまたは複数のオブジェクトに適用できます。その方法は以下の通りです：

   • スタイルを適用したいレイヤーを選択します。
   • 右側のパネルで、適用したいスタイルの種類（テキスト、塗りつぶし、エフェクトなど）の右上にある4つの点をクリックします。
   • スタイルを選択します。
4. スタイルをチームライブラリに公開します。スタイルを作成しても、チームライブラリに公開しない限り、そのスタイルは作業中のファイルでのみ使用できます。無料のスターター・プランを含む、すべてのFigmaプランで、スタイルをチーム・ライブラリに公開できます。方法は以下の通りです：

   • キャンバスの何もない場所をクリックし、何も選択されていないことを確認します。
   • Figma の上部にあるファイル名の横にある下向き矢印をクリックします。
   • スタイルとコンポーネントの公開をクリックし、画面の指示に従います。

方法5

再利用可能なコンポーネントの作成

1. コンポーネントに含めたいレイヤーを選択します。例えば、シェイプとテキストを含むボタンを作成した場合、シェイプとテキストを "Button "というコンポーネントに追加し、別のフレームに簡単に追加することができます。

   • 複数のレイヤーを選択するには、Shiftキーを押しながらコンポーネント内の必要なレイヤーをクリックします。
   • チームがProまたはEnterpriseプランの場合、コンポーネントをチームライブラリに公開して、他のファイルで使用することもできます。
2. コンポーネントアイコンをクリックします。これは、Figma の中央上部にある、4 つの小さな菱形で構成された菱形です。選択したレイヤーが、レイヤーパネルの親フレームの下にある「コンポーネント 1」という 1 つのレイヤーに結合されていることがわかります。

   • コンポーネントの名前の横にある小さな矢印をクリックすると、レイヤーを個別に表示・編集できます。
   • コンポーネントの名前を変更するには、現在の名前をダブルクリックし、新しい名前を入力し、リターンキーを押します。
3. コンポーネントのインスタンスを作成します。インスタンスとは、オリジナル（メイン）コンポーネント以外のコンポーネントをデザイン内で使用することです。

   • 左のツールバーの Assets パネルをクリックします。ここにコンポーネントが表示されます。
   • コンポーネントの名前をクリックし、キャンバスの好きな場所にドラッグします。これでインスタンスが作成されます。
   • これで、メインのコンポーネントに影響を与えることなく、インスタンスを個別に編集できるようになります。
4. コンポーネントをチームライブラリに公開します（ProまたはEnterpriseのみ）。他のファイルやプロジェクトで使用するために、コンポーネントをチームで共有します：

   • キャンバスの何もない場所をクリックして、何も選択されていないことを確認します。
   • Figma 上部のファイル名の横にある下向き矢印をクリックします。
   • スタイルとコンポーネントを公開(Publish styles and components)をクリックし、画面の指示に従います。

方法 6

インタラクティブ・プロトタイプのテストと共有

1. プロトタイプタブをクリックします。このタブは、Figma の右側にあるデザイン・パネルの一番上にあります。プロトタイプは、デザインの試運転のようなもので、完成したアプリやウェブサイトをすでにコーディングしたかのように、デザインの動作を見ることができます。
2. デバイスメニューからデバイスタイプを選択します。プロトタイプパネルの一番上にあります。これで、デザインをプレビューするデバイスのタイプを選択できます。
3. プロトタイプに含める最初のフレームを選択します。これは、デザインの最初の画面を含むトップレベルのフレームでなければなりません。Layersパネルで名前をクリックすると選択できます。
4. "Flow starting point "の隣にある+をクリックします。Prototypeパネルの一番上にあります。これにより、最初のフレームの左上に青と白の矢印が表示され、デザインのフローの最初のポイントであることが示されます。

   • フレーム名を右クリックし、Remove starting point を選択すると、始点を削除できます。
5. 開始フレーム上のホットスポットを選択します。ホットスポットは、ユーザーがクリックまたはタップして次のページまたは画面に移動するエリアです。選択したホットスポットの右側に青い丸が表示されます。
6. をクリックし、次の画面またはページにドラッグします。プラス記号を表示するには、ホットスポットの右側にある円の上にマウスを置く必要があります。青い矢印が表示され、ホットスポットとリンク先が表示されます。インタラクションの詳細 "パネルも表示されます。
7. インタラクションのタイプを選択します。例えば、ユーザーが次のエリアに移動するためにホットスポットをタップする場合はOn tapを選択し、ユーザーがその場所を押し続けている間だけ次のエリアを表示する場合はWhile pressingを選択します。

   • メニューからアニメーションを選択すると、2つの画面間の遷移としてアニメーションを選択できます。
8. より多くの接続を作成します。練習として、戻るボタンを試してみましょう。これを行うには、クリックまたはタップすると元の画面にリンクする、接続の2番目の画面上のホットスポットを選択します。
9. 再生ボタンをクリックします。右上にある横向きの三角形です。選択したデバイス上にアプリやサイトのプレビューが表示されます。ホットスポットをタップまたはクリックすると、目的地に移動します。
10. プロトタイプを共有する。チームや関係者とデザインを共有するときは、右上の[プロトタイプを共有]をクリックし、受信者のメールアドレス（カンマ区切り）を入力し、[招待を送信]をクリックします。

この記事は、CC BY-NC-SAの下で公開された " How to Use Figma " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。