【Udemyおすすめ講座】Figmaを開発者目線で使いこなす！

はじめに

Udemyおすすめ講座をシェアしよう！ by Udemy Advent Calendar 2024の19日目を担当します、@Ayako_0224と申します。
社内の業務支援ポータルの開発でFigmaを用いてデザインを作成・Web開発を行っています。
このプロジェクトでは今年度からFigmaを導入したのですが、Figmaの使用経験のあるメンバーが私しかおらず、どのように操作を覚えてもらうか考えた結果、Udemyを用いて学習を行いました。
ハンズオン形式で勉強会も開催したのでその内容も交えて講座の内容やおすすめ理由をご紹介できればと思います。

紹介する講座

デザイナー目線と、開発者目線で2つ紹介します。
どちらも丁寧に説明してくださるため、長い講座となっています。

対象視聴者

• Figmaを使ってデザインを作成したい方
• 0から丁寧に覚えたい方
• Figmaで効率的にデザイン作成・コード生成がしたい方

デザイナー目線

使いながら覚えていきたい方は以下の項目を見るだけでも最低限の知識はつけることができると思います。
コンポーネントとインスタンス、オートレイアウトは必須の概念なのできちんと理解しましょう！

初心者から始めるアプリデザイン＜UI/UXデザインをFigmaで学ぼう！＞Webデザインにも応用可能

• はじめに(14分)
• 初めてのFigma
  • アカウント作成とデスクトップ版のダウンロード(6分)
  • チーム・プロジェクト・ファイル(11分)
• Figmaの基本
  • UIが変更されます(1分)
  • イントロダクション(1分)
  • Figmaの基本操作(12分)
  • 図形をまとめる方法の違い(10分)
  • テキストを追加する(11分)
  • 塗りオプションを使う(7分)
  • よく使うスタイルを登録する(6分)
  • コンポーネントとインスタンス(9分)
  • オートレイアウト(4分)
  • オブジェクトを効率的に整列させる(5分)

開発者目線

基本的にデザインは作成しない、実装さえ楽にできればいい！という方は以下の項目だけ視聴すれば大丈夫です。
デザインシステムでデザイナーの考えていることを理解してサクッとFigmaからコードに起こしちゃいましょう。
とても細かく説明している講座なのでデザイナーの方にもおすすめできる講座です。

Figma for デザインシステム ＜UIデザイナーとして一歩先に行くためのマスター講座＞

• デザインシステムを知る
  • コース概要(2分)
  • デザインシステムとは(3分)
  • デザインシステムの構成要素(7分)
• プロフェッショナルなFigma
  • 開発モード(8分)
  • コードの自動生成とFigma for VS Code(5分)

Figmaのプランについて

以下に記載の通り、4つのプランがあります。
開発モードを使用するには有料プランを選択する必要がありますのでご注意ください。
学生・教育機関は申請を行うことでプロフェッショナルプランを無料で利用することができます。
https://www.figma.com/ja-jp/pricing/

おすすめ勉強法

講座を見るだけではなく必ずFigmaを触りながら学びましょう！
開発者目線でのFigmaを最低限触れるようにハンズオン形式での勉強会を実施しましたので概要を以下に共有します。

Figmaでコメントをする方法

コメント機能を使えば作成されたデザインに対して意見や質問があった際に簡単にコミュニケーションが取れます。

1. 中央下部にあるツールバーのコメントアイコンをクリックすることでコメントモードなります。
   
2. コメントしたいパーツをクリックすることで入力フォームが表示されコメントすることが可能です。
   

Figmaを使うことによって開発フローがどのように変わるか

Figma導入前の開発

Figmaを導入する前の本プロジェクトでは以下の手順で開発していました。
コードをいきなり書くことになるため、レビュー次第では大幅な手戻りが発生するリスクがありました。

1. Amplify UIからコンポーネントを選択
2. VS Code等のエディターで実装
3. スタイルの上書きが必要であればcssファイルを作成し上書き

Figma導入後の開発

Figma導入によってレビューによる大幅な手戻りはなくなり、コードの自動生成機能を使うことで開発工数を約20%減らすことができました。
さらにより自由でプロジェクトらしさを追求したデザイン作成も可能になりました。

1. Figmaでデザインを作成（by デザインチーム）
2. （Amplifyのコンポーネントを使用する場合は）Amplify UI + Figmaの自動生成コードをコピペ
3. 自動生成コードの調整 + styled-componentsでスタイル実装
4. Code ConnectでFigmaと連携
   

styled-componentの概要

Figma導入と同時にstyled-componentも開発に取り入れたのでその説明を実施しました。
本記事とは少しずれてしまいますので割愛しますが気になる方は以下のqiitaの記事がわかりやすいかと思います。
https://qiita.com/jungyeounjae/items/da8405bc9f95330e3936

コンポーネント分割について

デザイナーがAtomic Designという手法でコンポーネントを作成していること、そのコンポーネントをどのように実装して欲しいかを伝えました。
例：atoms/buttonで作成しているのでsrc/components/atoms配下にButton.tsxを作成

Figma to code

動画とほぼ同じ内容を説明したので割愛しましたが以下の手順で説明をしました。
ここが慣れるまでは難しい作業ですが頑張りましょう！

初期設定

1. Figmaのアクセストークンを発行する
2. VS Codeの拡張機能をインストールする

コードにFigmaを落とし込む

1. Figmaのコンポーネントからコードを自動生成する
2. 自動生成コードの調整 + styled-componentsでスタイル実装
3. Code ConnectでFigmaとコードを連携する

最後に

Figmaはとても多機能なので便利な反面概要を掴み操作を覚えるまでは難しいと思います。
ただ慣れるととても楽しいので根気強く取り組んでみてください。
それでは良きFigmaライフを！！