Text Style Exporter

About this plugin

# Text Style Exporter

## 概要

Figmaで選択したテキストのスタイルをSASS/CSS形式で出力するプラグインです。フォントサイズ、ウェイト、ファミリー、文字間隔、行高、テキスト配置などのプロパティを、カスタマイズ可能なテンプレートに基づいて出力します。

## 主な機能

### 🎨 テキストスタイル抽出

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

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

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

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

- **行高**: 比率として出力（Auto設定にも対応）

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

### 🔄 Auto Line-Height対応

Figmaで行高が「自動」に設定されている場合でも、テキストボックスの実際の高さから正確なline-height値を計算します。複数行テキストにも対応。

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

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

+text($size(rem), $weight, $family)

letter-spacing: $spacing(em)

line-height: $lineHeight

### 🔧 柔軟な単位変換

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

| 変数 | 対応単位 |

|------|----------|

| `$size` | `px`, `rem`, `unitless` |

| `$weight` | `name`（デフォルト）, `num` |

| `$spacing` | `em`, `%`, `px`, `unitless` |

| `$lineHeight` | `unitless`（デフォルト）, `%`, `px` |

| `$textAlign` | - |

### ⚡ letter-spacing: 0 省略機能

文字間隔が0の場合、letter-spacing行を自動的に省略できます（設定でON/OFF可能）。

### 💾 Font Alias機能

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

- Inter → `$font-primary`

- Helvetica → `$font-secondary`

### ⚙️ Base Font Size設定

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

### 📋 便利なコピー機能

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

### 💾 設定の保存範囲

設定の保存先を選択可能：

- **This file only**: 現在のFigmaファイルにのみ保存

- **All files**: すべてのファイルで共通設定として保存

## 使い方

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

2. プラグインを起動

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

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