見出し画像

Figmaの勉強をしてみている

育休中、デザイン系の勉強もしていました。
フリーランスの仕事や夫の仕事の手伝いを引き受け(やらされ)ている中で、やっぱり「クリエイティブなことが好き」、「医学(医療)が好き」ということを再認識できました。
医療×ITを取り扱う自身の所属する会社でも使われているし、デザイン業界でもはや主流になっていると思うFigmaを勉強しているので、ちょこちょこ学んだことを書いていこうかな〜と思います!

勉強してる感想

すごくエンジニア想いのUIUX

フロントエンドを勉強していた自分としては、FigmaのUIUXに感動しました。HTML, CSS, (JS)を学んだことがある人ならばすごく使いやすいのでは?margin,paddingなどの余白、レスポンシブ、動的挙動の設定がしやすい。ドラッグするだけで余白が設定できたり、レイアウトの正確な自動調整がされます。ここの余白や配置どうなってるんだっけ?とか確認しやすいし、コンポーネントの概念も含め、エンジニアが形にする上で気にすることを押さえたUIUXだなあという印象です。
Adobeユーザーのデザイナーさんからした当然かもしれませんが・・

デザインに必要な概念がわかりやすいUIUX

デザイナーでもない私のみで使いやすい、直感でもできるUIUX。ドラッグするだけでオートレイアウトに要素を追加することもできる。グローバルスタイルを定義することでテキストや色の統一をすることも容易。
変更に強い機能は非常にありがたいですね。

デザイナー以外でも初心者でも使いやすい

adobeを使ったことがない人にとっては「レイヤー、マスク」などはちょっと慣れないかもしれませんが、それもすぐに解決することでしょう。Adobeにもついているけれど、わからなければすぐその機能のチュートリアル動画に飛ぶことができたり、Figma公式のドキュメントもシンプルかつわかりやすくまとめられています。ググればすぐ解決!
Adobe製品やエンジニア用語と共通している点が多いため、他のツールに慣れていたら操作に慣れるのも早いと思います。ショートカットキーは必須という点でも似てる。(なくても使えるけど)
これは、デザイナーじゃなくてもエンジニアさんがざっとラフ案を考える時にも使いやすいと思いました。いろんなポジションの人でも気軽に使えるツールだなと感じました。

勉強方法

Youtubeのチュートリアル動画

https://www.youtube.com/watch?v=o1nCmiW6auE&t=4298s

https://www.youtube.com/watch?v=JGLfyTDgfDc

英語版がおすすめ。英語の勉強にもなるし、こちらはfigmaの使い方だけに限らず、デザインのポイントもさりげなく解説してくれるので非常に学びになります。
その他わからないところは、ポイントで具体的にyoutubeで調べて学ぶと効率が良いと思います。



Udemy

エンジニア学習では個人的に大いに助けられたUdemy。貴方なしではやっていけないのよ。。
講師もそれぞれ、評価が高くてもなんか合わない動画もあるので、あれこれ試して見てかいつまむのがおすすめ。
最低限はYouTubeで学んでド素人初心者は抜けられるが、そこが先はUdemyがおすすめ。
わたしはこれらをやってみています。

https://www.udemy.com/share/1034O83@7wk2ut4l47efGefEj3v6xUMBfwIXNAcNrH5GVfY216G5O_7QOLWhWD-S0XNR1qWxvg==/

https://www.udemy.com/share/105oyi3@f2x7Q_xInnT3NHvrvZGLYWGEUdFIWD4aoFE8M7i8tOPSToWSSNF3hIJtO9WX-p-aRQ==/

Notion

学んだことやチェックしたいことをnotionにメモしています。
notionも業務で使っている

おまけ:集中アプリ

腰が重い・・・という時には、こちらおすすめ。習慣化にも最適。10分だけやるか・・・が気づいたら2時間、気づいたら6時間!
コツコツ続けるのが苦手な私でも、これを使うと急に行動力と集中力が爆あがりしました。育休中なるべく勉強時間を確保・視覚化していました。モチベーション維持にも最適でした。こちらのアプリ↓

根性で思い腰を持ち上げ続けるよりも、まずは小さな一歩から!
お風呂に入るまでに時間がかかるのは、シャンプーするのが面倒だと思うからなのです。シャンプーしなくてもお湯ですすげばいいじゃない!

作成してみた勉強ロードマップ

復職まで1ヶ月半、もっと前から家事育児の前から学習をしていたのですが、なかなかまとまった時間が取れず。家事育児は外注して、最低限の家事育児の合間に勉強しました。

チュートリアル動画でざっと概要を学ぶ
わからないところを調べる
アプリの模写
レベルアップのためにUdemyでさらに本格的なところまで学ぶ
ひたすら手を動かす・・
合間で勉強会やデザイン学の本を読む

今やっていること

チュートリアルを終え、基本的なことを学習したのち、サイト・アプリの模写をしています。また、オンラインの勉強会に出席したり、Udemyを進めたり。

失敗したこと

自己流で使いこなそうとしたこと。
Adobeを触ったことがある人、デザインの基礎を勉強したことがある人は別です。
取説を見ずに感覚だけでなんとか習得しようとしたけど、ショートカットキーを使う場面(なくても使用に問題はないが)が多く、canvaほどシンプルではないのでチュートリアルを見てざっくりは学んだほうが結果的に早かったです。
デザインを本業にしたことのない私が言うのも恐れ多いのですが、ある程度デザインには基本原則的なものや、ツール使用の際に最低限考えなければいけないポイント(レスポンシブとか)があると思います。
それら知らずに0から自分でデザイン構成から考えて、さらにツールの使い方を学ぶのは、脳の容量オーバーになるので、潔くチュートリアルに沿って学ぶことをおすすめします。

終わりに

Figma、楽しいぞー!すごいぞー!と思えています。
今後のアドベントカレンダーで進捗発表もします。

本日は復職前アドベントカレンダー2日目の記事です。
早速2日目にして投稿しそびれたので連投になりますw


この記事が気に入ったらサポートをしてみませんか?