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
チームではじめるUIデザイン / Getting Started with Figma
Search
kgsi
November 28, 2019
Design
2
710
チームではじめるUIデザイン / Getting Started with Figma
Figmaハンズオン@さくらインターネット社内で使用した資料です。
kgsi
November 28, 2019
Tweet
Share
More Decks by kgsi
See All by kgsi
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
コミュニティとおかねの話 / Community and Money
kgsi
0
150
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.8k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
860
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.5k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
5k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
4
3.4k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
620
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.7k
Other Decks in Design
See All in Design
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
160
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
490
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
130
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
120
CursorでAI活用のナレッジベースを構築する
kanzaki
0
720
decksh object reference
ajstarks
2
1.3k
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
840
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
480
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
23k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Site-Speed That Sticks
csswizardry
10
860
Embracing the Ebb and Flow
colly
88
4.8k
How GitHub (no longer) Works
holman
315
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building Adaptive Systems
keathley
43
2.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Statistics for Hackers
jakevdp
799
220k
Transcript
© kgsi / Shinichi Kogiso 1 Getting Started with Figma
チームではじめるUIデザイン さくらインターネット社内ハンズオン - 2019.11.28
© kgsi / Shinichi Kogiso 2 kgsi / Shinichi.kogiso Sakura
Internet Inc. ・Figma歴1年未満 ・Fireworks歴5年
© kgsi / Shinichi Kogiso 3 昨今のデザインツール事情
© kgsi / Shinichi Kogiso 4
© kgsi / Shinichi Kogiso 5 ・どのツールも現状ソフトウェア単体で完結しにくい ・一人で開発することを念頭に設計されている* *SketchはSketch for
Teamsで実装予定、XDはコラボレーション機能が11月のUpdateで搭載済 ・OSが限定されるアプリもある
© kgsi / Shinichi Kogiso 6 Figmaとは?
© kgsi / Shinichi Kogiso 7 Figmaとは?
© kgsi / Shinichi Kogiso 8 “Where teams Design together”
チームのためのデザインツール
© kgsi / Shinichi Kogiso 9
© kgsi / Shinichi Kogiso 10 Sketch Figma Adobe Photoshop
Adobe XD Framer 0 200 400 600 800 1000 1200 1400 1600 1800 2000 Compare Design Tools - Uxtools.co https://uxtools.co/tools/design/ Usage
© kgsi / Shinichi Kogiso 11 ・Webブラウザベース(ネイティブアプリもある) ・Win/Macで利用可能 大まかな特徴 ・ワイヤーフレーム、プロトタイピング、開発者向け機能...
外部ツールが不要 ・個人利用は基本無料でとっつきやすい* *Starter Plan https://www.figma.com/pricing/
© kgsi / Shinichi Kogiso 12 ・チーム単位でのプロジェクト管理 ・強力なチームライブラリ・コンポーネント機能 チームのための機能 ・バージョン管理
・コラボレーション機能 ・豊富で開発しやすいプラグイン
© kgsi / Shinichi Kogiso 13 便利なプラグイン ・A11y - Color
Contrast Checker https://www.figma.com/c/plugin/733159460536249875/A11y---Color-Contrast-Checker ・Chart https://www.figma.com/c/plugin/734590934750866002/Chart ・To Path https://www.figma.com/c/plugin/751576264585242935/To-Path などなど...
© kgsi / Shinichi Kogiso 14 ・チーム開発の機能が揃っているので、チーム開発が唸る Good ・Pluginが開発しやすい、エンジニアとも連携しやすい ・機能を標準網羅しているので高速に開発できる
・Webベースが故のパフォーマンス問題 Bad ・オフライン環境では使いにくい
© kgsi / Shinichi Kogiso 15 ハンズオンタイム
© kgsi / Shinichi Kogiso 16 1. 簡単な操作説明 2. コンポーネント作成
3. プロトタイプを作成 4. 開発者向け機能 5. チームでの作業(実践)
© kgsi / Shinichi Kogiso 17 質問タイム
© kgsi / Shinichi Kogiso 18 まとめ
© kgsi / Shinichi Kogiso 19 チームのためのデザインツール ・Figmaは ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき