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
760
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
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
600
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
750
DuckDB MCPサーバーを使ってAWSコストを分析させてみた / AWS cost analysis with DuckDB MCP server
masahirokawahara
0
1.3k
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
180
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
100
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
150
4/17/25 - CIJUG - Java Meets AI: Build LLM-Powered Apps with LangChain4j (part 2)
edeandrea
PRO
0
120
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
200
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
320
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
270
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
7
3.5k
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
460
Featured
See All Featured
The Language of Interfaces
destraynor
157
25k
Optimizing for Happiness
mojombo
377
70k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
RailsConf 2023
tenderlove
30
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Faster Mobile Websites
deanohume
306
31k
Building Adaptive Systems
keathley
41
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
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まで ご清聴ありがとうございました