Text Style Exporter

About this plugin

Text Style Exporter

概要

Figmaで選択したテキストのスタイルをSASS/CSS形式で出力するプラグインです。フォントサイズ、ウェイト、ファミ

リー、文字間隔、行高、テキスト配置などのプロパティを、カスタマイズ可能なテンプレートに基づいて出力します。

主な機能

🎨 テキストスタイル抽出

- フォントサイズ: px値を自動的にrem値に変換

- フォントウェイト: 数値（100-900）を名前（thin, normal, bold等）に変換

- フォントファミリー: 使用フォント名を抽出

- 文字間隔: パーセント値をem単位に変換

- 行高: 比率として出力

- テキスト配置: left, center, right, justifyに対応

📝 カスタマイズ可能なテンプレート

独自のSASS/CSSフォーマットを定義できます：

🔧 柔軟な単位変換

各変数で使用する単位を指定可能：

- $size(px) - ピクセル単位

- $size(rem) - rem単位

- $spacing(%) - パーセント単位

- $lineHeight(unitless) - 単位なし

💾 Font Alias機能

フォント名にエイリアスを設定：

- Inter → $font-primary

- Helvetica → $font-secondary

⚙️ Base Font Size設定

1rem = ?px を自由に設定可能（デフォルト: 16px）

📋 便利なコピー機能

- ワンクリックでSASSコードをクリップボードにコピー

- コードブロック右上のアイコンからも素早くコピー可能

使い方

1. Figmaでテキスト要素を選択

2. プラグインを起動

3. 生成されたSASSコードをコピー

4. 必要に応じてテンプレートやエイリアスをカスタマイズ

設定の永続化

すべての設定（テンプレート、Font Alias、Base Font Size）は自動的に保存され、次回起動時も維持されます。