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
520
チームではじめるUIデザイン / Getting Started with Figma
Figmaハンズオン@さくらインターネット社内で使用した資料です。
kgsi
November 28, 2019
Tweet
Share
More Decks by kgsi
See All by kgsi
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
2.9k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
640
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
1.2k
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
4.5k
品質向上を目指す開発組織のデザインレビュー / SmartHR
kgsi
3
2.8k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
kgsi
1
560
TypeScriptではじめるUIデザイン / UI design with TypeScript
kgsi
2
2.2k
デザインエンジニアとフロントエンド / Bridge the gap between design and engineering
kgsi
13
14k
開発環境/本番環境を分けるシンプルな方法 with Ionic
kgsi
0
760
Other Decks in Design
See All in Design
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
Ride or Die Animatics
warwatkar
0
140
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
3
730
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
素晴らしき余白の世界
kasumidyaya
0
100
Portfolio 2023.07.28
helemarudesu
0
570
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
440
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
How GitHub (no longer) Works
holman
304
140k
Build your cross-platform service in a week with App Engine
jlugia
224
17k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
In The Pink: A Labor of Love
frogandcode
137
21k
Building Your Own Lightsaber
phodgson
97
5.7k
Bash Introduction
62gerente
604
210k
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は ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき