今から始めるFigma超入門

by 448jp | OKI Yoshiya

Slide 1

Slide 1 text

DIST.35 「今から始めるFigma超入門」今から始める Figma超入門合同会社世路庵　沖良矢　|　2022.6.8 WED

Slide 2

Slide 2 text

目次 1 Figmaとは 2 基本的な使い方 3 補足情報

Slide 3

Slide 3 text

おき沖よしや良矢 @448jp ⚫ 合同会社世路庵代表 ⚫ デザイナー／エンジニア ⚫ 受託制作一筋19年

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

スターバックスの窓（2019-2021）

Slide 6

Slide 6 text

KASHIYAMA the Smart Tailor（2017-）

Slide 7

Slide 7 text

Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya DIST

Slide 8

Slide 8 text

相原典佳、沖良矢、濱野将（著） ⚫ 2021.9.22発売 ⚫ 288ページ ⚫ 2,970円エムディエヌコーポレーション刊初心者からちゃんとしたプロになる Adobe XD基礎入門

Slide 9

Slide 9 text

1 Figmaとは What’s Figma ?

Slide 10

Slide 10 text

Figma is 何？ ⚫ オールインワンデザインプラットフォーム（公式） ⚫ ベクター画像エディタおよびプロトタイピングツール（Wikipedia） ⚫ デザインツール（Udemy） ⚫ UI/UXデザインツール（ics.media）

Slide 11

Slide 11 text

オンスクリーンメディアのための統合デザインツールざっくり言うと……

Slide 12

Slide 12 text

オンスクリーンメディアの最終成果物 ⚫ ウェブサイト／アプリ ⚫ モバイル／デスクトップアプリ ⚫ デジタルサイネージ ⚫ アセット（アイコン、ソーシャルメディア用画像、バーチャル背景、ライブ配信画面） ⚫ ドキュメント（プレゼンテーションスライド、マニュアル、レポート）

Slide 13

Slide 13 text

統合デザインツールとしての機能 ⚫ ワイヤーフレーム ⚫ プロトタイピング ⚫ デザインカンプ（ビジュアルデザイン、スタイリング） ⚫ デザインシステム ⚫ 共有

Slide 14

Slide 14 text

77 % Figmaを利用しているUIデザイナー UX Toolsの調査による（2021）

Slide 15

Slide 15 text

特化型共創型コードエディタ

Slide 16

Slide 16 text

特化型デザインツールとの違い ⚫ ブラウザ／クラウドベースのためPC、ファイルから解放される。 ⚫ 共同編集機能で誰でもいつでもデザインできる。 ⚫ 共有機能で誰でもいつでもデザインに参加できる。 ⚫ 効率的で一貫性を保つ機能により爆速でデザインできる。 ⚫ エンジニアとの共同作業をサポートしてくれる。

Slide 17

Slide 17 text

実装デザイン設計レスポンシブウェブデザインの登場による、従来ワークフローの限界デザイン時の考慮漏れで必要なページ・パーツを追加作成！想定よりも使いづらいので思い切って設計変更！

Slide 18

Slide 18 text

Figmaを始めとするの台頭共創型デザインツール実装デザイン設計追加や変更に強いデザインだから仕様が変わってもへっちゃら！プロトタイプ機能で事前に使い勝手を検証！

Slide 19

Slide 19 text

特化型と共創型は組み合わせて使うウェブサイト全体（Figma）ウェブページ（Figma）ウェブページ（Figma）テキスト（Figma）写真  （Photoshop）コンポーネント（Figma）ロゴ  （Illustrator）テキスト  （Figma）コンポーネント  （Figma）グラフ（Illustrator）

Slide 20

Slide 20 text

Figmaは●●ではない ⚫ Figmaはノーコードツールではない → 最終的にウェブページにするにはコーディングが必要 ⚫ Figmaはグラフィックデザインツールではない → CMYKには対応していないので印刷物は作れない ⚫ Figmaは日本語対応ではない → 現状は英語版のみ。近い将来、日本語版をリリース予定

Slide 21

Slide 21 text

2 基本的な使い方 Basic usage

Slide 22

Slide 22 text

Figmaを始めよう 1. アカウントを作成する 2. ログインする ---- ブラウザで使うなら、以上で終わり！ ---- 3. デスクトップアプリケーションをインストールする 4. Figmaへようこそ！

Slide 23

Slide 23 text

ワイヤーフレーム Frame, Page Vector Network Component Library Plugin Version History プロトタイプ Interactions Smart Animate Dynamic Overlay Mobile-viewing デザイン Styles Auto Layout Component Properties Variants Multiplayer Editing Figma Mirror 共有 Share Comment Conversation Inspect Export Slice Project シーンごとの主要機能

Slide 24

Slide 24 text

Slide 25

Slide 25 text

機能紹介デモ

Slide 26

Slide 26 text

Figmaにおける階層構造 Team Project File Page Frame Layer

Slide 27

Slide 27 text

3 補足情報 Supplemental information

Slide 28

Slide 28 text

料金プラン料金（年払いの場合）ファイル数バージョン履歴チームライブラリープロトタイプ共有音声通話ブランチ、マージフォント共有 Starter 無料 3ファイルまで 30日間 - - - - - Professional Editor 1名につき$12／月無制限無制限 ○ ○ ○ - - Organization Editor 1名につき$45／月無制限無制限 ○ ○ ○ ○ ○

Slide 29

Slide 29 text

書籍『Figma for UIデザイン』国内初のFigmaの書籍が発売！当面は電子書籍のみ、紙の書籍は年内発売予定とのこと。著　者：沢田俊介出版社：翔泳社発売日： 2022年6月10日（金）価　格： 2,750円

Slide 30

Slide 30 text

ショートカットチートシート同書の著者、沢田さんによるショートカット一覧が無料公開されています。 https://twitter.com/shunwitter/status/1533285229431238656

Slide 31

Slide 31 text

公式コミュニティ日本ユーザーのためのFigma公式コミュニティ「Friends of Figma Tokyo (JP)」がDiscordで運営されています。情報共有や質問、作ったものの自慢など、他ユーザーとのコミュニケーションに役立ちます。 https://discord.gg/D62JSvtDW7

Slide 32

Slide 32 text

まとめ Conclusion

Slide 33

Slide 33 text

なぜ私はFigmaを選ぶのか ⚫ オンスクリーンメディアへの最適化 ⚫ 共同編集、共有機能を始めとしたデザインのオープンソース化 ⚫ ブラウザ、クラウドベースによるプラットフォームフリー常に作り手と向き合い続けている Figmaへの信頼

Slide 34

Slide 34 text

ありがとうございました合同会社世路庵　沖良矢 @448jp