Adobeユーザー向けFigma入門Part2

WEB DSIGN

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

ローカルスタイル

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

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

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

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

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


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

コンポーネント化

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

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

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

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

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

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

スクロールの設定

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

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

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


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

クリッピングマスク

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

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

 

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

プラグイン導入

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

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

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

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

 

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


NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00