Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

【初参加歓迎】Webエンジニア勉強会inVR 第3回【YouTube Liveあり】
https://study-in-virtual.connpass.com/event/178491/
にて登壇

85ff6600c122c39b3da0f7402c08a2c9?s=128

unotovive

June 21, 2020
Tweet

Transcript

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

  2. 自己紹介します

  3. おとべです sonotamoromoro github instagram note twitter { , , ,

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

  5. 本題 Non Designers Design Tool

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

  7. Figma UIデザインツール

  8. \ででん/

  9. Figmaって何 んで結局

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

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

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

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

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

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

  16. 画像に文字を入れたり

  17. None
  18. 線とか図形を入れたり

  19. 線とか図形を入れたり

  20. 軽いフィルターだったり

  21. 軽いフィルターだったり

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

  23. None
  24. None
  25. 書き出しも超めっちゃすごい簡単

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

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

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

  29. draw.io ? powerpoint ?

  30. Figmaでも出来ます!!! \ででん/

  31. UIキットやテンプレートが 用意されている \どや/

  32. AWSダイアグラムテンプレート \公式だよ/

  33. None
  34. None
  35. None
  36. コピペして並べるだけ

  37. 書き出しもさっきと一緒

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

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

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

  42. 縮小してみる

  43. None
  44. つぶれた

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

  46. ???

  47. None
  48. None
  49. SVGとして書き出したい部分 全部選んでアウトライン化 \変な図形は微調整/

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

  51. Figmaは プロトタイピングツール \そうだよ/

  52. 任意の順にページを
 再生できる \そ、そうだよ/

  53. というわけで スライドをつくって登壇も できる \!?/

  54. Frameを並べて再生するだけ \!?!?!??/

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

  57. デザイン視点 実装視点 企画視点 ・サービス企画 ・仕様設計 ・コンポーネント  設計 ・API設計 ・UIデザイン ・DB設計

    ・ワイヤーフレーム
  58. デザイン視点 実装視点 企画視点 ペルソナ UXDコンセプト ↓ OO分析とコンセプトマップ ↓ UI設計 ↓

    コンポーネント設計 DB設計等 ↓ 実装
  59. よくないところ ・最低限が保証されないデザイン ・アニメーションは結構無理

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

  61. 超簡単です \Webで使えるよ/

  62. ショートカットキー 6個ぐらい覚えるだけ \80個ぐらいあるけど使わん/

  63. SPACE + ドラッグ =移動 コマンド + スクロール =拡大縮小 V =

    選択 T = テキストボックス R = しかく O = まる L = 線 あああ
  64. でも、お高いんでしょう? わあすっごい便利

  65. 基本ただです \どんだけ作っても/

  66. バージョニングとかできる プレミアムプラン? \どっから入るのかも分からん/

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

  68. Figmaは神

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