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

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

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

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

Figmaとは

▲出典：Figma

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

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

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

Figmaの基本的な使い方

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

導入方法

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

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

制作画面の基本説明

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

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

フレームの設置

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

コンテンツの作成

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

プロトタイプの作成

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

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

デザインを共有する

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

Figmaの便利機能11選

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

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

▲出典：UX Collective

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

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

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

▲出典：UX Collective

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

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

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

▲出典：UX Collective

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

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

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

4. グリッドの整理

▲出典：UX Collective

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

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

5. 動作の複製

▲出典：UX Collective

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

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

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

▲出典：UX Collective

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

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

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

▲出典：UX Collective

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

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

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

▲出典：UX Collective

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

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

選択範囲の調整

▲出典：UX Collective

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

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

▲出典：UX Collective

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

自動組み込みの無効化

▲出典：UX Collective

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

10. プラグインで効率化

▲出典：UX Collective

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

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

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

▲出典：UX Collective

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

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

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

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

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

（執筆：Danny Sapio　翻訳：Asuka Nakajima　編集：泉　提供元：UX Collective）