レイアウト作成

figmaを使用してレイアウトを作成行っていました。
figma自体の機能の確認やオートレイアウトやフレームをどのように使用するのか？を考えながら今回は作成を行なっていました。
その中で私にとって使いやすかった機能をいくつかまとめてみました。

まとめるのに便利！フレーム

デザインツール(photoshop等)のアートボードのようなもの。
アートボートとは異なり、フレームを別のフレームの中にネスト(入れ子)ができます。これにより、複雑な、連動するデザインを作成できます。

自動でレイアウト！オートレイアウトとは？

「自動」で「レイアウト」を整えてくれる機能。
この機能を使うことでオブジェクト同士の間隔や並べ方、配置を整えやすく、ちょっとした配置の変更が早く行うことができます。
cssを作成するとき考えやすいですね！

「レイアウトを整えるための機能」なので「まとめるための機能」ではないので、気をつけて使うように！

同じ要素を繰り返し使うとき、コンポーネント

コンポーネントは複数のデザイン間で再利用できる要素。複数のプロジェクト間で一貫性のあるデザインを作成して管理する時に便利です。
コンポーネントは、ボタン、アイコン、レイアウトなどのに使いやすい機能です！

変化やhoverのイメージができる！バリアント

バリアントがあるとボタンなどの「hover」や「ダークモード」などの表現もやりやすくなります。
類似するコンポーネントを一つのコンテナにグループ化して整理することができます。コンポーネントライブラリがシンプルになり、誰でも簡単に必要なものを探せるようになります。

イラレの延長ではなかった。

初めは図形を描いたり、画像を配置したりすることを基本としていました。
（その時までは触ってみてIllustratorの延長のように感じていました。）
しかし実際本を見ながら作成をしてみて
「オートレイアウト」を使うことでこれが違うと感じることができました。

• ボタンひとつひとつの動きを仮に作れる
• コードのことを考えながらレイアウトを作成
• 設定したら修正が早かった

まだまだ触り足りないですが便利機能をフルに使って作成を行なっていきます。

figmaでデザイン完成

作成を行なって感じたこと、更新することを考え、このページの完成後、WordPressのテーマにしようと考えています。
少しずつ進めていきたいと考えます。