見出し画像

Auto layoutとVariantsの効果的な使い方

Kotoko Yamamoto

こんにちは。
株式会社アジケでUIアシスタントデザイナーをしている山本です。

Figmaをメインツールとして使い始めて半年経ち、基本的な操作に慣れてきました。
そんな中、1ヶ月前くらいにFigmaのAuto layoutとVariants機能を使うことになり、最初は「難しそう…できるかな…」と不安だったのですが、
やっていくうちに「こんなに便利なの…？使うの楽しい…！」となり
今では、この２つの機能を使えそうなところは積極的に活用します。
基本的な操作から1歩先をいった印象を受けますが、Figmaを使い始めて半年くらいの私でも使うことができます。
今回はAuto layoutとVariantsを使いはじめの人、これから使っていきたい人、どんなときに活かせるのか知りたい人に向けて活用しやすそうな場面を紹介します！

1.最初にどのように学んだのか

まず最初に何から始めたらいいかわからない！という人は下記のステップを参考にしてみてください。

ブログ素材_0804

③の段階では理解度5割くらいで大丈夫です。

▽おすすめの記事▽


2.【実践】Auto layout編

難易度：★★☆☆☆
Auto layoutを活かせる場面として、レイアウトを整える時が効果的です。
例えば、1つのグループにまとめられている内の1つの要素をやっぱり消したいなと思った時にAuto layoutを設定していれば、該当する要素を目隠しするだけでオブジェクトが消え、消えたオブジェクトに合わせて他のレイアウトが自動的に調節されます。
要素を追加したい場合にも同じ効果があります。

画像3


3.【実践】Variants編

難易度：★★★☆☆
VariantsはUIコンポーネントを制作する際に設定するととても便利です。
例えば、デザインの中で使うボタンの種類が3パターンある場合、
わざわざ変えたいボタンをコピペして持ってこなくても、
Variantsを設定していれば右側のナビゲーションから任意のデザインを選択することができます。

画像5

4.まとめ

Auto layoutとVariantsを覚えるコツとして以下の2つをよく観察してみるといいと思います。
1.レイヤーがどうなっているか
2.右側ナビゲーションにどのような設定がされているか

Auto layoutとVariantsを触り始めてまだ1ヶ月弱ですが、面白さと便利さに感動しました。
まだまだFigmaには便利な機能がたくさんあるので、これからもどんどん習得してきたいと思います。
そして日々の作業に余裕を持たせることができたらいいなーなんて思います。
今回紹介した場面以外にも、活用していける場面はたくさんあるので、
皆様も是非Auto layoutとVariantsを使ってみてください。
ここまで読んでいただきありがとうございました！


ディレクター/UXデザイナーの募集を開始しました🌿

最後にお知らせです。クライアントのパートナーとして事業創出・成長を支援レクター/UXデザイナーを募集します！下記条件に当てはまり少しでも興味がわいたら、ぜひお話しましょう🙆‍♀️

【必須スキル】
・Webディレクターとして2年以上の実務経験
・弊社のビジョンに共感してくださる方

選考の前段階として、お互いについてざっくばらんに知る面談のセッティングも可能です。「まだ応募までは決めきれないけど、会社のことを知りたい」という方もぜひご連絡ください🥳
採用サイトまたはWantedlyよりご連絡お待ちしています！
*ご覧いただく時期によっては募集を中止している場合もございますので、あらかじめご了承ください。

▼Wantedly

▼コーポレートサイト

▼UXデザイン会社ってどんなところ？大切にしている価値観や事業についてお伝えします


いいなと思ったら応援しよう！