【デザインツール】Figmaとは？公式情報ではじめる使い方

最近よく耳にするデザインツール“Figma”について、

公式情報から使い方や特徴、職種を超えたコラボレーションワーク、無料・有料などの料金体系について調べました。

Figmaとは？

Dylan FieldとEvan Wallaceが、共同開発したリアルタイムコラボレーションができるデザインツール。

デザイナー版、GitHubといったところでしょうか？

Figmaの説明

• Figmaは、チームが一緒にデザインすることができます。
• デザイン、ワイヤーフレーム、プロトタイプでアイデアを実現します。
• コンテンツの作成から設計の実装まで、チームメンバーと協力します。
• 利害関係者からより良いフィードバックを得る。
• メンバー全員を同じページに集めます。

特徴

• Webベースのクラウドツールで、Mac/Windowsどちらも利用できる。
• 特別にインストールしなくても、ブラウザさえあればどこでも使える（もちろんより快適な専用クライアントアプリもあります）
• クラウド上で複数デザイナーがリアルタイムに一緒に作業でき、デザイナー以外もUIにコメントすることができる。

Figma公式情報

Figmaはどんどん機能アップデートされ、世界中のデザイナーやエンジニアによって、便利なプラグインが追加もされていくので、TwiiterやBlogをフォローし日々キャッチするのが向いています。

Figmaを学ぶには？ - Learn to use Figma:
・Getting Started: http://bit.ly/2pYDyhk
・Help Center: https://help.figma.com

Fgimaの連絡先 Keep in touch:
・Twitter: @figmadesign https://twitter.com/figmadesign
・Blog: https://blog.figma.com
・Community: https://spectrum.chat/figma
・Releases: https://releases.figma.com

デザインリソース：Find Resources:
・Plugins: https://www.figma.com/plugins
・Templates: https://www.figma.com/templates/
・Resources: https://www.figma.com/resources/
・Learn more about Figma Plans: https://www.figma.com/pricing/

Fgimaのはじめ方

Figmaの料金体系 Learn more about Figma Plans:
https://www.figma.com/pricing/

編集権（デザイン）が2人まであれば「Starterプラン」を選べば、

無料でFigmaがどんなものか機能を試してみることができます。

閲覧だけなら誰でも無料で可能です。

Starter	スターター向け
Fee	無料
for up to 2 editors and 3 projects	２人までの編集権 ３プロジェクトまで作成可能
30-day version history	30日バージョン履歴
Unlimited cloud storage	クラウドストレージ無制限
Unlimited free viewers	閲覧権人数は無制限

無料アカウントを作って試してみましょう。

動画で学ぶ、Figmaの使い方

公式Youtube動画で、実際の操作動画を見ながら基本的な使い方を学ぶことができます。

1. Set up your Account, Teams, Projects, and Files
2. The Editor Overview
3. Components (Create a Button)
4. Color Styles
5. Team Library
6. Multiplayer Collaboration, Sharing, and Commenting
7. Presentation View and Prototyping
8. Developer Handoff

他にも公式サイトに使い方がまとまっているので参考にすると便利です。

Using Figma
https://help.figma.com/hc/en-us/categories/360002042553-Using-Figma

Figmaアプリのダウンロード

ブラウザだけでも作業完結できるのですが、専用アプリを入れるとより快適です。

まとめ

デザインツールFigmaについてでした。

Figmaの特徴

・Webベースのクラウドツールなので、Mac/Windowsでも利用できる。
・特別にインストールしなくても、ブラウザさえあればどこでも使える（もちろんより快適な専用クライアントアプリもあります）
・クラウド上で複数デザイナーがリアルタイムに一緒に作業でき、デザイナー以外もUIにコメントすることができる。

複数デザイナーや、他職種とのやりとりがとても便利なので今後もご紹介していきたいと思います。