Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今から始めるFigma超入門
Search
448jp | OKI Yoshiya
June 08, 2022
Design
0
1.3k
今から始めるFigma超入門
2022/6/8 DIST.35 「今から始めるFigma超入門」
448jp | OKI Yoshiya
June 08, 2022
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
書く・即・DONEな仕組みをNuxtで作る
448jp
0
190
神速でワイヤーフレームを作るためのライブラリ
448jp
1
660
Figmaで神速ドキュメント作成術
448jp
3
1.4k
零細Web制作会社のリモートワーク事情
448jp
0
270
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
600
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
200
Lottieで始めるWebアニメーション入門
448jp
1
430
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.7k
Other Decks in Design
See All in Design
素晴らしき余白の世界
kasumidyaya
1
110
root Design Partnership Policy
root_recruit
0
4.1k
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
3.3k
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
760
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
530
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
230
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
25
5.8k
Happy Clients
brianwarren
92
6.4k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Docker and Python
trallard
34
2.7k
It's Worth the Effort
3n
180
27k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
We Have a Design System, Now What?
morganepeng
43
6.8k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Code Reviewing Like a Champion
maltzj
514
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Transcript
DIST.35 「今から始めるFigma超入門」 今から始める Figma超入門 合同会社世路庵 沖 良矢 | 2022.6.8 WED
目次 1 Figmaとは 2 基本的な使い方 3 補足情報
おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表
⚫ デザイナー/エンジニア ⚫ 受託制作一筋19年
None
スターバックスの窓(2019-2021)
KASHIYAMA the Smart Tailor(2017-)
Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya
DIST
相原 典佳、沖 良矢、濱野 将(著) ⚫ 2021.9.22発売 ⚫ 288ページ ⚫ 2,970円
エムディエヌコーポレーション刊 初心者からちゃんとしたプロになる Adobe XD基礎入門
1 Figmaとは What’s Figma ?
Figma is 何? ⚫ オールインワンデザインプラットフォーム (公式) ⚫ ベクター画像エディタおよびプロトタイピングツール (Wikipedia) ⚫
デザインツール (Udemy) ⚫ UI/UXデザインツール (ics.media)
オンスクリーンメディアのための 統合デザインツール ざっくり言うと……
オンスクリーンメディアの最終成果物 ⚫ ウェブサイト/アプリ ⚫ モバイル/デスクトップアプリ ⚫ デジタルサイネージ ⚫ アセット (アイコン、ソーシャルメディア用画像、バーチャル背景、ライブ配信画面)
⚫ ドキュメント (プレゼンテーションスライド、マニュアル、レポート)
統合デザインツールとしての機能 ⚫ ワイヤーフレーム ⚫ プロトタイピング ⚫ デザインカンプ (ビジュアルデザイン、スタイリング) ⚫ デザインシステム
⚫ 共有
77 % Figmaを利用しているUIデザイナー UX Toolsの調査による(2021)
特化型 共創型 コードエディタ
特化型デザインツールとの違い ⚫ ブラウザ/クラウドベースのためPC、ファイルから解放される。 ⚫ 共同編集機能で誰でもいつでもデザインできる。 ⚫ 共有機能で誰でもいつでもデザインに参加できる。 ⚫ 効率的で一貫性を保つ機能により爆速でデザインできる。 ⚫
エンジニアとの共同作業をサポートしてくれる。
実装 デザイン 設計 レスポンシブウェブデザインの登場による、 従来ワークフローの限界 デザイン時の考慮漏れで 必要なページ・パーツを追加作成! 想定よりも使いづらいので 思い切って設計変更!
Figmaを始めとする の台頭 共創型デザインツール 実装 デザイン 設計 追加や変更に強いデザインだから 仕様が変わってもへっちゃら! プロトタイプ機能で 事前に使い勝手を検証!
特化型と共創型は組み合わせて使う ウェブサイト全体(Figma) ウェブページ(Figma) ウェブページ(Figma) テキスト (Figma) 写真 (Photoshop) コンポーネント (Figma)
ロゴ (Illustrator) テキスト (Figma) コンポーネント (Figma) グラフ (Illustrator)
Figmaは••ではない ⚫ Figmaはノーコードツールではない → 最終的にウェブページにするにはコーディングが必要 ⚫ Figmaはグラフィックデザインツールではない → CMYKには対応していないので印刷物は作れない ⚫
Figmaは日本語対応ではない → 現状は英語版のみ。近い将来、日本語版をリリース予定
2 基本的な使い方 Basic usage
Figmaを始めよう 1. アカウントを作成する 2. ログインする ---- ブラウザで使うなら、以上で終わり! ---- 3. デスクトップアプリケーションをインストールする
4. Figmaへようこそ!
ワイヤーフレーム 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 シーンごとの主要機能
ワイヤーフレーム 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 シーンごとの主要機能
機能紹介デモ
Figmaにおける階層構造 Team Project File Page Frame Layer
3 補足情報 Supplemental information
料金プラン 料金(年払いの場合) ファイル数 バージョン履歴 チームライブラリー プロトタイプ共有 音声通話 ブランチ、マージ フォント共有 Starter
無料 3ファイルまで 30日間 - - - - - Professional Editor 1名につき$12/月 無制限 無制限 ◦ ◦ ◦ - - Organization Editor 1名につき$45/月 無制限 無制限 ◦ ◦ ◦ ◦ ◦
書籍『Figma for UIデザイン』 国内初のFigmaの書籍が発売! 当面は電子書籍のみ、紙の書籍は年内発売予 定とのこと。 著 者: 沢田 俊介 出版社:
翔泳社 発売日: 2022年6月10日(金) 価 格: 2,750円
ショートカット チートシート 同書の著者、沢田さんによる ショートカット一覧が無料公開 されています 。 https://twitter.com/shunwitter/status/1533285229431238656
公式コミュニティ 日本ユーザーのためのFigma公式コミュニティ 「Friends of Figma Tokyo (JP)」がDiscordで 運営されています。 情報共有や質問、作ったものの自慢など、他ユー ザーとのコミュニケーションに役立ちます。
https://discord.gg/D62JSvtDW7
まとめ Conclusion
なぜ私はFigmaを選ぶのか ⚫ オンスクリーンメディアへの最適化 ⚫ 共同編集、共有機能を始めとしたデザインのオープンソース化 ⚫ ブラウザ、クラウドベースによるプラットフォームフリー 常に作り手と向き合い続けている Figmaへの信頼
ありがとうございました 合同会社世路庵 沖 良矢 @448jp