ノンデザイナーズ・デザインツール

by unotovive

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までご清聴ありがとうございました