はじめに

今回は、Figmaという、ブラウザ上でデザインを作成できるツールを使用して、
デザインを設計してから実際にWebページを作ってみる。ということをしてみました。

制作したWebページというのは標記にもあるとおり、長年放置してきたポートフォリオです。

デザイン作成

こんな感じで作成しました。

Figmaのいいところ（共有）

Figmaの強いところはWeb上で制作できるので、アカウント登録しておけば、
他のPCからでもデザインを見たり、作ったりできるというのが強いですね。

また、他の人との共有も、リンクを貼ればば簡単に共有できますし
すごく利便性が高く驚きました。

今回は自分のポートフォリオ作成という目的だったのであまり他の人に
見せることはありませんでしたが、チームでこれから作成していこうという状況で、
さらに輝きそうだなと思います。

Figmaのいいところ（機能）

そもそもデザインツールを初めて使用したので、他のツールがどうなのかは
分かりませんが、様々な便利機能があります。
（それゆえ初見ではどこに何があるかチンプンカンプンでした...笑）

その中でも特に便利だなと思ったことを書いていきます。

①グループ化
複数の要素の並べ方を調整したりする際便利です。
例えば、Webページでflexやgrid機能を使用したいな、と思うような場面で使えます。

グループ化した要素は、「Auto layout」という機能が使用できるようになります。
この機能によって
・縦並びか横並びか
・それぞれの要素をどのくらいの間隔で配置するか
等が簡単に設定できます。

解除も簡単にできるので綺麗に並べたい！と思ったらとりあえずグループ化しても良さそうです。

②コンポーネント化
似たような要素を複数作成するというような場面で重宝します。
今回作成したもので言えば、「推薦者の声」の右側の部分です。

「画像を表示する円」、「氏名」、「推薦文」の３要素から構成されたものをいい感じに並べた
ものをひとまとまりとして、それを５つ作成しなくてはいけません。

これを作成する際、まず最初に思いつくのが1つ作ってコピぺ。

それでも勿論できるのですが、ここで最初に作ったものをコンポーネント化してから
コピペしましょう。

コピペした要素はそれぞれ画像やテキストを変更しても他のひとまとまりの要素に何も影響を
与えません。
しかし、最初に作成し、コンポーネント化した要素だけは、他のコピペした要素にも
変更を加えることができます。

例えば後で見返した際に、もう少し氏名のテキストを大きくしたいと思ったら、
コンポーネント化した要素のテキストの大きさを変更するだけで他のコピペした
要素全ての氏名のテキストも同じ大きさに自動で変更されます。

コンポーネント化を使用してささっと要素を作成し、並べる際にグループ化する。

このコンボがとても便利です。

③ページ遷移やアニメーションの表現
この機能はあまり使わずに終わったので、次作成するときに
使ってみようかなと思っていますが、
ページ遷移hoverの際の表現もできるみたいです。
右上の方にある「Prototype」を選択して、要素と要素を紐付けることで
詳細設定のポップが出てくるので色々設定すれば、より具体的に
どう動くのかイメージできていいなと感じました。

気をつけるとより快適になること

使っていてすごくいいなと感じるのですが、やはり事前にググって使い方を
簡単にでも確認してから使うことをお勧めします。

初見ではそもそもどうやって始めたらいいかすら分からなかったので。

あと、Figmaで作成した要素は左側でファイルやフォルダのように並んでいて
名前をつけたりして確認できますが、並び順によって優先順位が変わります。

上に並んでいる方が強いので、スクロールして要素の位置が重複するような場面で
要素が隠れて困る時は上に並べる。

また他の人のデザインをコピペして拝借できるらしく、画面上部にある
電池残量やWifi電波強度などを表すようなテンプレ要素をコピペする際、
そのコピペ要素がきちんと配置したいFlame内に収まっているか。など

ファイルの並びはきちんと見たほうがいいなと思います。

ポートフォリオ完成

作ったデザインを見て、実際にポートフォリオを作成しました。

Figmaを使ってみて思ったことは、とりあえず手を動かして
作るのは効率がいいなということと、
自然とコンポーネント単位で考えることが多くなるので、
アトミックデザイン等と相性が良いと感じました。

Figmaで作りながら考えていると、いつの間にか興が乗って、
勢いで作成できたので、今後もデザインから設計する方法を
使っていこうと思います。