Tweet
Tweet

Slide 1

Slide 1 text

ノン・デザイナーズ デザインツール 株式会社ゆめみ おとべ (@unotovive)

Slide 2

Slide 2 text

自己紹介します

Slide 3

Slide 3 text

おとべです sonotamoromoro github instagram note twitter { , , , , , } .com/unotovive

Slide 4

Slide 4 text

おとべです ・ゆめみ20卒です ・フロントエンドのはず ・そのうちデザインチーム

Slide 5

Slide 5 text

本題 Non Designers Design Tool

Slide 6

Slide 6 text

デザインツールはすごいぞ 今日は って話をします

Slide 7

Slide 7 text

Figma UIデザインツール

Slide 8

Slide 8 text

＼ででん／

Slide 9

Slide 9 text

Figmaって何 んで結局

Slide 10

Slide 10 text

基本的にデザインするもの

Slide 11

Slide 11 text

本来の用途① ・アプリとかWebのデザイン

Slide 12

Slide 12 text

本来の用途② ・アプリとかWebの 　プロトタイピング

Slide 13

Slide 13 text

デザイナーさん御用達 ツール

Slide 14

Slide 14 text

最強便利ツールに化ける‼‼ そんなFigmaだけど、使いようによっては

Slide 15

Slide 15 text

画像加工・編集 最強Figma術・其の一

Slide 16

Slide 16 text

画像に文字を入れたり

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

線とか図形を入れたり

Slide 19

Slide 19 text

線とか図形を入れたり

Slide 20

Slide 20 text

軽いフィルターだったり

Slide 21

Slide 21 text

軽いフィルターだったり

Slide 22

Slide 22 text

めっちゃ簡単に付けれます

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

書き出しも超めっちゃすごい簡単

Slide 26

Slide 26 text

インフラ構成図とかの作成 最強Figma術・其の二

Slide 27

Slide 27 text

画像はDevelopers.IOの記事の物です https://dev.classmethod.jp/articles/codepipeline-approval/ こんなの

Slide 28

Slide 28 text

よく使うやつ 納品物 設計書 記事の挿絵

Slide 29

Slide 29 text

draw.io ? powerpoint ?

Slide 30

Slide 30 text

Figmaでも出来ます！！！ ＼ででん／

Slide 31

Slide 31 text

UIキットやテンプレートが 用意されている ＼どや／

Slide 32

Slide 32 text

AWSダイアグラムテンプレート ＼公式だよ／

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

コピペして並べるだけ

Slide 37

Slide 37 text

書き出しもさっきと一緒

Slide 38

Slide 38 text

SVGの調整 最強Figma術・其の三

Slide 39

Slide 39 text

本当にあった怖い話 ~拡大できないSVGの謎~

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

どこにでもある ログアウトできそうな アイコン

Slide 42

Slide 42 text

縮小してみる

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

つぶれた

Slide 45

Slide 45 text

自作したアイコンでLINEと Vectorが混ざってる

Slide 46

Slide 46 text

？？？

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

SVGとして書き出したい部分 全部選んでアウトライン化 ＼変な図形は微調整／

Slide 50

Slide 50 text

登壇資料の作成 超最強Figma術・其の四

Slide 51

Slide 51 text

Figmaは プロトタイピングツール ＼そうだよ／

Slide 52

Slide 52 text

任意の順にページを
 再生できる ＼そ、そうだよ／

Slide 53

Slide 53 text

というわけで スライドをつくって登壇も できる ＼！？／

Slide 54

Slide 54 text

Frameを並べて再生するだけ ＼！？！？！？？／

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

いいところ ・自由度の高いデザイン ・ひな形さえ作っちゃえばスライドづくりは楽 ・雑に図で説明できる ・PDF化も3秒 ・Webで使える・作れる ＼敬え／

Slide 57

Slide 57 text

デザイン視点 実装視点 企画視点 ・サービス企画 ・仕様設計 ・コンポーネント 　設計 ・API設計 ・UIデザイン ・DB設計 ・ワイヤーフレーム

Slide 58

Slide 58 text

デザイン視点 実装視点 企画視点 ペルソナ UXDコンセプト ↓ OO分析とコンセプトマップ ↓ UI設計 ↓ コンポーネント設計 DB設計等 ↓ 実装

Slide 59

Slide 59 text

よくないところ ・最低限が保証されないデザイン ・アニメーションは結構無理

Slide 60

Slide 60 text

でも、難しいんでしょう？ わあすっごい便利

Slide 61

Slide 61 text

超簡単です ＼Webで使えるよ／

Slide 62

Slide 62 text

ショートカットキー 6個ぐらい覚えるだけ ＼80個ぐらいあるけど使わん／

Slide 63

Slide 63 text

SPACE ＋ ドラッグ =移動 コマンド ＋ スクロール =拡大縮小 V = 選択 T = テキストボックス R = しかく O = まる L = 線 あああ

Slide 64

Slide 64 text

でも、お高いんでしょう？ わあすっごい便利

Slide 65

Slide 65 text

基本ただです ＼どんだけ作っても／

Slide 66

Slide 66 text

バージョニングとかできる プレミアムプラン？ ＼どっから入るのかも分からん／

Slide 67

Slide 67 text

まとめ Figma術マスターになったので

Slide 68

Slide 68 text

Figmaは神

Slide 69

Slide 69 text

スライド公開しているので鉞でも質問でもあれば@unotoviveまで ご清聴ありがとうございました