Figmaの使い方&便利機能11選。今すぐ使えるショートカットを一挙紹介

10 Figma Tricks

SketchやAdobe XDと並ぶ人気のUIデザインツール『Figma』。

Figmaには多数の革新的な機能が搭載されていますが、そうした機能や使い方に気づかないままFigmaを使っている方もいるはず。

そこで今回は、基本的な説明から、「もっと早く知っておきたかった!」と思うような便利すぎる機能&使い方までご紹介します。

Figmaとは

figma 使い方

▲出典:Figma

Figmaは、ブラウザ上で利用できるデザインツールです。数あるデザインツールのなかでも、アプリやWebに特化したものとして、多くのデザイナーや企業が使用しています。

Figmaの大きな特徴は、その「共有しやすさ」。クラウド上にデータを作成するため、複数人で同時編集が可能です。また、特別なツール・アプリを導入する必要がなくブラウザ上で動作するため、クライアントへの共有もURLを送るだけで完了します。

多機能性に加え、こういった優れた共有機能が評判を呼び、いまもっとも注目されているデザインツールとなりました。

Figmaの基本的な使い方

便利機能の前に、まずFigmaの基本的な使い方を解説します。はじめてFigmaを使う人はこちらで操作をご確認ください。

導入方法

Figmaにはブラウザ版とアプリ版がありますが、どちらも公式サイト上でのアカウント登録が必要です。公式サイトはすべて英語ですが、名前と職業などを記載するだけなので3分もあれば登録できます。

アプリをダウンロードするには、登録後に開かれるホーム画面の右上のアイコンをクリック。開かれたメニューにある「Get Desktop App」から行います。

Figma 使い方

制作画面の基本説明

登録が完了したら、Figmaを実際に使ってみましょう。ホーム画面左にある「Drafts」をクリックすると、新規ファイルを作成できます。

Figma 使い方

ファイル内は、グレーの部分が作業スペース。画面トップにあるのがツールバーです。ツールバーのなかで、よく使うものをご紹介します。アルファベットは、各機能のショートカットキーです。

FIgma 使い方

フレームの設置

次に作業スペース(フレーム)を作成します。ファイル画面上でキーボードの「A」(フレームツール)または「F」を入力し、右側に開かれるメニューから適当なものを選定するとサイズが適正化されたフレームが表示されます。

Figma 使い方

コンテンツの作成

フレームのなかで、デザイン作業を行います。「R」(長方形ツール)を入力し、デザイン要素を配置。右側のメニューから色や線を選べます。文字は、「T」(テキストツール)で入力します。

Figma 使い方

プロトタイプの作成

各フレームのデザインが出来上がったら、それぞれをつなげてプロトタイプ化します。プロトタイプは、右上のタブ「Prototype」を選択。その後、フレームに表示される「+」を遷移先の画面にドラック&ドロップすることで、フレームがつながります。

Figma 使い方

こうしてフレームをつなげたあと、右上にある「▷」をクリックすることで実際の動きを確認できます。

デザインを共有する

作成したデザインは、画像データかリンクで共有できます。画像データで共有する際は、該当のフレームを選択し、右側のメニューから「Export」をクリックします。デザインページをリンクで共有する場合は、画面右上にある青い「Share」をクリック。共有したい相手のメールアドレスを入力するか、リンクをコピーするかして共有を行います。

Figmaの便利機能11選

次に、意外と知られていないFigmaの便利機能を11個紹介します。

1. プログレスリングを簡単に作成

10 Figma Tricks

▲出典:UX Collective

たまたまドラッグしてこの機能を発見した、という人もいるのでは?

この機能を使えば、直感的にシンプルで美しいプログレスリングを簡単に作れます。

2. スケールツールの裏技で歪みを回避

10 Figma Tricks

▲出典:UX Collective

スケールツールを使えば、デザインを歪ませずに拡大縮小できます。

デザインを選択した状態で、キーボードの「K」を押したままドラッグましょう。

3. オブジェクトをフレーム外にドラッグ

10 Figma Tricks

▲出典:UX Collective

「スペースキー」を押しながらフレームの外にオブジェクトをドラッグすると、コンテナの中にオブジェクトが残ります。

また、オブジェクトを含むフレームの「Clip Content」をオフにすると、コンテナの外にあってもオブジェクトを確認できます。

「Command(Control)+ Y」でアウトラインを表示できます。

4. グリッドの整理

10 Figma Tricks

▲出典:UX Collective

複数のオブジェクトを選択して配列したあと、隅にあるグリッドアイコンをクリックすると、配置を整理できます。オブジェクトの間隔を一定にしたいときに試してみましょう。

オブジェクトはドラッグして再配置したり、間隔を調整したりすることも可能です。

5. 動作の複製

10 Figma Tricks

▲出典:UX Collective

要素を複製したいときに使えるのが、「Command + D」です。

オブジェクトやフレームなど、あらゆるものを複製してくれます。

6. スポイトで色をプレビュー

10 Figma Tricks

▲出典:UX Collective

スポイトツール(i)を使用する際、タップではなく長押ししてみましょう。

さまざまな色をプレビューできます。

7. オブジェクトをまとめてロック解除

10 Figma Tricks

▲出典:UX Collective

「Command + / 」と入力すれば、ワークフローを効率化する、便利なクイックアクションを確認できます。ぜひメニューの内容を確認してみてください。

なかでも便利なのが、すべてのオブジェクトのロックを解除する機能です。

8. プレースホルーダーに画像をドロップ

10 Figma Tricks

▲出典:UX Collective

「Command + Shift + K」で、図形やフレームの塗りつぶしを画像に置き換えられます。

9. スペースキーの便利な使い方

選択範囲の調整

10 Figma Tricks

▲出典:UX Collective

選択範囲をドラッグする際、「スペースキー」を押したままにすると、ポインターの選択サイズが要素に合わせて自動で調整されます。

図形のサイズと配置を同時に調整

10 Figma Tricks

▲出典:UX Collective

「スペースキー」を押したままにすることで、図形のサイズと配置を同時に調整できます。

自動組み込みの無効化

10 Figma Tricks

▲出典:UX Collective

「スペースキー」を押したままにすることで、Figmaが自動的にフレームやオートレイアウトの中にオブジェクトを組み込むのを無効にできます。

10. プラグインで効率化

10 Figma Tricks

▲出典:UX Collective

Figmaには、多数の便利なプラグインが用意されています。なかでもオススメなのが『Content Reel』。

Content Reelを使用することで、アバター、ダミーテキスト、名前、住所などをワンクリックでデザインに挿入できます。

11. 行の高さを一瞬で固定

10 Figma Tricks

▲出典:UX Collective

行の高さに自動で調整したい場合、該当のフィールドに「auto」と入力するか、数字を消してエンターキーを押しましょう。

一瞬でほどよく設定されます。

Figmaの裏技をマスターして時短しよう!

たとえ使い慣れているツールでも、多くの場合は使い方を完璧に把握しているわけではありません。

ぜひ今回ご紹介した機能やショートカットを使って、Figmaの作業を効率化してみてください。

(執筆:Danny Sapio 翻訳:Asuka Nakajima 編集:泉 提供元:UX Collective

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週2日20万円以上のお仕事多数
Workship