Adobeユーザー向けFigma入門Part2

こんにちは！LiSMOアシストデザイナーの山邉です。
前回に引き続き、Adobeユーザーさん向けに、Figma入門記事を書きました！（前回の記事はこちら）
ローカルスタイルの作成からプラグインの導入までを記載しています。
前回の記事と併せて読むことで、Figmaの基本操作が一通りできるようになります！

ローカルスタイル

ローカルスタイルとは、「フォントや色の自分用テンプレート」のことです。
XDでいうところのアセットですね。
フォントや色を登録して、変更したい時に一括で変えられちゃう便利な機能です！

右上のデザインタブをクリックして、「ローカルスタイル」右側のプラスボタンを押します。
「テキスト・色・エフェクト・グリッド」の選択肢が出るので、登録内容にあわせて選択します。今回はテキストを選択。

見出し１というスタイルを作ります。
フォントサイズとスタイルを選択して、「スタイルの作成」をクリック。

これで登録完了です！
ローカルスタイルの項目に、「見出し１」が追加されました。

登録したローカルスタイルを適用するには、
入力したテキストを選択してから、今作成したローカルスタイルをクリックしてください。

ワイヤーフレームやカンプを作るときに活躍する機能です！

コンポーネント化

コンポーネントとは、ボタンやヘッダーなどの共通パーツを「ひとまとめの要素」にしたものです。
コンポーネントを作るメリットは3つ！

①元になる要素を変更すると、同じコンポーネント全てが更新される
②他のプロジェクトでも使える
③ヒューマンエラーを減らせる

複数人でファイルを更新するような大型プロジェクトや、テーマカラーが変更になった時に便利です！

Figmaでのコンポーネント化はとても簡単です。
コンポーネント化したいオブジェクトを選択したら、右クリックして「コンポーネントの作成」をクリックするだけ！

画面左側にコンポーネントが表示されたら登録完了です。

子コンポーネントを作成したいときは、親コンポーネントをクリックして、option＋ドラッグで作成されます。

スクロールの設定

プロトタイプでスクロールを表現したい時の設定です。
まずはスクロールさせたいコンテンツを作成します。
そのままだとフレームの外側にはみ出た箇所が隠れてしまうので、「コンテンツを隠す」のチェックを外して表示されるようにします。

スクロールさせたいコンテンツを全て選択して「選択範囲のフレーム化」をクリック。

スクロールさせるフレームができたら、プロトタイプのオーバーフロー挙動の項目で「垂直」を選択します。

設定が完了したら、再生ボタンを押して確認してみましょう！

クリッピングマスク

Adobe製品と同様に、クリッピングマスクも使用できます！Figmaでの機能名は「マスク」。
名前は若干違いますが、機能は一緒です！
マスクしたい画像を配置したら、切り抜きたい形のオブジェクトを作って配置。

画像の上下を入れ替えて、画像が上、オブジェクトが下になるように配置してください。
画像とオブジェクト両方を選択したら、半月型のアイコンをクリック。

これでマスクされました！
イラレとは画像の上下が逆になるので要注意ですね。

プラグイン導入

便利な拡張機能が使えるようになるプラグイン。Figmaにもいろいろな種類のプラグインがあります。
Figmaをもっと便利にしちゃいましょう！

左上のリソースアイコンをクリックして、開いたメニューから「プラグイン」をクリック。

検索窓にプラグイン名を入力して検索。導入したいプラグインが表示されたら、「実行」ボタンをクリック。

これで導入完了です！
プラグインの操作はそれぞれ異なるので、使いたいプラグイン名で検索してみてくださいね。

Figmaの基本機能は覚えられましたか？
Figmaにはまだまだいろんな機能があります。
あれこれ試してFigmaを使いこなしましょう！
最後までお読みいただきありがとうございます✨