要約
①ヒロコードの動画見る
②デザインの理想をざっくり決める
③Figmaで実際に作ってみる
④わからなくなったら、ヒロコードの動画見る
③、④をループ
前提
私も初心者です。
そして1日もあれば下記のようなものが作れる実力が付くので、是非最後まで読んでください。
まず1番伝えたいこと
ステップを踏んで学ぶことが大事です。基礎が固まるまではステップを踏むことがとにかく大事です。
1.基礎を固める
↓
2.作りたいイメージを決める
↓
3.基礎を1つずつ思い出しながら自分で考えて作る。そして身につける。
ここでつまずきやすいです。ここも、さらにステップを踏んでやるとつまずかなくなります。後で解説します。
[ステップ1基礎を固める] HIROCODE.の動画を見よ
50分くらいで見終わります↓この2つを見てください。
【30分マスター講座】Figmaの基本と便利な使い方！ | WEBデザインツール
Figmaのプラグイン10選 2022【拡張機能】
これで基礎は完了です。
ですがおそらく身についてないと思います。
[ステップ2作りたいイメージを決める]参考になるサイトを見よ
例えば私はこのサイトを見ていました
https://www.ikesai.com/color/red/
それから、Canva
こちらでアイテムをたくさん見ていました。
これでなんとなく、こんな感じの雰囲気のサイトを作ろう、と決めてください。
(作りたいアプリは決まっている前提です。デザインのイメージをここで決めてください。)
[ステップ3 基礎を思い出しながら自分で考えて作る]
ここから私はつまずいたので、丁寧に解説します。
なので、ここからさらにステップを細かく具体的にして説明します。
1.とりあえずフレームワークを引いてください。
Figmaでデザインを描いていく画面を開いてください。
Fを押してください。#←このマークがフレームワークです。
思い出すために、ヒロコードさんの動画の7:17を見返してください。7:17
Webアプリならデスクトップ用のフレームワークの型があります。
モバイルアプリならスマホアプリ用のフレームワークの型があります。
2.ナビゲーションバー(上位のホームとかログインとかのバー)を作りましょう。
この調子で自分の理想のデザインを参考にしながら、オリジナルのデザインを作っていきましょう。
やっていくうちに、こんなことが出来たらいいなと思うことがたくさんあると思います。そしてFigmaは結構そういうことができちゃいます。↓出来るとサクサクできるようになることをまとめました。
[Tips]
画像を丸くする
画像を小さくする
shift 押しながらマウス動かす
画像を小さくする時に、マウスでそのまま小さくしようとすると、正方形が長方形になるような、形が変形しますよね？
縦と横の比率を変えずに画像を小さくするには、shiftを押しながら画像を小さくしてください。
有名なSNSアイコンの色
他の人のFigmaのデザインを参考にできるコミュニティ
他にも色々あるのですが、ヒロコードさんの動画をてきとうに色々見ていると便利なことをたくさん学べるのでおすすめです。
https://www.youtube.com/c/hirocode
フリー素材サイト
Unslash →こちらはFigmaにプラグインで入ってるのでそれを使うのがおすすめです。使い方はヒロコードの動画を見てください。
https://find47.jp/
https://www.pexels.com/ja-jp/
https://www.pakutaso.com/