エンジニアのためのFigma入門

Transcript

1. 2025/08 Mikami Sosuke
2. はじめに - Figmaで手を動かしながら演習するのがおすすめ エンジニアのためのFigmaチュートリアル エンジニアのためのfigma入門
3. 目次 エンジニアのためのFigmaチュートリアル Figmaを学習する目的・Figmaの基本操作 エンジニアとして理解しておきたい機能 (バリアブル・コンポーネント・オートレイアウト) 課題 管理画面を作ろう
4. 目的 エンジニアのためのFigmaチュートリアル エンジニアなのに、なぜ、今Figmaなのか...？ デザインのインフラが整備されることによって、”デザインがフロントエンドエンジニアの仕事の一部になる” 可能性がある デザイナーの作業範囲 エンジニアの作業範囲 難しいデザイン (LPなど) デザインシステム作り 簡単なコーディング 簡単なデザイン 複雑なコーディング コーディング以外の実装 生成AIによってコーディングがやりやすくなった デザインツールが使いやすくなった
5. ロードマップ エンジニアのためのFigmaチュートリアル では、どのくらいまで、Figmaを理解しておく必要があるのか... “Figmaの機能を理解する” + “コンポーネントライブラリから簡単なデザイン作成する” レベルでOKだと思います。 (自分もこのくらい) 全く使ったことがない これから頑張ろう Figmaを閲覧して 実装に落とし込むくらい使える 出来合いのコンポーネントで デザインを作る デザインシステムを作る 複雑なLPを作る このくらいでOK
6. 基本操作 - 基本の画面 エンジニアのためのFigmaチュートリアル ②ツールバー ③左サイドバー ① 左サイドバー
7. 基本操作 - ツールバー エンジニアのためのFigmaチュートリアル よく使う そんなに使わない 1 2 3 4 5 6 7 8 ① 選択ツール 基本的には、Moveしか使わない気がする ⑤ テキストツール 文字を挿入したい時に利用する 細かい調整は、右サイドバーでする ⑥ コメントツール 作業場を汚さすにメモやコメントを残すことができる 修正依頼や、個人的なメモ残すのにおすすめ ⑦ リソース プラグインや細かい設定を呼び出すことができる ⑧ 大事なので次ページへ ② フレームとセクション Frame → 1画面・1スライド単位 Section → 複数画面単位 Slice → グループを囲って説明したい時 ③ シェイプツール ④ ペンツール 決まった図形を作る時 Rectangle, Line, Arrow, Ellipse とかは よく使う気がする 複雑な図形を作る時に利用する 基本は、③を使えばOK
8. 基本操作 - FigmaDevMode エンジニアのためのFigmaチュートリアル 余白を確認しやすい CSSなどで出力できる 編集機能がついてないので、間違って修正してしまったみたいなことがなくて
9. 基本操作 - 左サイドバー エンジニアのためのFigmaチュートリアル ページ 基本的にFileを使うことが多い レイヤー (階層で見れる) ↓要素をロック・非表示もできる ↓ダブルクリックで名前を変えられる
10. 基本操作 - 左サイドバー エンジニアのためのFigmaチュートリアル 位置を設定する 位置を設定する トリミング・コンポーネント化・マスク も割と使う 大きさを設定する opacityを設定する Fillする画像や色を設定する (重ね合わせも可能) ボーダーを設定する エフェクトを設定する Text 図形 / Image 大きさを設定する opacityを設定する 色を設定する font-** line-** テキスト系のプロパティー設定
11. 基本操作 - 課題(自己紹介カードを作ろう) エンジニアのためのFigmaチュートリアル みかみ そうすけ よろしくお願いします！ ️ 好きなもの さんぷる たろう よろしくお願いします！ ️ 好きなもの 課題 「自己紹介カードを作ろう」 下の見本を参考に自己紹介カードを作ってみましょう !! Figmaに自信のある方は、もうちょっと凝ったものを作ってもいいかもです
12. 目次 エンジニアのためのFigmaチュートリアル Figmaを学習する目的・Figmaの基本操作 エンジニアとして理解しておきたい機能 (バリアブル・コンポーネント・オートレイアウト) 課題 管理画面を作ろう
13. +a - 概要 エンジニアのためのFigmaチュートリアル エンジニア視点で、今回 +a として、以下を取り上げます。 以下は、コード生成の精度が大きく変わってくるため、理解しておくことをおすすめします！ Styles & Variables FigmaMCPのget_variablesで 簡単にconfigファイル作成 Components
 コンポーネント化でデザイン にブレがなくなる OutLayout
 FigmaMCPが相対的な配置で 出力してくれるようになる
