FigmaのVariants機能を利用したプロトタイピングと実装

はじめに 今年に入ってからデザインツールの「Figma」を使い始めました。UIデザインのツールとしては他に「Adobe XD」や「Sketch」等がありますが、Figma の特徴としてブラウザ上で動作することや高度な共同編集機能などが挙げられます。UIデザインをする上でもたくさんの便利な機能がありますが、今回はその中で Variants 機能を利用したコンポーネントの作成と、作成したプロトタイプを元に Vue.js と Tailwind CSS を使用して実装を行った内容について書いてみようと思います。 Variants機能 Variants 機能はコンポーネントの複数の状態をまとめて管理できる Figma の機能です。 Variants 機能を利用する利点として、 コンポーネントが整理されて Assets パネルがスッキリする パネル操作から簡単にコンポーネントの状態を切り替えることがで