[Bookレビュー] 『これからはじめるFigma Web・UIデザイン入門』をエンジニアが読んで実践してみた

こんにちは。

最近仕事をする上で、サクッとワイヤーフレームやデザインだけ共有したい時が増えてきました。

そこでこちらの本を購入したので、今回はこちらの本のご紹介です。

これからはじめるFigma Web・UIデザイン入門

画像引用: https://book.mynavi.jp/files/topics/132261_ext_06_0.jpg

ざっくり感想

本の構成として、ざっくり

という構成になっています。

これまで仕事で使っていたこともあり、僕の場合は実際には2から読み進めるような形で進めました。

実践編では、ポートフォリオサイトのサンプルを作ってみるのですが、ショートカットが細かく記載されていたり、早く作業に慣れるという点では非常に効果的だったと思います。

特にどこまでAuto Layoutを使用するべきかというところが個人的にあまりよくわかっていなかったのですが、実例ではほぼ全ての作業がAuto Layoutで行われており、そのあたりが特に腑に落ちた部分でした。

逆にもう少しフォローが欲しかったなという部分もいくつかあります。

例えば、今回のサンプルではアプリの場合とWebの場合それぞれあるのですが、Webの場合はレスポンシブデザインの場合どのように扱うのか？というところが悩んだ部分でした。

というのもサンプルにはPCサイズのデザインしかないため、実際にコーディングする立場からすると「このデザインもらってどうすればいいんだろう…？」となりそうだなと思いました。

後述する自分で作ったFigmaの場合はレスポンシブデザインにも対応するためPC、SPそれぞれの画面を別に分けて作成することにしたのですが、もう少しいいやり方あったりするんじゃないかな？というのは今後やりながら調べていきたい部分になりそうです。

他にも、Webデザインということで画像データは既存のものを使用する形になっていたのですが、Figmaで画像データを加工するようなことはできないのかな？とかSVGデータを扱うことはできないのかな？というところも気になったのでこちらも今後調べていきたい部分になります。

総評としては、説明が丁寧で手を動かしながらできた点はすごく良かったです。本当に入門編、という感じな印象を受けたため、今後調べていきながらどんどん触っていこうと思います。という感じでした！

ということで本を買ってサンプルを試すだけでは意味がないので、会社のHPデザインをFigmaでやってみました。

(サンプルなので、一部抜粋という感じです)

ぜひこのHPのデザインになっているか確認してみてくださいね。

今回はこのあたりで。