14. +a - バリアブル + スタイル エンジニアのためのFigmaチュートリアル テキスト カラー エフェクト グリッド テキスト カラー ↓このプロジェクトでは主に Stylesを用いて、デザイントークンを管理している
15. +a - バリアブルとスタイルの違い エンジニアのためのFigmaチュートリアル Styles（スタイル）= 完成した見た目のセット 例えば： テキストスタイル: 「見出し1」として、フォント・サイズ・色・太さなどを一括で設定 カラースタイル: 「プライマリーブルー」として特定の青色を保存 エフェクトスタイル: 「ドロップシャドウ」として影の設定を保存 一度作れば、クリック一つで同じ見た目を他の要素に適用できます。 Variables（変数）= 変数の管理システム Variablesは「値を管理する仕組み」です。例えば： カラー変数: primary-color = #3B82F6 サイズ変数: base-spacing = 16px テキスト変数: app-name = "マイアプリ" →小さいFigmaや初心者には、Styleがおすすめ
16. +a - スタイルの設定方法 エンジニアのためのFigmaチュートリアル ① よしなに設定して左上をクリック Typography Color ② + をクリック ② + をクリック ③ 変数名を入力する ③ 変数名を入力する ① よしなに設定して左上をクリック
17. +a - スタイルの使い方 エンジニアのためのFigmaチュートリアル Typography Color ② “libraries” に変更して選択する ② “libraries” に変更して選択する ①当てたい要素を選択して、　 をクリック ①当てたい要素を選択して、　 をクリック
18. +a - バリアブル設定方法 エンジニアのためのFigmaチュートリアル Color ② + をクリック ③ 変数名を入力する ① よしなに設定して左上をクリック
19. +a - バリアブル使い方 エンジニアのためのFigmaチュートリアル Color ② “libraries” に変更して選択する ①当てたい要素を選択して、　 をクリック
20. +a - 課題(バリアブルとスタイルを登録しよう) エンジニアのためのFigmaチュートリアル #454BC5 を “sample-blue” をバリアブル として登録しよう ↓のようになってればOK 課題① 色の追加 ↓のようになってればOK 課題② タイポグラフィーの追加 下記の要件で、 ”sample-text” を スタイルとして登録しよう font-family: Roboto; font-weight: bold; font-size: 16px; line-height: 150%;
21. +a - コンポーネント エンジニアのためのFigmaチュートリアル ↓ちなみにこのスライドの HeaderとFooterもコンポーネント 親コンポーネントを編集すると... 子コンポーネントに反映される
22. +a - コンポーネントの作成・利用 エンジニアのためのFigmaチュートリアル 作成: 右クリック → “Create component” するだけ 利用: 親コンポーネントからコピーすればOK 親コンポーネントのマーク 子コンポーネントのマーク
23. +a - コンポーネントに変数を追加する (発展編) エンジニアのためのFigmaチュートリアル 親コンポーネントから +ボタン 押して変数を追加する + で新しいバリエーションを追加する ↓こんな感じで使えるようになる 新しいパターン (赤) を設定する
24. +a - 課題(コンポーネントを登録しよう) エンジニアのためのFigmaチュートリアル ボタンコンポーネントを作ってみよう せっかくなので、先ほど作成した sample-text も利用してみましょう。 ※この後利用するわけではいので、詳細の部分は問いません。 sample-blue のパターンを作ってみよう 先ほど作成した、sample-blue を背景色に利用してください。 課題① 課題②
25. ⁨ 要 素 を 詰 め な い と い け な い . . . + a - オ ー ト レ イ ア ウ ト エ ン ジ ニ ア の た め の F i g m a チ ュ ー ト リ ア ル オ ー ト レ イ ア ウ ト じ ゃ な くてもそ う で な くても 一 見 見 た 目 は 変 わ ら な い . . . を 削 除 し た と き に、 要 素 が い い 感 じ に 詰 ま る ( 追 加 す る 時 も か な り 楽 )
26. +a - オートレイアウト エンジニアのためのFigmaチュートリアル ① 要素をまとめて選択して　 を押す ② いい感じに余白とか空白を調整する Gapの設定 Flex系 (　 ) の場合 Paddingの設定 要素の**寄せが設定できる justify-contents, align-items あたりが設定できる モードの切り替えができる 横並び (flex-direction: row) 横並び (flex-direction: column) グリッドならび 省略
27. +a - 課題(オートレイアウト⁨を使ってみよう) エンジニアのためのFigmaチュートリアル サンプルのメニュー① サンプルのメニュー② サンプルのメニュー③ 動物のメニューのパターンを作ってみよう。 ↓実物を参考にしてOKです。 課題①
28. 目次 エンジニアのためのFigmaチュートリアル Figmaを学習する目的・Figmaの基本操作 エンジニアとして理解しておきたい機能 (バリアブル・コンポーネント・オートレイアウト) 課題 管理画面を作ろう
29. 課題 - 管理画面を作ろう エンジニアのためのFigmaチュートリアル 最終課題 「管理画面を作ってみよう」 右の画像の管理画面を作成してみましょう。 リソースについては、下の部分に添付してあるので詳しくみてみてください 【実施時のポイント】 見本 - Components & Variables に色々定義してありますが
 最初から作るでも、活用するでもOKです。 見本と100%同じにする必要はありません。
 細かい部分を調整するよりも形にすることを目指しましょう step2で学んだことをできる限り活用してください コンポーネント化 バリアブル オートレイアウト
30. 以上で終わりです 演習お疲れ様でした そして最後まで見ていただいてありがとうございました おわり