# figmaToFlutter

**Repository Path**: geek-on-up/figmaToFlutter

## Basic Information

- **Project Name**: figmaToFlutter
- **Description**: 通过油猴插件，把 Figma 中的样式转成 Flutter 代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-15
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Figma to Flutter 文本转换器

这是一个油猴（Tampermonkey）插件，可以将 Figma 中选中的文本元素属性一键转换为 Flutter Text 控件代码。

## 功能特性

- ✅ 自动提取文本内容
- ✅ 提取字体、字号、字重
- ✅ 提取行高、字间距
- ✅ 提取文本颜色
- ✅ 支持文本大小写转换
- ✅ 一键复制 Flutter 代码
- ✅ 美观的 UI 界面

## 安装步骤

### 1. 安装 Tampermonkey

首先需要在浏览器中安装 Tampermonkey 扩展：

- **Chrome/Edge**: [Chrome Web Store](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo)
- **Firefox**: [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/tampermonkey/)
- **Safari**: [Safari Extension](https://apps.apple.com/app/tampermonkey/id1482490089)

### 2. 安装脚本

1. 打开 Tampermonkey 管理面板（点击浏览器工具栏中的 Tampermonkey 图标 → "管理面板"）
2. 点击 "新建脚本"
3. 删除默认代码
4. 复制 `figma-to-flutter.user.js` 文件中的所有内容
5. 粘贴到编辑器中
6. 按 `Ctrl+S` (Windows/Linux) 或 `Cmd+S` (Mac) 保存

### 3. 使用

1. 打开 [Figma](https://www.figma.com)
2. 在 Figma 中选中一个文本元素
3. 查看右侧属性面板，确认文本属性已显示
4. 点击页面右上角的 **"复制 Flutter 代码"** 按钮
5. 代码会自动复制到剪贴板
6. 在 Flutter 项目中粘贴使用

## 生成的代码示例

根据图片中的 "Completed" 文本，生成的 Flutter 代码类似：

```dart
Text(
  'Completed',
  style: TextStyle(
    fontFamily: 'Poppins',
    fontSize: 24,
    fontWeight: FontWeight.w400,
    height: 1.08,
    letterSpacing: 0.13,
    color: Color(0xFFD6A783),
  ),
)
```

## 支持的属性

- **文本内容**: 从 Content 部分提取
- **字体**: Font 属性
- **字号**: Size 属性（px）
- **字重**: Weight 属性（100-900）
- **行高**: Line height 属性（自动转换为 height 比例）
- **字间距**: Letter spacing 属性（px）
- **颜色**: 从 Colors 部分提取 Hex 值
- **文本大小写**: Case 属性（Title case, Uppercase, Lowercase 等）

## 注意事项

1. **需要选中文本元素**: 确保在 Figma 中选中了文本元素，右侧属性面板显示了文本属性
2. **属性面板可见**: 右侧属性面板需要打开并显示文本属性
3. **浏览器兼容性**: 支持所有现代浏览器（Chrome, Firefox, Edge, Safari）
4. **Figma 更新**: 如果 Figma 更新了界面结构，可能需要更新脚本的选择器

## 故障排除

### 问题：点击按钮没有反应

**解决方案**:
- 确保已选中文本元素
- 检查浏览器控制台是否有错误（F12 打开开发者工具）
- 尝试刷新页面重新加载脚本

### 问题：提取的属性不准确

**解决方案**:
- 确保右侧属性面板完全展开
- 尝试先点击文本元素，等待属性面板加载完成
- 如果问题持续，可以手动检查属性面板中的值

### 问题：颜色格式不正确

**解决方案**:
- 脚本会自动处理颜色格式
- 如果遇到问题，可以手动修改生成的代码中的颜色值

## 开发说明

脚本使用纯 JavaScript 编写，通过 DOM 操作提取 Figma 属性面板中的信息。主要功能：

1. **属性提取**: 通过多种方法尝试提取文本属性（DOM 解析、样式计算等）
2. **代码生成**: 将提取的属性转换为标准的 Flutter Text 控件代码
3. **一键复制**: 使用 Clipboard API 将代码复制到剪贴板

## 更新日志

### v1.0.0
- 初始版本
- 支持基本的文本属性提取
- 支持 Flutter Text 代码生成
- 添加一键复制功能

## 贡献

欢迎提交 Issue 和 Pull Request！

## 许可证

MIT License