解決済み
FigmaからCSSへの変換方法
Figmaでデザインしたコンポーネントを、Claude Codeでコードに変換したいです。
現在の問題:
- Figmaの値をそのままコピペしても意図通りにならない
- レイアウトの再現が難しい
- Auto Layoutとflexboxの対応
効率的なワークフローがあれば教えてください。
現在の問題:
- Figmaの値をそのままコピペしても意図通りにならない
- レイアウトの再現が難しい
- Auto Layoutとflexboxの対応
効率的なワークフローがあれば教えてください。
回答 (1)
ベストアンサー
CSSの生成精度を上げるコツをいくつか共有します。
**1. 具体的な数値を含める**
❌ 「いい感じのボタン」
✅ 「角丸8px、パディング12px 24px、フォントサイズ14px」
**2. Figmaの値をそのまま伝える**
```
以下の値でTailwind CSSを書いてください：
- 背景色: #3B82F6
- テキスト色: #FFFFFF
- 角丸: 8px
- padding: 12px 24px
- ホバー時: 背景色を10%暗く
```
**3. コンポーネントライブラリを指定**
「shadcn/ui風のボタンコンポーネント」のように既存の有名ライブラリを参照させると、品質が安定します。
**1. 具体的な数値を含める**
❌ 「いい感じのボタン」
✅ 「角丸8px、パディング12px 24px、フォントサイズ14px」
**2. Figmaの値をそのまま伝える**
```
以下の値でTailwind CSSを書いてください：
- 背景色: #3B82F6
- テキスト色: #FFFFFF
- 角丸: 8px
- padding: 12px 24px
- ホバー時: 背景色を10%暗く
```
**3. コンポーネントライブラリを指定**
「shadcn/ui風のボタンコンポーネント」のように既存の有名ライブラリを参照させると、品質が安定します。
回答を投稿するにはログインが必要です