色とテキストスタイルのスタイルガイドを一発で生成するFigmaプラグインつくりました
FigmaのColor StylesとText Stylesをそれっぽいスタイルガイドとして生成するプラグインをつくりました。それぞれ別のプラグインで、Colorのほうは Color Styleguide、TextのほうはTypography Styleguideという名前で公開しています。
動作は下記の動画から。
デザインシステムやガイドラインをつくるときに、この手のカタログのようなものを手作業でつくることがそれなりにあるので、それを自動化したく作りました。
利用方法については、Color StylesとText Stylesのあるファイルでプラグインを実行するだけです。実行すると、それぞれ Colors、TypographyというPageを生成します。
このカタログはAuto Layoutで作っているので、あとから好きにレイアウトや順番に変えることができます。また、ひとつひとつのアイテムはComponentのInstanceなので、生成されるMain Componentを変更すれば、お好みの表現にもできます。
それっぽいものをつくりたいときはぜひ活用してみてください。
明日の元気の素になります。