Figmaでwebデザインを行う際に利用したい機能や確認したいポイントなどを留意点とその関連記事をまとめていきます。

1. オートレイアウトやConstraintsを使う

オートレイアウトやConstraintsを使うことで、様々な画面サイズに対応したデザインを作成できます。

オートレイアウト

ボタンやカードのサイズを自動的に調整してくれる機能。要素同士の間隔やサイズを設定しておくと、画面サイズが変わってもレイアウトが崩れにくくなります。また要素を削除した際の間隔の調整を自動でできます。
https://giginc.co.jp/blog/giglab/auto-layout

Constraints

要素が画面サイズに合わせてどのように位置やサイズを変更するかを指定できる機能です。
https://note.com/wecken/n/nd8e6e8017a83

2. コンポーネントとスタイル

Figmaのコンポーネントやスタイル（カラー、テキスト、エフェクトなど）を使うことで効率よくデザインを行う事ができます。

コンポーネント

ボタン、フォーム、ナビゲーションなどを再利用可能な状態にしておくと、全体の一貫性を保ちながら変更を一箇所で反映できます。

スタイル

共通のカラーやフォントをスタイルとして定義しておくことで、効率よく作業を行う事ができます。 https://help.figma.com/hc/ja/articles/360039820134-%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AE%E7%AE%A1%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89

3. フォントにおいての設定

テキストは読みやすいフォントサイズに設定し、文字サイズを変更しても文字レイアウトが担保される事を考慮します。

4. アクセシビリティ

Webデザインにおいて、アクセシビリティの配慮を行うため、デザイン段階で以下を行うといいでしょう。

1. カラーコントラストチェッカーを使用し、視認性を確認
2. テキストは読みやすいフォントサイズに設定し、スクリーンリーダーの使用を想定して適切なHTML構造を考慮

5.ガイド・レイアウトグリッドを利用してデザイン補助線

Webデザインではグリッドを使うことが基本です。FigmaでもLayout Gridを設定して、各要素を配置できるようにします。
グリッド、列、行を使用したレイアウトグリッドの作成

6.プロトタイピング機能

Figmaには、インタラクションやアニメーションをシミュレートするプロトタイピング機能があります。クリックやホバー時のアクション、ページ間の遷移など、動的な部分を視覚的に確認できる

インタラクションの作成

https://help.figma.com/hc/ja/articles/360040315773-%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%A9%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90

インタラクションの作成

https://help.figma.com/hc/ja/articles/360040318013-%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92%E5%86%8D%E7%94%9F


以上、Figmaの特性を最大限に活かしつつ、より効果的で効率的なデザイン作業を行うための留意点でした。