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
530
チームではじめるUIデザイン / Getting Started with Figma
Figmaハンズオン@さくらインターネット社内で使用した資料です。
kgsi
November 28, 2019
Tweet
Share
More Decks by kgsi
See All by kgsi
イベント企画設計における「フロントエンド」な考え方とその魅力
kgsi
1
3k
フロントエンドにおける生成AIの現在とこれから
kgsi
3
650
副業デザイナーズで作るデザイン組織 / 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.9k
スクラムチームにおけるプロダクトデザイナーの役割・関わり方
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
770
Other Decks in Design
See All in Design
リリース1ヶ月後で機能をなくした話
hinofu
1
700
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
ウェブディレクターを救うBacklog
wattlaa
0
290
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
330
231206_Book-launch-event_kato
hjmkth
2
1.2k
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
320
decksh object reference
ajstarks
2
920
UIをもたらすコンテクストの考察
securecat
9
2.6k
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
240
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
250
Featured
See All Featured
Done Done
chrislema
178
15k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
4 Signs Your Business is Dying
shpigford
176
21k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
9
1k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Six Lessons from altMBA
skipperchong
22
3k
It's Worth the Effort
3n
180
27k
Writing Fast Ruby
sferik
622
60k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
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は ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき