Figmaをフロントエンド開発で使ってみた！

本記事記載の情報は2022年9月時点の情報で、約5分で読めます♪

ハロー、エブリワン♪ アプリケーションサービス部のオオカミ🐑です。

私が所属するAS部ではバックエンド開発以外に、フロントエンドの開発も盛大に行なっております。

先日Adobeに買収とのニュースが話題になっている、みんな大好き”Figma”について執筆させていただきました📝

Webデザイナーやフロントエンドエンジニアの方々でしたらおなじみのFigmaを、弊社も今年から業務で取り入れ、現在ではFigmaなしに円滑なフロントエンド開発はできなかったと思っています。

そこで本記事では、Figmaとか何か？、便利なポイント、導入や料金までサクッと簡単に読める様にまとめました♪

---

👇本記事の内容👇

🤔Figmaとは❓

一言で言うと、デザインに特化したコラボレーションツールです。

具体的に言うと、Webデザインだけでなく、グラフィックデザインも可能なデザインツールで、複数のユーザーで、同時にリアルタイム編集やFigma上でコミュニケーションができるツールです♪

同様のデザインツールにAdobe社のAdobe XDなどが有名です。

また、今夏から一部を除いて日本語に対応したので、国内の開発で使う場合も敷居が低く、より一層国内市場でも拡大していくことと思われます！

💁Figmaで、できること🎨

※ 本項では弊社で実際に使っている機能や、筆者が認知している機能だけに絞って書いています。

もちろん、デザイン

• Webデザインの場合、図形コンポーネントを配備し、背景色やテキストを入力するだけで、簡単にCSSã‚„Swift、Androidアプリ用のコードを生成してくれます。
• フォントのインストール
  • ビルトインフォント以外に、外部からダウンロードしたフォントもインポートして使うことも可能です。
• プロトタイプの作成
  • 主要なモバイル端末（iPhoneなど）や、Macbookのスクリーン画角に合わせたフレームが予め用意されています。
  • Javascriptで実装したかのような動きのあるデザインも実現できます。顧客やフロントエンドエンジニアにとって開発のゴールイメージが掴みやすくなります。

Figma Community

• コミュニティに参加している有志のフィグマーによる、豊富なUIプラグインやプリセットを活用して無限の可能性を手に入れることができます。筆者も、有志が作ったBootstrap UIプラグインを使用しています。
  （ただし、日本語で開発されているプラグインは少なめなです！）

コメント機能

おそらく”一番”実務で多用している機能で、最も便利で有益な機能だと感じています。

• 特定のユーザー宛に＠でメンションしてコメントすることが可能で、対顧客のコミュニケーションで、仕様書には落としきれない詳細な仕様やデザインを詰めるときに特に便利だと感じました。
• 料金については後述しますが、コメントは閲覧権限（無料）ユーザーでも可能です。

ショートカットコマンド

• “command” + “/” の組み合わせでMacのSpotlightようなクイックアクションメニューが便利です。
• ヘルプ機能も豊富で、視覚的にもわかりやすくサポートしてくれます。

Share

• 共有したい相手のメールアドレスに閲覧権限を付与することで、作成したプロジェクトファイルを共有することが可能です。
• また、作成したプロトタイプやデザインをコミュニティ公開することで、パブリックに共有することも可能です。

そして、通話機能

• Figmaにログインしているプロフェッショナル・プラン以上のユーザー間で利用可能で、音声通話ができます。 常時繋いでおけば、リモート環境でも隣の席にいる同僚や顧客に声をかける感覚で会話を始められるのが便利です。文字で伝わらないところは、やはり会話した方が伝わりますね♪ 音声クオリティーも問題なしです。

FigJam（オンライホワイトボードツール）

• FigJamという無限に広がるオンラインホワイトボードツールも兼ね備えています。
• こちらも豊富なプラグインを使うことで、Kanbanやユーザーストーリーを簡単に作れます。

🧑‍🏫導入方法

導入は至って簡単で、インターネットに接続した環境であれば、ブラウザ、デスクトップアプリ、もしくはiPadやAndoroidなどのモバイル端末からアプリをインストールして使用できます。

プロジェクトオーナーとして、1人Gmailなどのお使いのメールアドレスでサインアップして、あとは、共同作業者や、プロジェクトを共有したいメンバーのメールアドレスを使用して招集するのみです。

アプリダウンロードはこちら。

💰料金体系

音声通話など一部、有料プランでしか使えない機能などありますが、ほとんどの機能が"無料"で使えますので、迅速にデザインやチーム開発を始めることができます。

料金プランは編集者のみに料金がかかる仕組みとなっており、閲覧権限のみのコラボレータには料金がかかりません。
また、閲覧権限でもコメントを残したりなど、実務で使うには十分な機能も閲覧権限で行えます。

料金プランは以下の通り、デザインツールのFigma本体とホワイトボードツールのFigJamで分かれています。

（※ ビジネスプランは、英語表記だとOrganization Planと表示されます）

Figma（デザインツール）※2022/09時点

• スタータープラン：無料
• プロフェッショナルプラン：1編集権限ユーザーに付き $15/月、年間契約だと$12/月
• ビジネスプラン：1編集権限ユーザーに付き $45/月（年間契約のみ）
• エンタープライズプラン：1編集権限ユーザーに付き $75/月（年間契約のみ）

FigJam（ホワイトボードツール）※2022/09時点

• スタータープラン：無料
• プロフェッショナルプラン：1編集権限ユーザーに付き $5/月、年間契約だと$3/月
• ビジネスプラン：1編集権限ユーザーに付き $5/月（年間契約のみ）
• エンタープライズプラン：1編集権限ユーザーに付き $5/月（年間契約のみ）

で、それぞれのプランで何が違うか？

• スタータープラン：ドラフト（下書き）は無制限、ファイル作成は３ファイル（１ファイルあたり３ページ）まで作成可能。 と、言っても１ページにあたり、26万x26万pxあるのでWebデザインするには十分すぎます・・。

• プロフェッショナルプラン：ファイル作成、ページ作成が無制限、音声通話。

• ビジネスプラン：プロフェッショナルプランに加え、Gitのようなバージョン管理機能、SSOや管理者コントロール機能の利用が可能。

• エンタープライズプラン：ビジネスプランに加え、高度なセキュリティ。Figmaに問い合わせて注文となります。

プラン選定基準

• プライベート〜小規模開発でであれば、スターター〜プロフェッショナル
• 中規模〜大規模開発であれば、プロフェッショナル〜ビジネス

• 大規模開発以上であれば、エンタープライズ

  上記判断基準で間違いないかと。

詳しい料金体系はこちら。

🤓まとめ

プライベートユース、ビジネスユース問わず、無料でほとんどの機能を使うことができるため、スモールスタートでプロジェクトを始めたり、デザイナーやフロントエンドエンジニアのアイディアを瞬時に形にし、すぐに誰とでも”Share”できるのがモダンで魅力的だと感じました。

もちろん、上記に書いたことが全てではなく、Figmaも常に進化しコミュニティも拡大して行っているため、全フィグマーが最幸なFigma体験ができるように、今後もFigmaについて何か書きますのでよろしくです🎶