Figmaでボタン作ったらVariantsで管理するといいかんじ

Figmaにはボタンなどのコンポーネントをまとめて管理できるVariantsと呼ばれる機能があるのですが
これを実際に使ってみたところとっても便利だったので覚書として書きました。
ちなみに昨年追加された機能なのでちょっと今更感ありますが、ご参考になればと思います。

Variantsってなに?

Webデザインでよく使うアイテムは大体コンポーネント化して使っていると思いますが、
その中でもボタンやリストなど「ぱっと見同じデザインだけど色やアイコンの有無でバリエーションがあるもの」
をひとつのグループにして管理できるよ!というのがVariantsです。

やってみよう

まずはボタンのコンポーネントを作成します。
Variantsは複数管理の機能ですので、コンポーネントを2つ以上つくり、コンポーネント化しておきます。


例として赤と青のボタンを作りました。

次はコンポーネントに名前をつけます。
名前をつける際は、ボタンのデザイン規則を意識してつけます。

今回つくったのは赤いボタンと青いボタンなので、
それぞれButton / Red、Button / Blue と付けました。規則は/で区切りましょう。

名前を付け終わったら、
Variantで管理したいコンポーネントをすべて選択し、Conbine as variantsを押します。

これでVariants化できました。

ちゃんとVariants化できたか確認してみましょう。

配置したボタンを選択すると右メニューに[Property1]が追加されてます。
(この名称はVariantsのところから後で変更できます)

このプルダウンを選択すると…

ボタンを切り替えることができました!👏

これを活用すれば、たくさんのデザインをVariantsで管理できます。

ちなみにドロップダウンではなくスイッチで切り替えもできます。

スイッチ切り替えにしたい場合は名前をつける際にon/offまたはtrue/falseにしましょう。
私はアイコンのあり/なしで使ってます。

[Variants]は使えるシーンがちょっと限られる機能ですが、
便利ですのでぜひ使ってみてください。

Adobe XDが最近「ヘッダーを固定」できるようになってた話

Adode XDは日々成長する子なので毎月アップデートがあるのですが
そのアプデ内容を公式ブログ以外あまり触れてないのでは…?
という気がするので、またAdobe XDのこと書きます!!!!

先月6月19日に界隈の一部で”神アプデ”と称される、
とある機能が実装されました。
それは『オブジェクトの位置を固定』することができる機能です。

これによりプレビューやウェブ共有した状態でスクロールしても
ヘッダーやフッター、背景画像などが動かないよう固定でき、
よりサイトイメージがつかみやすくなるそうですよ!

これも使い方はすごく簡単で

  • 固定したいオブジェクトを選択する
    (ロゴや装飾など細かなパーツがある場合は、あらかじめ1つにまとめてグループ化しておくと◎)
  • 右メニュー部分にある「位置を固定」にチェック

これだけで固定ヘッダーの完成!!!!アラマァ〜〜簡単!!
あとはプレビューして動作を確認して、オワリッ!!

ただし固定するときの注意点ですが、スクロールしたときの重なりは
左メニューに表示されてる「レイヤーの順番」で決まるので
ヘッダーレイヤーより上にメインコンテンツレイヤーがあると
スクロールした時にヘッダーをさっくり貫通してしまうので気をつけましょう

↓「ヘッダー」と「ページ上部へジャンプする矢印ボタン」と「背景画像」を固定してパララックスもどきを作りました。
ヘッダーと矢印ボタンレイヤーは上に、背景画像レイヤーは下に置いてます。

これで先方に「本番だとこの部分は動かないようになってます」なんていちいち説明しなくてもオッケ〜〜!!!
よりリアリティが増したサイトデザインに先方もニッコリ!!
打ち合わせもトントン拍子で進んで早く家に帰れる!!

みんなもAdobe XDで最高の夏、手に入れようぜ!!

Adobe XDで楽にそれっぽいパターンを敷きたいときのメモ

白を基調としたシンプルなサイトデザインにしたはいいものの、
なんとなく間延びしてるというか寂しい気がするし余白を埋めたくて
ちょっとした背景パターンを敷きたい時ありますね?ね?

そんな時にAdobeXDの機能のひとつ「リピートグリッド」を使って
背景パターンを敷き詰めるとマァ〜便利!っていう以下、覚書です

リピートグリッド とは?
任意のオブジェクトをすきなだけ繰り返せる便利な機能
コロコロスタンプみたいな感じ(小学生並みの例え)

使い方はとても簡単
- 楕円形ツールを使いフィールドに1pxの丸をドロー
- 右のリピートグリッドをクリックしてターンエンド

あとはパターンを敷きたいエリアを伸ばすだけでドット罫線が敷けます アラ〜簡単!

ドットの間をクリックすると縦・横それぞれ間隔調整ができるので
間隔を狭めて細かなパターンにもできますし、
エリアの縦幅と間隔を狭めて横にぐいっと引けば
区切りによくある点線ラインとしても活用できます

ただ、ドットや斜線などのかんたんなパターンはXD上でつくれますが
アラベスク模様など図形として複雑なパターンを敷きたいときは
illustratorなどでつくってからXD上に持って来てリピートさせたほうがいいと思います
XDにもベジェ曲線ツールはありますが、illustratorのように図を描くのに特化はしていないので…