Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社社内勉強会

by ぽん

Slide 1

Slide 1 text

Figma レクチャー会 2025/10/06 　　　　　社内勉強会＼ Part2 もっと使いこなす編／

Slide 2

Slide 2 text

Figmaの基本操作

Slide 3

Slide 3 text

3 Figmaの基本操作　　　　　　　　　　　　　操作画面レイヤーパネルプロパティパネルツールバー

Slide 4

Slide 4 text

4 Figmaの基本操作　　　　　　　　　　　　　移動ツール移動ツール選択したり、拡大縮小、移動などの操作ができる

Slide 5

Slide 5 text

5 Figmaの基本操作　　　　　　　　　　　フレームツールフレームツール新規フレームやセクションが作成できる

Slide 6

Slide 6 text

6 フレームと、セクションとは？フレームとはデザイン要素を収める入れ物のことでキャンバスのようなものセクションとはデザインファイルが大きくなった際に、要素を視覚的にグループ化して情報を整理するための機能

Slide 7

Slide 7 text

7 Figmaの基本操作　　　　　　　　　　　シェイプツールシェイプツール図形を直感的に作成・編集できる

Slide 8

Slide 8 text

8 Figmaの基本操作　　　　　　　　　　　　　ペンツールペンツール自由にパスを描いて図形を作成できる

Slide 9

Slide 9 text

9 Figmaの基本操作　　　　　　　　　　　　　　テキストテキストテキストを追加・編集できる

Slide 10

Slide 10 text

10 Figmaの基本操作　　　　　　　　　　　　　　コメントコメントコメントを追加&閲覧できる

Slide 11

Slide 11 text

11 Figmaの基本操作　　　　　　　　　　アクションメニューアクションプラグインなどにアクセスできる

Slide 12

Slide 12 text

12 Figmaの基本操作　　　　　　　　　　　　　Dev Mode Figma Draw デザインに関する情報を参照できる開発者向けのツール

Slide 13

Slide 13 text

13 Figmaの基本操作　　　　　　　　　　　　Figma Draw Figma Draw ベクター描画ツール

Slide 14

Slide 14 text

14 Figmaの基本操作　　　　　　　　　　　バージョン履歴バージョン履歴ここでチェックこちらのメニューボタンでは、他にも、ファイル作成やインポートなどの操作ができます

Slide 15

Slide 15 text

15 Figmaの基本操作　　　　　　　　　　　オートレイアウトここでチェック指定した「フレーム」の中にある要素を、縦または横のどちらか一方向にそろえて並べられるようにルールを設定できるコンポーネントを選択

Slide 16

Slide 16 text

16 オートレイアウトが適用されない時の原因 Q：オートレイアウトが適用されません ● 複数のオブジェクトを選択していない ● 絶対位置が有効になっている ● 固定幅/固定高さになっている ● インスタンスに手を加えようとしているなどなど…

Slide 17

Slide 17 text

17 Figmaの基本操作　　　　　　　　　コンポーネントを作成コンポーネントを作成

Slide 18

Slide 18 text

18 Figmaの基本操作　　　　　　　　　　　　　バリアントバリアント＋で追加

Slide 19

Slide 19 text

19 コンポーネント、インスタンス、バリアントとは？コンポーネントとはデザインファイルの中で何度も使う同じ要素や少し似た要素を、便利に扱えるようにする仕組みインスタンスとはメインコンポーネントを元に作られるコピーのことで、元のコンポーネントを修正するとこのコピーにも自動で反映されるバリアントとはコンポーネントのバリエーションをまとめてグループ化し、管理できる機能

Slide 20

Slide 20 text

20 はいチーズ！デザインシステム Cheese🧀とは？

Slide 21

Slide 21 text

21 Cheese🧀とは？ Cheeseとははいチーズ！プロダクトの「デザインシステム」デザインシステムとはデザインシステムとは、デザインの原則やスタイル、コンポーネントなどをまとめた共通のルールブックです。これにより、プロダクト全体の一貫性を保ちながら、デザインと開発の効率を高めることができます。

Slide 22

Slide 22 text

お悩み解決コーナー

Slide 23

Slide 23 text

23 Q：スクロールが必要な長さのデザインを作成したい時はどうしたらいいの？

Slide 24

Slide 24 text

