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

Transcript

1. Figma レクチャー会 2025/10/06 　　　　　社内勉強会 ＼ Part2 もっと使いこなす編 ／
2. Figmaの 基本操作
3. 3 Figmaの基本操作　　　　　　　 　　　　　　 操作画面 レイヤーパネル プロパティパネル ツールバー
4. 4 Figmaの基本操作　　　　　　　 　　　　　　移動ツール 移動ツール 選択したり、拡大縮小、 移動などの操作ができる
5. 5 Figmaの基本操作　　　　　　　 　　　　フレームツール フレームツール 新規フレームや セクションが作成できる
6. 6 フレームと、セクションとは？ フレームとは デザイン要素を収める入れ物のことで キャンバスのようなもの セクションとは デザインファイルが大きくなった際に、 要素を視覚的にグループ化して情報を整理するための機能
7. 7 Figmaの基本操作　　　　　　　 　　　　シェイプツール シェイプツール 図形を直感的に 作成・編集できる
8. 8 Figmaの基本操作　　　　　　　 　　　　　　ペンツール ペンツール 自由にパスを描いて 図形を作成できる
9. 9 Figmaの基本操作　　　　　　　 　　　　　　　テキスト テキスト テキストを 追加・編集できる
10. 10 Figmaの基本操作　　　　　　　 　　　　　　　コメント コメント コメントを 追加&閲覧できる
11. 11 Figmaの基本操作　　　　　　　 　　　アクションメニュー アクション プラグインなどに アクセスできる
12. 12 Figmaの基本操作　　　　　　　 　　　　　　Dev Mode Figma Draw デザインに関する情報を参照できる 開発者向けのツール
13. 13 Figmaの基本操作　　　　　　　 　　　　　Figma Draw Figma Draw ベクター描画ツール
14. 14 Figmaの基本操作　　　　　　　 　　　　バージョン履歴 バージョン履歴 ここでチェック こちらのメニューボタンでは、他にも、 ファイル作成やインポートなどの操作ができます
15. 15 Figmaの基本操作　　　　　　　 　　　　オートレイアウト ここでチェック 指定した「フレーム」の中にある要素を、 縦または横のどちらか一方向にそろえて並 べられるようにルールを設定できる コンポーネント を選択
16. 16 オートレイアウトが適用されない時の原因 Q：オートレイアウトが適用されません • 複数のオブジェクトを選択していない • 絶対位置が有効になっている • 固定幅/固定高さになっている • インスタンスに手を加えようとしている などなど…
17. 17 Figmaの基本操作　　　　　　　 　　コンポーネントを作成 コンポーネントを作成
18. 18 Figmaの基本操作　　　　　　　 　　　　　　バリアント バリアント ＋で追加
19. 19 コンポーネント、インスタンス、バリアントとは？ コンポーネントとは デザインファイルの中で何度も使う同じ要素や少し似た要素を、便利に扱えるよ うにする仕組み インスタンスとは メインコンポーネントを元に作られるコピーのことで、元のコンポーネントを修 正するとこのコピーにも自動で反映される バリアントとは コンポーネントのバリエーションをまとめてグループ化し、管理できる機能
20. 20 はいチーズ！デザインシステム Cheese🧀とは？
21. 21 Cheese🧀とは？ Cheeseとは はいチーズ！プロダクトの「デザインシステム」 デザインシステムとは デザインシステムとは、デザインの原則やスタイル、コンポーネントなどをまと めた共通のルールブックです。 これにより、プロダクト全体の一貫性を保ちながら、デザインと開発の効率を高 めることができます。
22. お悩み解決 コーナー
23. 23 Q：スクロールが必要な長さのデザインを 作成したい時はどうしたらいいの？
24. 24 お悩み解決　　　　　　　 　　　　　　　　　スクロール① 手順1：「デザイン」から、 「プロトタイプ」へ切り替え デザインビューでは全体が見えている状 態のまま、プレビューで見ると指定のサ イズでスクロールできる 手順2：プロトタイプ の設定を表示 手順3：デバイスの サイズを設定する 手順4：デバイスの サイズを設定する 手順5：任意のサイズ を設定する設定する
25. 25 お悩み解決　　　　　　　 　　　　　　　　　スクロール② 任意のサイズに変更 して、「コンテンツ を隠す」にチェック デザインビュー上では指定のサイズになり プレビューで見るとスクロールできる
26. 26 Q：便利なショートカットが知りたい！
27. 27 お悩み解決　　　　　　　 　　　ショートカット一覧を見る① ヘルプ ↓ キーボードショートカット ヘルプのショートカットは macOS：control+shift+? Windows：control+shift+?
28. 28 お悩み解決　　　　　　　 　　　ショートカット一覧を見る②
29. 29 お悩み解決　　　　　　　 　　　ショートカット一覧を見る③
30. 30 お悩み解決　　　　　　　 　　　 ショートカット一覧を見る
31. 31 お悩み解決　　　　　　　 　　　 ショートカット一覧を見る
32. 32 お悩み解決　　　　　　　 　　　 ショートカット一覧を見る
33. 33 お悩み解決　　　　　　　 　　　 ショートカット一覧を見る
34. 34 お悩み解決　　　　　　　 　　　 ショートカット一覧を見る
35. 35 お悩み解決　　　　　　　 　　　 ショートカット一覧を見る
36. 36 Q：画面の横移動のおすすめは？
37. 37 お悩み解決　　　　　　　 　　　　　　　　画面の横移動 ここで掴んで移動 ここで移動
38. 38 Q：一部分だけを共有したいときの 方法を知りたいです
39. 39 プロトタイプに切り替え お悩み解決　　　　　　　 　　　　　　　一部分だけを共有 プロトタイプへの リンクをコピー
40. 40 お悩み解決　　　　　　　 　　　　　　　一部分だけを共有 プロトタイプ共有ならデザインデータや、プロトタイプ外は見えないようにでき るけど、ライセンスが必要になります 昔は一部のみの共有ができたっぽいのですが、今はできる方法があるのでしょう か…？有識者さん教えてください！
41. 41 Q：FigmaをHTMLにできる おすすめのプラグイン
42. TeleportHQ FigmaファイルからHTML/CSSや React、Vueなど幅広いフレームワー ク向けのコードを生成できます。 デザインの再現性は比較的高いもの の、複雑なレスポンシブ対応では追 加の調整が必要となる場合があるた め、最終的には開発者が手を加える ことを前提に活用するのがよさそう です。 42 お悩み解決　　　　　　　 　　　Figma→HTMLプラグイン インストール
43. Anima Figmaで古くから人気の高いプラグ インで、デザイン再現性が高くホ バー効果もコード化可能。 HTML/CSSやReact、Vueに対応しプ ロジェクト要件に合わせられるが、 階層構造は比較的整理されている点 は利点だが、生成コードは冗長にな りやすく最終的にリファクタリング が必要です。 43 お悩み解決　　　　　　　 　　　Figma→HTMLプラグイン インストール
44. Locofy.ai 開発者向けのコード変換ツールで、 レスポンシブ対応のWebを素早く生 成しボタンやリンクを自動で適切な HTMLタグに変換してくれる。 一方、大規模画面や複雑なレイアウ トでは崩れが生じることがあるた め、プロトタイプ用途を想定し必要 な箇所を手作業で整備することが望 ましい。 44 お悩み解決　　　　　　　 　　　Figma→HTMLプラグイン インストール
45. 45 Q：Figmaが実際の開発の中でどのように 使われているのか、 最終的にどういう状態になっているのが 望ましいのかを知りたい！
46. 46 お悩み解決　　　　　　　Figmaがどのように使われてるのか？ 有識者の皆さん教えてください〜〜！