Figmaとは？【Figmaを使ってできること】
Figmaとは？
FigmaとはDylan FieldとEvan Wallaceが共同開発したリアルタイムコラボレーションができるデザインツールです。デザインカンプ・ワイヤーフレームなどを作成するのに必要な機能が豊富に組み込まれているので使いやすく、日本でもユーザーが順調に増えているアプリケーションだと言えます。
Figmaは2012年設立。2022年3月16日には、日本法人も設立されました。米サンフランシスコ本社とロンドンに続き3拠点目とのこと。今後数カ月をめどに日本語版をリリース予定で、Figmaがさらに使いやすくなることに期待されるところです。
（※2022/7/27追記：現在、ブラウザ版Figmaは日本語対応済みです）
Figmaでできることとは？
UIデザインやワイヤーフレームを手軽に作成できる
デバイスサイズのアートワークが用意されていたり、プレゼンテーションツールを使えばサイトの実際の動きを確認できたり、画像の書き出しができたりと手軽で便利な機能が豊富。
WEB上で複数人で同時にデザインすることができる
作成者がメールで招待して、ファイルをチームで共有できるので、例えば、修正点をコメントで残したり、ファイル上にそれらのやり取りを残せて非常に便利。
無料プランがあるので気軽に使用できる
| プラン | Starter | Professional | Organization |
| 月額 | 無料 | ＄15（年払い＄12） | ＄45（年払いのみ） |
| 使用制限 | 3つのFigmaファイル 3つのFigJamファイル 無制限の個人ファイル （Drafts） 無制限の協力者 プラグイン ウィジェット テンプレート モバイルアプリ | 無制限のFigmaファイル 無制限のバージョン履歴 共有権限 共有及びプライベートプロジェクト チームライブラリ 音声会話 | Professionalのすべてに加えて… 組織全体のライブラリ 設計システム分析 分岐とマージ 一元化されたファイル管理 統一された管理と請求 プライベートプラグインとウィジェット シングル・サインオン |
| おすすめ | 個人向け | 小規模なチーム | 大規模な組織・チーム |
「Team」と「Drafts」というプロジェクトの関係性
データの関係性は大きく分けて「Team」と「Drafts」という区別されています。それぞれ特徴があるのですが、簡単に説明するなら、
「Team」は、共有用のスペース。
「Drafts」は、個人用のスペース。
と言えます。そして、
「Team」は、チームの中にプロジェクト、プロジェクトの中にファイルが入ります。
「Drafts」は、ドラフツの中にファイルが入ります。
無料で使える範囲は
「Team」・・・1つのプロジェクト（ファイルが3つまで）
「Drafts」・・・ファイル無制限
となっています。
「Team」はメンバーに対して、アクセスや編集といった権限を細かく設定できるよ。
アクセスや編集の権限をつけたいときは「Team」を使えるProfessionalプランになるかな。
無料のStarterプランは「Drafts」の中のデザインファイルの作れる数に制限がないから、個人ならで充分に使えるね。ドラフト内で作ったファイルは、必要な時にチームのプロジェクトに移動もできるので、とても便利です。
作成したデータを書き出しできる（エクスポートメニュー）
個人プランで作成したファイルでも、フレームを書き出しできるので、メールなどに添付したりすれば他の人に見せることができて便利です。
書き出したいオブジェクト（フレーム）を選択し、右プロパティのメニューの一番下にある「Export」から書き出しできます。
ファイルのサイズを指定する
「1x」の部分を以下のように変更すると、サイズを指定して書き出し可能です。
- 1x：等倍で書き出し
- 2x：2倍で書き出し（3,4などにするとその倍数のサイズで書き出します）
- 1000w：横幅を1000px固定で書き出す（縦幅は縦横比に応じて拡大・縮小。数字は1000 だけでな自由に指定可能）
- 1000h：縦幅を1000px固定で書き出す（縦幅は縦横比に応じて拡大・縮小。数字は1000 だけでなく自由に指定可能
ファイル形式を指定する
さらに「＋」ボタンを押して行を追加すると、同じオブジェクトを別の形式で同時に複数書き出すこともできます。形式には「PNG」「JPG」「SVG」「PDF」が対応しています。
複数書き出し時にはSufixを追加する
複数書き出す際は、「Sufix」に「@1x」「@2x」などのテキストを追加すると、「ファイル名@1x.png」などのように、ファイル名の後にSufixに入れた文字列を追加することができます。
書き出しボタンをクリックして書き出す
書き出しボタンはエクスポートメニューの中の下のボタン（Export○○○…と書かれたボタン）なので、それをクリックします。
保存場所を聞いてくるので、指定するとfigmaで作成したファイル名のZIPがダウンロードされます。
ZIPを展開すると、フレーム名でファイルが作られていました。
ファイルが書き出せるのでとても便利だと言えますね！
実際に使ってみたいな！
↑こちらの記事では実際の使い方をさらに詳しく紹介してます。よろしければどうぞ↑
ファイルを作成するには
今回は無料で使える「ドラフツ（下書き）」でファイルを作ります。
新規ファイル作成
ダッシュボード画面の「ドラフツ（下書き）」から新規でファイルを作成できます。
ツールバー
「F」のボタンにはいろいろな操作ができるメニューがドロップダウンで表示され、一番上の「プロジェクトに戻る」でダッシュボードに戻れます。（ファイルは自動保存されます）ちなみに、Figmaを日本語化するGoogle拡張機能を追加しているので、メニューが日本語化されてます。
2022年7月27日現在では、日本語対応されましたので、拡張機能を使わなくてもよくなりました。（2022.7.27追記）
フレームを配置する
ツールバーからフレーム（＃みたいなボタンのこと）をクリックして、右に表示される「DESIGN」のタブに、さまざまなデバイスサイズのフレームが並んでいて、ワンクリックで選ぶことができてとても便利。デバイスサイズに合わせたデザインをすぐに作り始められます！
例えば、iPhone 13のサイズのフレームを利用したい場合は、右側のメニューの「DESIGN」のタブから「iPhone 13 / 13 Pro」選ぶだけでそのサイズのアートボードが画面上に設置されます。
まとめ
Figmaには3つのプランがあって、個人で使用するには無料のプランでも十分です。今回はユーザー登録から新規ファイルを作成するところまでの最初のステップを解説しました。たくさん機能があるので、便利に使って手軽にデザインをやっていきましょう！
さらに詳しく解説したこちらの記事もぜひご覧ください！
