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
910
Other Decks in Design
See All in Design
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
990
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.7k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
900
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
110
「デザイン」を信じるには
iflection
0
120
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
400
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
730
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
280
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
260
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
140
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Typedesign – Prime Four
hannesfritz
41
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Code Review Best Practice
trishagee
67
18k
4 Signs Your Business is Dying
shpigford
183
22k
Building Your Own Lightsaber
phodgson
104
6.2k
For a Future-Friendly Web
brad_frost
176
9.6k
Fireside Chat
paigeccino
35
3.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Become a Pro
speakerdeck
PRO
26
5.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
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は ・開発者のためのツールでもある。協力してやってきましょい ・欠点もある。銀の弾丸ではない、用途に合わせて使うべき