それでは早速それぞれの機能を紹介していきます！

1. オートレイアウト

オートレイアウトは要素の配置やサイズ、間隔を自動的に調整してくれる機能です。

この仕様を理解していないと、本当は別のところに要素を配置したいのに勝手に等間隔で置かれちゃう…という事象が起きたりもします。

私も最初にFigmaを使い始めたとき、正直オートレイアウト機能は難しく感じて少し戸惑っていました。

しかし、オートレイアウトについてしっかり理解して使いこなすことができると、UIデザインの生産性とフロントエンドの実装スピードがかなり向上するのでぜひ抑えておきたいところです！

ここではオートレイアウトの基本的な使い方と具体的な活用方法について詳しく解説していきます。

基本的な使い方

オートレイアウトを使用するには、まず配置したい要素たちを選択し右側のプロパティパネルで「オートレイアウト」を有効にします。

↓これがオートレイアウト有効の状態

これにより、選択した要素がオートレイアウトコンテナ内に配置されて設定が可能になります。

具体的な活用方法

続いて、オートレイアウトを使いこなすための具体的な例を紹介していきます。

ナビゲーションメニュー

オートレイアウトを使用することで、メニュー項目が均等に配置され、画面サイズに応じて自動的に調整することができます。

作成手順

1. メニュー項目（ホーム、インタビュー、キャリア、Tips、デザインエンジニアNOTEとは）をテキストオブジェクトとして追加します。
2. これらの項目を選択し、オートレイアウトを有効にします（横方向）。
3. 項目間の間隔を設定し、パディングを調整します。

コンポーネント

コンポーネントはデザインの効率性と一貫性を保つ機能です。

特に大規模な自社プロダクトやチームでの作業において、この機能を使いこなせると新規のフロントエンド実装、デザイン制作の効率化から長期的なメンテナンスのしやすさまで、いいことずくめです！

ここではコンポーネントの基本的な使い方と具体的な活用方法について詳しく解説します。

基本的な使い方

コンポーネントを利用することで、一度作成したデザイン要素を再利用可能な状態にすることができるようになります。

これにより同じ要素を複数の場所で使い回し、修正が必要な際には一箇所の変更で全てのインスタンスに反映させることができます。

コンポーネントの作成

1. 任意のデザイン要素（例：ボタン）を選択します。
2. 右クリックして「コンポーネントを作成」を選択、またはショートカットキー（Cmd + Alt + K / Ctrl + Alt + K）を使用します。
3. コンポーネント化された要素は、レイヤーパネルでダイヤモンドのアイコンが表示されます。

インスタンスの使用

1. 作成したコンポーネントをドラッグ＆ドロップして、他のアートボードやフレームに配置します。
2. インスタンスは親コンポーネントの変更を自動的に反映しますが、特定のプロパティをオーバーライドする(ここではテキストと背景色)ことも可能です。

具体的な活用方法

コンポーネントを効果的に活用するための具体的な例を紹介します。

バリアント

 バリアントを使用すると、同じコンポーネントの異なるバージョン（例：異なる状態やスタイル）を簡単に切り替えることができます。

例えば、ボタンの異なる状態（通常、ホバー、無効）をひとつのコンポーネントセットとして管理できます。

このような感じで設定したバリアントを必要に応じてデザインの中で利用していきます。

ローカルスタイル

ローカルスタイルはカラーパレットやタイポグラフィなどのデザイン要素を統一的に管理するための機能です。

ローカルスタイルを使用することで、デザインの一貫性を保ちながらのデザイン制作はもちろん、フロントエンド実装もより効率的に行うことができます。

ここではローカルスタイルの基本的な使い方と具体的な活用方法について詳しく解説します。

基本的な使い方

ローカルスタイルを利用することでプロジェクト内で使用するデザイン要素を簡単に統一することができます。

右側のサイドバーにあるローカルスタイルを選択すると、この4種類を選択することができてそこから新規作成することができます。

• テキスト
• 色
• エフェクト
• グリッド

チーム内でコミュニケーションが取りやすいように、名前と説明も追加することができます。

なので、どういう場面で利用するものなのか？がすぐに理解できてデザインの生産性も高くなります。

テキストスタイルの作成

ローカルスタイルから「テキスト」を選択すると、こちらのコントロールパネルが開きます。

1. font-family, font-weight, font-size, line-heightなどを設定します。
2. 「セクションタイトル」や「ボディテキスト」などの名前を付けて保存します。

カラースタイルの作成

ローカルスタイルから「色」を選択すると、こちらのコントロールパネルが開きます。

1. 使用する色を選択します。
2. 「プライマリカラー」や「セカンダリカラー」などの名前を付けて保存します。

エフェクトスタイルの作成

ローカルスタイルから「エフェクト」を選択すると、こちらのコントロールパネルが開きます。

1. エフェクトの種類をインナーシャドウ、ドロップシャドウ、レイヤーブラー、背景のぼかしから選択します。
2. それぞれに必要な設定をします。
3. 「シャドウ」などの名前を付けて保存します。

グリッドスタイルの作成

ローカルスタイルから「グリッド」を選択すると、こちらのコントロールパネルが開きます。

1. グリッドの種類をグリッド、列、行から選択します。
2. 数、色、余白、タイプなどを設定します
3. 「12カラム」などの名前を付けて保存します。

まとめ

今回はエンジニアが押さえておきたいFigmaの機能を3つ紹介しました。

どれも基礎的で簡単な機能ですが、知っているのと知らないのとでは生産性が大きく違ってくるので、定期的にこの投稿を見直して習得していきましょう！

また、関連記事に私がデザインエンジニアになったきっかけについて扱っている投稿もあるので、もし今回の投稿でデザインエンジニアに興味を持たれたら併せて読んでみてください！