初めまして！10月から入社しましたUI/UXデザイナーのYOROと申します🫡！！ ぬるっと更新していきたいと思いますので、どうぞ宜しくお願いします✨
突然ですがFigma（フィグマ）というデザインツールをご存知でしょうか？
昨年世界中のデザイン関係者が回答したUX toolsのアンケート等を見ても、最もデザイナーが利用している、支持と期待されているデザインツールになります。
又2022年7月には日本語版がリリース、2022年9月にはAdobe社がFigmaを買収と注目を集めております。
そのような勢いのあるツールを最近知った私ですが、きっと私だけではないはず。（そうでアレ〜） そんな私と一緒にFigmaを知るところから自由にデザインを作成出来るようになるまで、このシリーズの投稿を続けていきたいと思います！
それでは早速「きほん・導入編」を行っていきましょう🥳
1.Figmaとは？
Figmaは、デザインプロセスの全ての人をつなぎ、チームでより良いデジタルプロダクトをより速く提供出来るようにするためにDylan FieldとEvan Wallaceが共同開発した、リアルタイムコラボレーションができるデザインツールです。
どのようにリアルタイムコラボレーションができるかというと、複数人で同時にデザインすることができることです。
Google docsやspreadsheetを思い浮かべていただくとイメージしやすいかもしれないです。
WebサイトやアプリケーションのUIデザイン、サイトマップ、ワイヤーフレーム、プレゼンテーション資料作成などデザインを作成や共同作成する際に利用します。 因みに本記事のアイキャッチ画像もFigmaを使って作成しました！使い方無限大です🚀
2.Figmaの特徴
Figmaには、様々な特徴があります。
- ✔️ 快適な共同編集
- ✔️ 無料でも利用可能
- ✔️ ブラウザだけで利用可能（macOS、WindowsOSどちらも対応）
- ✔️ バージョン管理が出来る
- ✔️ プロトタイプ作成が出来る
- ✔️ 共有のしやすさ
- ✔️ 豊富な拡張機能のプラグインやデザインリソース
快適な共同編集
複数人でリアルタイムに共同でデザインすることが出来ます。 （他デザインツールを利用していた私的に）素早さ快適さは他比べてもダントツだと思います。
無料でも利用可能
いくつか機能に制限はありますが、無料プランでも十分に利用可能です。 本当に大丈夫か心配になるくらいほぼ全ての機能を無料プランで利用できます。
ブラウザだけで利用可能（macOS、WindowsOSどちらも対応）
インストールしなくてもブラウザだけで閲覧から編集まで快適出来ます。
バージョン管理が出来る
変更内容は自動で常に保存されるので安心してデザインすることが出来ます。 また過去に戻りたい場合などもバージョン管理機能があるので簡単に戻すことが出来ます。
プロトタイプ作成が出来る
Figmaで作成したデザインからプロトタイプを作成して共有出来ます。 ドラッグやマウスオーバー、クリックなどのインタラクションを付与出来るので実際のWebサイトやアプリケーションに近いプロトタイプ作成が可能です。
共有のしやすさ
最新データをすぐに共有出来ます。ファイルだけではなく作業スペースやコメント等様々な共有リンクを発行出来ます。
豊富な拡張機能のプラグインやデザインリソース
誰でも利用出来る拡張機能やプラグイン、そしてウィジェットまで大公開されています。 大手企業様のデザインシステムやUI Kit等も公開されているので物凄く勉強になります。
....無料ですよ（やばすぎ）
3.Figmaの料金プラン
Figmaのプランは全部で4つあります。※2022年11月25日時点の内容です
とはいえど正直大型のプロジェクトでない限りは有料にしなくても大丈夫そうです。 無料プランの制限で気になるのはプロジェクトは3つまで、バージョン管理の管理期間が30日間位ですね。（十分過ぎるぞ！！素晴らしい！！）
4.Figmaを始めよう
今回は素晴らしいFigmaを始める為の導入方法を一緒に行っていきましょう！
4.1.アカウントの作成
Figmaはアカウントを作成するとすぐ使えます！早速作っていきましょう！
① Figma公式サイトにアクセスします ②「Try Figma for free」をクリックします
③ 作成したいアカウントのメールアドレスとパスワードを入力します
④ 作成したいアカウントの名前と職業を入力します（アカウントの名前は後からでも変更出来ます）
⑤ 手順3で入力したメールアドレス宛にFigmaからメールが届いているので確認し、「verify email」のボタンをクリックすると、Figmaが開きます
ここからチュートリアルになるので適宜にお願いします！ ※後からでも変更等出来るので手順7以外は基本的にスキップしております！
⑥チーム名設定「Do this later」をクリックします
⑦プラン設定「Start for free」をクリックします（無料プラン）
⑧ FigmaとFigJamどっちを作る？は「I'll get started on my own」をクリックします
⑨ 完了！
因みにデスクトップアプリでFigmaを触りたい方はこちらからダウンロードが出来ます！
4.2.言語設定を日本語に変更しよう（こちらはお好みで）
英語/日本語の切り替えが行えます！
①画面右上の自身のアカウントアイコンをクリックします ②リストの中の「Settings」をクリックします
③少しスクロールするとLanguageの項目があるのでその中の「Change language」をクリックします
これでFigmaの導入は完璧です！いつでも始めることができますね🥳
5.まとめ
- 💡 Figmaはチームで動くのに便利なデザインツール
- 💡 無料で気軽に試すことが出来る
- 💡 ブラウザだけで利用が出来る
次回「きほん・操作編」よりFigmaを使ってアイキャッチ画像の作成操作を一緒に行っていきたいと思います！
以上！ご閲覧頂きありがとうございました🙇♀️✨
