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
670
チームではじめるUIデザイン / Getting Started with Figma
Figmaハンズオン@さくらインターネット社内で使用した資料です。
kgsi
November 28, 2019
Tweet
Share
More Decks by kgsi
See All by kgsi
コミュニティとおかねの話 / Community and Money
kgsi
0
110
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.7k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
820
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.4k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
5k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
3.3k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
610
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.6k
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
15k
Other Decks in Design
See All in Design
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
180
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.3k
クライアントワークにおける UXリサーチの実践
kozotaira
0
610
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.4k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
340
NAHO SHIMONO_Portfolio2025
nahohphp
0
480
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
170
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
280
Cards | Storyboards
giofortuna_story
0
190
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
600
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
390
Starry | Storyboards | Scene 1-21
giofortuna_story
0
180
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The World Runs on Bad Software
bkeepers
PRO
68
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Statistics for Hackers
jakevdp
798
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building an army of robots
kneath
305
45k
Scaling GitHub
holman
459
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Music & Morning Musume
bryan
47
6.5k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
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は ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき