【感想】Figmaを導入して。【webサービス】

こんばんは、さりげなく一日更新し忘れた

駆け出しwebデザイナーじゅんじゅんです。

反省も含めて今日はweb初心者、勉強中の方のために有益そうな記事を書きます・・・・・(/・ω・)/

今日は現在関わっているwebサービス開発で導入することになった

Figmaについて以下の内容で書いてみました。

１、特徴

Figmaってなんや？という人もいるかと思うので、
簡単に解説です。

　AdobeやSketchと同じ、webデザインツール。
　プロトタイピングツールともいわれますね。
　プロトタイピングとは、後で改良することを前提に
　一度ざっくり大枠を作っていくことです。
　Figmaはブラウザ上で制作するため、google documentみたいな
　感覚でメールを送信することで共有できます。

ざっと編集画面です。左上にあるのが、ツールボックス。
普段からプロトタイピングツールを使っている方ならアイコンを見ただけで
だいたいどこから何が出てくるかわかるはず。
その左にあるのがハンバーガーメニューで、フォルダ画面に戻ることができます。
ちなみに、auto save機能付きで、クラウド保存です。
ナ、ナント便利！！

これは左サイドにしたたかに設置されているレイヤーボックス。
Adobeではわざわざレイヤーを見やすくするために、レイヤーボックスを大きくして作業環境を作っているんですが、左側にあるのも見やすい！！！

ちょっとAdobeの方も模様替えしてみようかしら。

右サイドのコチラで詳細設定（色や境界線、サイズなどなど）をいじれます。Adobeユーザー的には「レイヤースタイル」や「属性パネル」の役割ですね。

２、adobeやSketchと比べて

圧倒的なのが、動作がサクサクであることです。
Adobeはとても重いですね…
日々悩まされています。

sketchはそもそもwindowsではなく、
macアプリです。
最近では.sketchの拡張子のファイルを開いて
編集までできるものが出てきたみたいなので、
紹介するときりがないので、割愛。
知りたい人はこちらでどうぞ！

SketchファイルをWindowsで開いて、編集・保存できる無料アプリが登場 -Lunacy

３、わかりやすい解説サイト

Figmaについて、ちょっと興味が出てきたあなたに、
分かりやすい入門サイトを紹介です。

これ見ればとりあえず基本操作はOK
図解ですし、説明の簡潔で必要な情報だけ揃っています。
ご丁寧にログイン画面から誘導してくれます。
https://stand-4u.com/web/tool/figma.html

こちらは使用した時の記録が書いてあります。
ざーーっと見てみて、「あ～こんな困ることがあるのね」
と事前知識としてインプット、場合によっては対策を
取っておく、てな感じで使うとgoodかと思います。

個人的に「チームで使うときは、全体イメージの共有のために使いましょう！」などと、共同編集するときのルールを決めておくといい、というのがしっくり。
誰がどこまで手を入れるのか確認しておかなきゃだな～と。役立ちました。
https://www.intrix.co.jp/blog/2017/08/17/figma_overview/

４、問題点

あまり問題点は感じられませんでしたが、一応。

・全体的に自分が打ったテキスト以外、英語表記です。といっても簡単な英単語のみなので、押して何が起こるか確かめればOKです🙆‍♀️

・共有できるのは2人までなので、それ以上は課金が必須。

・3プロジェクト以上も課金必須。

まだ使い込んでいないので、こんな感じですが、

これから頑張って攻略していこうと思います～！

それではみなさん、よい夜を！