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
650
チームではじめるUIデザイン / Getting Started with Figma
Figmaハンズオン@さくらインターネット社内で使用した資料です。
kgsi
November 28, 2019
Tweet
Share
More Decks by kgsi
See All by kgsi
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3.6k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
790
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.4k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
4.9k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
3.3k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
600
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.5k
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
15k
開発環境/本番環境を分けるシンプルな方法 with Ionic
kgsi
0
900
Other Decks in Design
See All in Design
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
LayerX DesignersDeck
layerx
PRO
0
2.5k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
Museum Heist
allykae
0
120
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
280
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Producing Creativity
orderedlist
PRO
343
39k
Code Reviewing Like a Champion
maltzj
521
39k
For a Future-Friendly Web
brad_frost
176
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A Tale of Four Properties
chriscoyier
158
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Practical Orchestrator
shlominoach
186
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
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は ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき