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
ノンデザイナーズ・デザインツール
Search
unotovive
June 21, 2020
Technology
1
400
ノンデザイナーズ・デザインツール
【初参加歓迎】Webエンジニア勉強会inVR 第3回【YouTube Liveあり】
https://study-in-virtual.connpass.com/event/178491/
にて登壇
unotovive
June 21, 2020
Tweet
Share
More Decks by unotovive
See All by unotovive
Designship2022 デザインエンジニアが語る、隣接領域を学ぶということ
unotovive
2
2.8k
ゆめみのデザインエンジニア概要2022
unotovive
0
740
NIF2020 - Giral
unotovive
0
390
ふとした時に読みたくなる3冊
unotovive
0
160
【ABD】SCRUM BOOT CAMP p16-18
unotovive
0
79
Vueのテスト手法とVRTのススメ
unotovive
5
8.4k
Other Decks in Technology
See All in Technology
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
150
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.2k
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
110
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
OPENLOGI Company Profile
hr01
0
61k
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
530
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
990
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.5k
グループポリシー再確認
murachiakira
0
170
新卒エンジニア研修の試行錯誤と工夫/nikkei-tech-talk-31
nishiuma
0
200
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Producing Creativity
orderedlist
PRO
344
40k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
12
610
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Done Done
chrislema
183
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Navigating Team Friction
lara
184
15k
Transcript
ノン・デザイナーズ デザインツール 株式会社ゆめみ おとべ (@unotovive)
自己紹介します
おとべです sonotamoromoro github instagram note twitter { , , ,
, , } .com/unotovive
おとべです ・ゆめみ20卒です ・フロントエンドのはず ・そのうちデザインチーム
本題 Non Designers Design Tool
デザインツールはすごいぞ 今日は って話をします
Figma UIデザインツール
\ででん/
Figmaって何 んで結局
基本的にデザインするもの
本来の用途① ・アプリとかWebのデザイン
本来の用途② ・アプリとかWebの プロトタイピング
デザイナーさん御用達 ツール
最強便利ツールに化ける‼‼ そんなFigmaだけど、使いようによっては
画像加工・編集 最強Figma術・其の一
画像に文字を入れたり
None
線とか図形を入れたり
線とか図形を入れたり
軽いフィルターだったり
軽いフィルターだったり
めっちゃ簡単に付けれます
None
None
書き出しも超めっちゃすごい簡単
インフラ構成図とかの作成 最強Figma術・其の二
画像はDevelopers.IOの記事の物です https://dev.classmethod.jp/articles/codepipeline-approval/ こんなの
よく使うやつ 納品物 設計書 記事の挿絵
draw.io ? powerpoint ?
Figmaでも出来ます!!! \ででん/
UIキットやテンプレートが 用意されている \どや/
AWSダイアグラムテンプレート \公式だよ/
None
None
None
コピペして並べるだけ
書き出しもさっきと一緒
SVGの調整 最強Figma術・其の三
本当にあった怖い話 ~拡大できないSVGの謎~
None
どこにでもある ログアウトできそうな アイコン
縮小してみる
None
つぶれた
自作したアイコンでLINEと Vectorが混ざってる
???
None
None
SVGとして書き出したい部分 全部選んでアウトライン化 \変な図形は微調整/
登壇資料の作成 超最強Figma術・其の四
Figmaは プロトタイピングツール \そうだよ/
任意の順にページを 再生できる \そ、そうだよ/
というわけで スライドをつくって登壇も できる \!?/
Frameを並べて再生するだけ \!?!?!??/
None
いいところ ・自由度の高いデザイン ・ひな形さえ作っちゃえばスライドづくりは楽 ・雑に図で説明できる ・PDF化も3秒 ・Webで使える・作れる \敬え/
デザイン視点 実装視点 企画視点 ・サービス企画 ・仕様設計 ・コンポーネント 設計 ・API設計 ・UIデザイン ・DB設計
・ワイヤーフレーム
デザイン視点 実装視点 企画視点 ペルソナ UXDコンセプト ↓ OO分析とコンセプトマップ ↓ UI設計 ↓
コンポーネント設計 DB設計等 ↓ 実装
よくないところ ・最低限が保証されないデザイン ・アニメーションは結構無理
でも、難しいんでしょう? わあすっごい便利
超簡単です \Webで使えるよ/
ショートカットキー 6個ぐらい覚えるだけ \80個ぐらいあるけど使わん/
SPACE + ドラッグ =移動 コマンド + スクロール =拡大縮小 V =
選択 T = テキストボックス R = しかく O = まる L = 線 あああ
でも、お高いんでしょう? わあすっごい便利
基本ただです \どんだけ作っても/
バージョニングとかできる プレミアムプラン? \どっから入るのかも分からん/
まとめ Figma術マスターになったので
Figmaは神
スライド公開しているので鉞でも質問でもあれば@unotoviveまで ご清聴ありがとうございました