36
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[朗報]FigmaのVariantsにBooleanが追加、コンポーネント管理がスッキリできる!

Last updated at Posted at 2022-05-27

レイヤーのオンオフをVariantsで設定できるようになった:tada:

控えめに言って神アップデートです。

以前までは、ボタンのアイコンのあるなしやフォームのエラーメッセージのあるなしなど、「ちょっとした要素のあるなしの違い」をいちいちVariantを分けて作成するか、Instance上で該当部分を非表示にする必要がありました。

しかし、FigmaのアップデートによってレイヤーにオンオフのBooleanを設定できるようになり、こうした「ちょっとした要素のあるなしの違い」が 「ある」状態だけを作成すれば良く なりました!!! :tada::tada::tada:

image.png

使い方

使い方は簡単です。

1.コンポーネントを作成する

まずはオンオフのある要素が「ある」状態のコンポーネントを作成します。

image.png

2. コンポーネントプロパティを作成をする

次にプロパティパネルからコンポーネントプロパティの作成を選択し、「Boolean」を選択します。

image.png

選択するとモーダルが表示されるので、適当な名前をつけてプロパティを作成します。

image.png

3. レイヤーにプロパティを適用する

オンオフしたいレイヤーを選択した状態で、「Apply instance swap propaty」を選択し、先ほど作成したプロパティを選択します。

image.png

4. 完了!!!

これでインスタンスを作成すると、プロパティにトグルボタンが表示され、レイヤーのオンオフができるようになりました!:tada:

image.png

公式のヘルプはこちら

36
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?