24 お悩み解決　　　　　　　　　　　　　　　　スクロール① 手順1：「デザイン」から、「プロトタイプ」へ切り替えデザインビューでは全体が見えている状態のまま、プレビューで見ると指定のサイズでスクロールできる手順2：プロトタイプの設定を表示手順3：デバイスのサイズを設定する手順4：デバイスのサイズを設定する手順5：任意のサイズを設定する設定する

Slide 25

Slide 25 text

25 お悩み解決　　　　　　　　　　　　　　　　スクロール② 任意のサイズに変更して、「コンテンツを隠す」にチェックデザインビュー上では指定のサイズになりプレビューで見るとスクロールできる

Slide 26

Slide 26 text

26 Q：便利なショートカットが知りたい！

Slide 27

Slide 27 text

27 お悩み解決　　　　　　　　　　ショートカット一覧を見る① ヘルプ ↓ キーボードショートカットヘルプのショートカットは macOS：control+shift+? Windows：control+shift+?

Slide 28

Slide 28 text

28 お悩み解決　　　　　　　　　　ショートカット一覧を見る②

Slide 29

Slide 29 text

29 お悩み解決　　　　　　　　　　ショートカット一覧を見る③

Slide 30

Slide 30 text

30 お悩み解決　　　　　　　　　　ショートカット一覧を見る

Slide 31

Slide 31 text

31 お悩み解決　　　　　　　　　　ショートカット一覧を見る

Slide 32

Slide 32 text

32 お悩み解決　　　　　　　　　　ショートカット一覧を見る

Slide 33

Slide 33 text

33 お悩み解決　　　　　　　　　　ショートカット一覧を見る

Slide 34

Slide 34 text

34 お悩み解決　　　　　　　　　　ショートカット一覧を見る

Slide 35

Slide 35 text

35 お悩み解決　　　　　　　　　　ショートカット一覧を見る

Slide 36

Slide 36 text

36 Q：画面の横移動のおすすめは？

Slide 37

Slide 37 text

37 お悩み解決　　　　　　　　　　　　　　　画面の横移動ここで掴んで移動ここで移動

Slide 38

Slide 38 text

38 Q：一部分だけを共有したいときの方法を知りたいです

Slide 39

Slide 39 text

39 プロトタイプに切り替えお悩み解決　　　　　　　　　　　　　　一部分だけを共有プロトタイプへのリンクをコピー

Slide 40

Slide 40 text

40 お悩み解決　　　　　　　　　　　　　　一部分だけを共有プロトタイプ共有ならデザインデータや、プロトタイプ外は見えないようにできるけど、ライセンスが必要になります昔は一部のみの共有ができたっぽいのですが、今はできる方法があるのでしょうか…？有識者さん教えてください！

Slide 41

Slide 41 text

41 Q：FigmaをHTMLにできるおすすめのプラグイン

Slide 42

Slide 42 text

TeleportHQ FigmaファイルからHTML/CSSや React、Vueなど幅広いフレームワーク向けのコードを生成できます。デザインの再現性は比較的高いものの、複雑なレスポンシブ対応では追加の調整が必要となる場合があるため、最終的には開発者が手を加えることを前提に活用するのがよさそうです。 42 お悩み解決　　　　　　　　　　Figma→HTMLプラグインインストール

Slide 43

Slide 43 text

Anima Figmaで古くから人気の高いプラグインで、デザイン再現性が高くホバー効果もコード化可能。 HTML/CSSやReact、Vueに対応しプロジェクト要件に合わせられるが、階層構造は比較的整理されている点は利点だが、生成コードは冗長になりやすく最終的にリファクタリングが必要です。 43 お悩み解決　　　　　　　　　　Figma→HTMLプラグインインストール

Slide 44

Slide 44 text

Locofy.ai 開発者向けのコード変換ツールで、レスポンシブ対応のWebを素早く生成しボタンやリンクを自動で適切な HTMLタグに変換してくれる。一方、大規模画面や複雑なレイアウトでは崩れが生じることがあるため、プロトタイプ用途を想定し必要な箇所を手作業で整備することが望ましい。 44 お悩み解決　　　　　　　　　　Figma→HTMLプラグインインストール

Slide 45

Slide 45 text

45 Q：Figmaが実際の開発の中でどのように使われているのか、最終的にどういう状態になっているのが望ましいのかを知りたい！

Slide 46

Slide 46 text

46 お悩み解決　　　　　　　Figmaがどのように使われてるのか？有識者の皆さん教えてください〜〜！