「専門スキルを伸ばす VS 幅広い領域に挑戦する」フリーランスの生存戦略討論
- スキル
- フリーランス/個人事業主
- 座談会
SketchやAdobe XDと並ぶ人気のUIデザインツール『Figma』。
Figmaには多数の革新的な機能が搭載されていますが、そうした機能や使い方に気づかないままFigmaを使っている方もいるはず。
そこで今回は、基本的な説明から、「もっと早く知っておきたかった!」と思うような便利すぎる機能&使い方までご紹介します。
Figmaは、ブラウザ上で利用できるデザインツールです。数あるデザインツールのなかでも、アプリやWebに特化したものとして、多くのデザイナーや企業が使用しています。
Figmaの大きな特徴は、その「共有しやすさ」。クラウド上にデータを作成するため、複数人で同時編集が可能です。また、特別なツール・アプリを導入する必要がなくブラウザ上で動作するため、クライアントへの共有もURLを送るだけで完了します。
多機能性に加え、こういった優れた共有機能が評判を呼び、いまもっとも注目されているデザインツールとなりました。
便利機能の前に、まずFigmaの基本的な使い方を解説します。はじめてFigmaを使う人はこちらで操作をご確認ください。
Figmaにはブラウザ版とアプリ版がありますが、どちらも公式サイト上でのアカウント登録が必要です。公式サイトはすべて英語ですが、名前と職業などを記載するだけなので3分もあれば登録できます。
アプリをダウンロードするには、登録後に開かれるホーム画面の右上のアイコンをクリック。開かれたメニューにある「Get Desktop App」から行います。
登録が完了したら、Figmaを実際に使ってみましょう。ホーム画面左にある「Drafts」をクリックすると、新規ファイルを作成できます。
ファイル内は、グレーの部分が作業スペース。画面トップにあるのがツールバーです。ツールバーのなかで、よく使うものをご紹介します。アルファベットは、各機能のショートカットキーです。
次に作業スペース(フレーム)を作成します。ファイル画面上でキーボードの「A」(フレームツール)または「F」を入力し、右側に開かれるメニューから適当なものを選定するとサイズが適正化されたフレームが表示されます。
フレームのなかで、デザイン作業を行います。「R」(長方形ツール)を入力し、デザイン要素を配置。右側のメニューから色や線を選べます。文字は、「T」(テキストツール)で入力します。
各フレームのデザインが出来上がったら、それぞれをつなげてプロトタイプ化します。プロトタイプは、右上のタブ「Prototype」を選択。その後、フレームに表示される「+」を遷移先の画面にドラック&ドロップすることで、フレームがつながります。
こうしてフレームをつなげたあと、右上にある「▷」をクリックすることで実際の動きを確認できます。
作成したデザインは、画像データかリンクで共有できます。画像データで共有する際は、該当のフレームを選択し、右側のメニューから「Export」をクリックします。デザインページをリンクで共有する場合は、画面右上にある青い「Share」をクリック。共有したい相手のメールアドレスを入力するか、リンクをコピーするかして共有を行います。
次に、意外と知られていないFigmaの便利機能を11個紹介します。
たまたまドラッグしてこの機能を発見した、という人もいるのでは?
この機能を使えば、直感的にシンプルで美しいプログレスリングを簡単に作れます。
スケールツールを使えば、デザインを歪ませずに拡大縮小できます。
デザインを選択した状態で、キーボードの「K」を押したままドラッグましょう。
「スペースキー」を押しながらフレームの外にオブジェクトをドラッグすると、コンテナの中にオブジェクトが残ります。
また、オブジェクトを含むフレームの「Clip Content」をオフにすると、コンテナの外にあってもオブジェクトを確認できます。
「Command(Control)+ Y」でアウトラインを表示できます。
複数のオブジェクトを選択して配列したあと、隅にあるグリッドアイコンをクリックすると、配置を整理できます。オブジェクトの間隔を一定にしたいときに試してみましょう。
オブジェクトはドラッグして再配置したり、間隔を調整したりすることも可能です。
要素を複製したいときに使えるのが、「Command + D」です。
オブジェクトやフレームなど、あらゆるものを複製してくれます。
スポイトツール(i)を使用する際、タップではなく長押ししてみましょう。
さまざまな色をプレビューできます。
「Command + / 」と入力すれば、ワークフローを効率化する、便利なクイックアクションを確認できます。ぜひメニューの内容を確認してみてください。
なかでも便利なのが、すべてのオブジェクトのロックを解除する機能です。
「Command + Shift + K」で、図形やフレームの塗りつぶしを画像に置き換えられます。
選択範囲をドラッグする際、「スペースキー」を押したままにすると、ポインターの選択サイズが要素に合わせて自動で調整されます。
「スペースキー」を押したままにすることで、図形のサイズと配置を同時に調整できます。
「スペースキー」を押したままにすることで、Figmaが自動的にフレームやオートレイアウトの中にオブジェクトを組み込むのを無効にできます。
Figmaには、多数の便利なプラグインが用意されています。なかでもオススメなのが『Content Reel』。
Content Reelを使用することで、アバター、ダミーテキスト、名前、住所などをワンクリックでデザインに挿入できます。
行の高さに自動で調整したい場合、該当のフィールドに「auto」と入力するか、数字を消してエンターキーを押しましょう。
一瞬でほどよく設定されます。
たとえ使い慣れているツールでも、多くの場合は使い方を完璧に把握しているわけではありません。
ぜひ今回ご紹介した機能やショートカットを使って、Figmaの作業を効率化してみてください。
(執筆:Danny Sapio 翻訳:Asuka Nakajima 編集:泉 提供元:UX Collective)
Figmaのホワイトボードツール『FigJam』。使い方や魅力を紹介します
Workship MAGAZINE