【Figma】variants機能の紹介:デザインパターンを効率的に管理する

こんにちは、デザイナー・イラストレーターの志摩です。

ホームページのデザイン制作時、デザインパーツにパターンが出てくることがあるかと思います。
ページをまたいでも同じデザインパーツのあのパターンを流用しようと思う時があるかと思います。
そんな時、大変便利なFigmaの機能「variants」をご紹介致します!

対象のコンポーネント化

例えば上記画像のように色違いのボタンデザインを流用したい場合…
まずは2つのボタン、両方のレイヤーをそれぞれ「コンポーネント」化します。

上記画像の赤枠部分どおり、対象のレイヤー上で右クリックするとポップアップが開きますのでその中の「Creeate compornent」を選びます。

すると上記画像のように、それぞれひし形のアイコンが付いたコンポーネントレイヤーに変わります。

さらにそれぞれを選択すると、右のサイドバーに「combine as variants」というボタンが出てきますのでそのままクリックします。

デザイン上の見た目は上記のようになり、レイヤーの状態もbtnレイヤー内に2パターンのレイヤーがそれぞれ格納されました。

variants下でのレイヤー名

ここまできたらもう少しです、variants化されて格納された下層レイヤーのレイヤー名をわかりやすい名前に変更しましょう。
レイヤー名をクリックすると「Property 1=xxxxx」となっているはずです。この「Property 1=」部分はかえずに「xxxxx」部分にわかりやすい名前を入れましょう。
今回の例ではそれぞれ「Property 1=blue」、「Property 1=red」とします。

すると、、右サイドバーから「blue」パターン「red」パターンをそれぞれ差し替えられる様になりました!

いかがでしたでしょうか!
これらFigma上でのコンポーネント・variants機能をより効果的に使ってホームページ制作に役立てていきましょう!

レッドキリンでは福岡のホームページ制作をお待ちしております!
お気軽にお問い合わせください。

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。