「figma」とは？
figmaとは、Webブラウザ上で簡単にデザインを作れるデザインツールです。
デザインツールといえば、代表的なAdobe IllustratorやXDが挙げられますが、近年はfigmaを使用する場合も多くなってきているのではないでしょうか？
私自身、案件で使用することが増えてきており、使用する際に戸惑った内容やこうすると便利といった機能について、振り返りまとめていきたいと思います。
初期設定
ログイン
figmaはwebから直接ログイン・もしくはアプリのダウンロードで使用することができます。
個人的には、web版の方が定期なアップデート管理が不要なので、便利だなと感じています。
言語設定
初期では、言語が英語に設定されており、日本語への切り替えが必要となります。
切り替えも簡単で、下記の手順で切り替えが可能です。
- ログイン後、右上のアカウント画面を選択
- settingを選択
- change languageから日本語を選択
操作方法
figmaには、デザイン作成の他にもホワイトボードや設計図・遷移図用のテンプレートなども用意されており、さまざまな目的に合わせて使用することができます。
操作感覚としては、AdobeXDに近くAdobeのソフトウェアを使っていた方であれば、違和感なく操作できると思います。
また、ソフトウェア自体がとても軽く、開くまでに時間のかかるあの感じが全く無いのもとても嬉しいです…！
基本操作
操作ツールは基本的に3種類です。
- ヘッター部分がフレームやパーツの選択
- 左手のサイドバーに、検索／レイヤー管理画面／アセット管理
- 右手のサイドバーにデザインツール／プロトタイプ／インスペクト
ショートカットも充実しており、慣れてきたらキーでの操作も便利かと思います。
キーを忘れてしまっても右手下のヘルプアイコンから一覧を呼び出すことができます。
また、記事を書いてきて気がついたのですが、一度使ったことのあるショートカットは色付けされるみたいです。知らなかった…！
ちょっと楽しくなって、色々試してみたら改めて便利な機能も見つけたりしたので、みなさんも気が向いたら確認してみてください！
パーツの書き出し
パーツの書き出しは、右手のデザインツールの「エクスポート」から行うことができます。
- 書き出したい要素を選び、エクスポートプラスをクリック
- 書き出し後の拡張子を選択し、「パーツ名をエクスポート」をクリックすると実行されます。
下にあるプレビューを開くと、書き出し後のパーツを確認することもできます。
共有機能
figmaには同時編集が可能な共有機能あります。
メールアドレスで簡単に招待ができ、また「編集可」と「閲覧のみ」をユーザーごとに指定することもできるため、お客様への提出の際などにも便利です。
また、有料にはなりますが、プロフェッショナルプランに加入すれば、音声通話をしながら複数人での作業も可能となっています。
バージョン管理
figmaはデータの編集内容が自動更新されます。
自動更新、ということもありAdobeソフトにあるようなヒストリーの確認ができないのですが、ちゃんとその代替となる機能が備わっており、それが「バージョン管理機能」です。
過去の編集履歴がツリー状で確認でき、その時点に修正内容を戻すことができます。
無料版は、残念ながら保存できる期間に30日という制限があるのですが、有料版は無制限で利用が可能です。
機能の使用方法は下記のとおりです
- ファイル名横をクリックし、バージョン履歴を表示を選択
- 右手にバージョン履歴が表示されるため、任意のバージョンを選
- 右に表示される「･･･」アイコンから好きな操作を選びます。
バージョンの復元の他にも、バージョンの複製やバージョン名の変更可能です。
プラグイン
figmaにはプラグインが用意されており、より便利によりたくさんの機能を使うことが可能となっております。
プラグインはかなりの数があり、自分の目的に合ったものを探して使う形になるのですが、個人的に使っていて便利なものを３つご紹介します。
Better Font Picker
デザインを作成する際に、Googleフォントを使用されている方は多いと思います。
figmaでGoogleフォントを使用する場合は、基本的に対象のフォントをダウンロードする必要があります。
しかしながら、通常使用するフォントはすでにダウンロードされていても、ちょっとしたアクセントや印象付けに変わったフォントを使いたい、といった場合に毎回ダウンロードするのは手間がかかると感じるのではないでしょうか
「Better Font Picker」というプラグインは、Googleフォントをダウンロードの手間なく使えるといった機能です。色々なフォントを手軽に試せるので、フォントに制限がある場合などにおすすめです。
unsplash
こちらは、フリー画像を手軽にデザインにfigma内で検索して挿入することができるプラグインです。
ちょうどいい画像を別ウィンドウで検索して、ダウンロードして、またfigmaに挿入して調整する、という手間を省くことができます。
私自身、フリー画像を探す時、ついつい色々と無駄にダウンロードしてしまいがちでした…
このプラグインを使うと、操作がfigmaの中で完結するので、ダウンロードファイルを増やすことなく画像を用意することができるのも、便利だと感じています。
LilGrid
figmaでフレームをいくつか作成していると、それぞれの間隔や上下が揃っていないということがあるのではないでしょうか。
作成する時に、きちんと計算して調整すればいいだけなのですが、作業に集中しているとなかなか難しい時があると思います。
このプラグインを使用すると、指定した余白間・カラム数にワンクリックで調整してくれるという、とてもありがたい機能です。あの並べ直す作業、結構手間ですよね…。
「LilGrid」いつもありがとうございます…！
まとめ
figmaの基本機能について、簡単にまとめてみました。
実際使ってみると他にも気になる機能や新しいプラグインがあったりと色々試してみたくなります。
AdobeXDの無料アカウントがなくなった影響もあってか、最近はfigmaで作成されたデザインをいただくことも多くなってきていると感じているので、今後はよりfigmaについて勉強していきたいと思います。