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

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

自己紹介します

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

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

本題 Non Designers Design Tool

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

Figma UIデザインツール

＼ででん／

Figmaって何んで結局

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

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

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

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

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

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

画像に文字を入れたり

線とか図形を入れたり

軽いフィルターだったり

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

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

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

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

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

draw.io ? powerpoint ?

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

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

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

コピペして並べるだけ

書き出しもさっきと一緒

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

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

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

縮小してみる

つぶれた

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

？？？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Figmaは神

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

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

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

More Decks by unotovive

Other Decks in Technology

Featured

Transcript