こんにちは!はっち(@hacchikabu)と申します。
20代のwebデザイナーを目指している会社員です。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
「お金の知識」×「webデザイン」×「スプラトゥーン」×「プレミアリーグ」×「エンタメ」の5本柱で情報発信を行っています。
webデザインはする中で、色んなデザインツールがありますよね。
PhotoshopやAdobe XDなどありますが、
今後は無料で使用できる範囲も大きく使いやすい「Figma」が主力になってくると思います。
下記の画像から、ダウンロードできますので、
まずは中身を見てから!って方はどうぞ!
私は、現状Figmaでデザインしています。
XDも使っていましたが、webブラウザ上で使えますし動きが軽快でいいですね。
Figma使いたい!って方は一緒に見ていきましょう!
【スキルアップ】Figmaを極めろ!実践的なFigmaの使い方
まずは、HIROCODE.ヒロコードさんの動画です。
効率化とレスポンシブに
強いデザインを作成するにはという観点で
色んな手法を紹介してくれています。
HTML CSSで実装する時に、逆にFigmaで表現するにはどうすれば?と思っていましたが、
デザインを作る方は、これを見てるとエンジニアに伝わりやすいデザインになるかと思います。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
逆にエンジニアの方も見てると、デザインがどう作られているかわかって良いかもしれません。
Figmaのプラグイン10選 2022【拡張機能】
またまたですが、HIROCODE.ヒロコードさんの動画です。
先ほどのFigmaの機能を補完するプラグインの動画です。
Figmaはブラウザ上でも
サクサク操作できることが特徴ではありますが、
プラグインが実際にデザインする人に寄り添っていることが特徴だと考えています。
そのため、こういうプラグインがあることを認識していただき、
Figma使ってみようと思っていただければと思います。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
FIND AND REPLACEは非常に助かります。
合計200分越えるFigmaの使い方チュートリアルを無料で出してる理由
お次は、カイクン-デザイン解説@BONOさんの動画です。
クリエイティブ系の情報発信をされていますが、その中でも
Figmaの動画が#8まで更新されていて、ゆっくり学びたい方にはお勧めです。
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
![](https://hacchi-kabu.com/wp-content/uploads/2023/02/0_37_1_0_155_17_0_23_195_0_0_0_p0-150x150.png)
UIのトレースをしながら学べるので、
めちゃくちゃおすすめです。
まとめ
いかがでしたでしょうか。
これからのデザインツールとしては、Figmaが主力になっていくと思いますので、
今のうちにマスターしていきましょう!
![](https://hacchi-kabu.com/wp-content/uploads/2022/02/BYEBYE-1024x572.png)
![](https://hacchi-kabu.com/wp-content/uploads/2022/02/BYEBYE-1024x572.png)
コメント