表題の通り、というわけにもいかずこれがなかなか形容し難いプラグインを作りました。
いわゆる「CSSを書くときにFigmaからテキストスタイルをプロパティごとちまちまとコピーするのめんどくさい！」を解消するプラグインを作りました。
それがこのText Style Exporterです。
Text Style Exporter | Figma
Text Style Exporter 概要 Figmaで選択したテキストのスタイルをSASS/CSS形式で出力するプラグインです。フォントサイズ、ウェイト、ファミ リー、文字間隔、行高、テキスト配置などのプロパティを、カスタマイズ可能なテンプレートに基づいて出力します。 主な機能 🎨 テキストスタイル抽出 - フォントサイズ: px値を自動的にrem値に変換 - フォントウェイト: 数値（100-900）を名前（thin, normal, bold等）に変換 - フォントファミリー: 使用フォント名を抽出 - 文字間隔: パーセント値をem単位に変換 - 行高: 比率として出...
使い方
使い方は簡単です。
テキストを選択し⌘+Pでパネルを開いたら「Text Style Exporter」と検索してください。
このようなパネルが開くかと思います。デフォルトでは
+text(16rem, regular, $family)
line-height: 2が結果として入っているかと思います。これは私がいつも使うテキストスタイルのmixinなのですが、これを改変したい場合
Templateセクションのテキストエリアにある文字列を変えることでコピーできる結果を変えることができるかと思います。
例えば上記のようなテキストスタイルがFigmaのタイポグラフィパネルに入っているかと思います。
Templateセクションでは以下の
+text($size(rem), $weight, $family)
letter-spacing: $spacing(em)
line-height: $lineHeightと入っているかと思いますが、これを
@include font($size(px), $weight, $family);とすると結果はお察しの通り
@include font(16px, regular, 'Zen Kaku Gothic New');と出力させることができます。そうです。つまりCSSでもScssでもSASSでもStylusでも、好きな書き方をサポートしてクリップボードにコピーできます。
使用できるプロパティは以下の通りです。
1. $size - フォントサイズ
- 変換: px → rem/px/unitless
- 単位: $size(rem), $size(px), $size(unitless)
2. $weight - フォントウェイト
- 変換: 数値 → 文字列（400 → "normal", 700 → "bold"）
- 単位: なし（文字列出力）
3. $family - フォントファミリー
- 変換: エイリアス対応（Inter → $font-primary など）
- 単位: なし（文字列出力）
4. $spacing - 文字間隔
- 変換: Figma値 → em/px/%/unitless
- 単位: $spacing(em), $spacing(px), $spacing(%), $spacing(unitless)
- 特殊機能: 0値スキップ機能あり
5. $lineHeight - 行間
- 変換: パーセント → 小数値、ピクセル → 比率計算
- 単位: $lineHeight(unitless), $lineHeight(%), $lineHeight(px)
6. $textAlign - テキスト配置
- 変換: Figma値 → CSS値
- CENTER → center
- RIGHT → right
- JUSTIFIED → justify
- その他 → left
- 単位: なし（文字列出力）またフォントファミリーについてもエイリアス機能を搭載しています。
Font Aliasセクションにあるパネルに、任意のフォント名のエイリアスを登録することで出力結果に反映させることができます。
なぜこのプラグインを作ったのか
正直、デザイン横目で「ああこの値はこれねﾎﾟﾁﾎﾟﾁｶﾀｶﾀ」する手間がめんどくさいと感じていたからです。感じ続けてはや8年くらい経ってます。
もっと怠惰にヒューマンエラーをなくしたいという思いで作りました。
初めてFigmaのプラグインを作ったのですが、この時代AIがあればなんとかなりますね。
みなさんぜひ使ってみてください。
プラグインにハート押してくれたり、コメントで追加の仕様とか言ってくれると個人制作の励みになります。