asoview! TECH BLOG

アソビュー株式会社のテックブログ

FigmaのVariants機能ってなに?便利なんですか?

Variants機能って?

Buttonの種類
  • 大きさ
  • アクション
  • アイコンのあり、なし
Variants機能を使用したButtonのコンポーネント

Variants機能の使う手順

1. 命名規則をしっかりと行う

Name / Type / Size / State / Icon
  • Name: Button ← ボタンのVariants名
  • Type: Primary, Secondary, Positive, Critical, Text
  • Size: TinySmallMediumLarge
  • StateDefaultHoverActive
  • Icon: TrueFalse(または、ON, OFF)

2. 各状態のコンポーネントをつくる

3. 全種のコンポーネントを選択し、Combine as Variantsをする

4. プロパティの名前をつけていく

余談

qiita.com

 

最後に

www.wantedly.com