ai-password-manager/docs/figma-quick-start-guide.md

# Figma快速开始指南 - AI密码管理器设计

## 🚀 第一步：创建Figma文件和画板

### 1. 打开Figma并创建文件
1. 在浏览器中访问 [figma.com](https://figma.com)
2. 点击右上角 **"New design file"** 按钮
3. 文件会自动创建并打开

### 2. 重命名文件
1. 点击左上角的 **"Untitled"** 文件名
2. 输入：**"AI密码管理器设计系统"**
3. 按回车确认

### 3. 创建iPhone画板
1. 按键盘 **F** 键（或点击左侧工具栏的Frame图标）
2. 在右侧面板中找到 **"Phone"** 分类
3. 点击 **"iPhone 14"** (390 × 844px)
4. 画板会自动创建在画布中央

### 4. 重命名画板
1. 确保画板被选中（边框显示蓝色）
2. 在右侧面板顶部，将名称改为：**"Splash Screen"**

## 🎨 第二步：创建第一个设计元素

### 方法一：创建矩形（推荐）
1. 按键盘 **R** 键（或点击左侧工具栏的矩形图标）
2. 在画板内拖拽创建一个矩形
3. 矩形会自动被选中（显示蓝色边框和控制点）

### 方法二：创建文本
1. 按键盘 **T** 键（或点击左侧工具栏的文本图标）
2. 在画板内点击任意位置
3. 输入文字：**"AI密码管家"**
4. 按Esc键完成编辑，文本会被选中

### 方法三：创建圆形
1. 按键盘 **O** 键（或点击左侧工具栏的椭圆图标）
2. 按住Shift键并拖拽，创建一个正圆
3. 圆形会自动被选中

## ✅ 第三步：确认元素已选中

### 选中状态的标志：
- 元素周围有**蓝色边框**
- 四个角有**蓝色控制点**
- 右侧面板显示该元素的属性
- 左侧图层面板中该元素名称被高亮

### 如果元素没有被选中：
1. 用鼠标**单击**该元素
2. 或者在左侧图层面板中**点击**元素名称

## 🔧 第四步：验证MCP工具连接

当您完成上述步骤并确保有元素被选中后，我就可以使用Figma MCP工具来：

1. **获取当前设计图像** - 查看您创建的元素
2. **生成React Native代码** - 为设计元素生成对应的代码
3. **分析设计变量** - 获取颜色、字体等设计属性
4. **优化设计** - 根据AI密码管理器的需求调整设计

## 🎯 推荐的开始方式

### 创建启动页面背景：
1. 按 **R** 键创建矩形
2. 调整大小覆盖整个画板 (390×844px)
3. 在右侧面板的Fill区域：
   - 点击颜色方块
   - 选择 **Linear** 渐变
   - 设置渐变角度为 **135度**
   - 第一个颜色：**#667eea** (蓝紫色)
   - 第二个颜色：**#764ba2** (深紫色)

### 添加Logo占位符：
1. 按 **O** 键创建圆形
2. 设置尺寸为 **120×120px**
3. 填充白色 **#FFFFFF**
4. 居中放置在画板中

### 添加标题文字：
1. 按 **T** 键创建文本
2. 输入：**"AI密码管家"**
3. 设置字体大小：**32px**
4. 设置颜色：**白色 #FFFFFF**
5. 居中对齐

## 🚨 常见问题解决

### 问题1：找不到iPhone 14画板
- 按F键后，在右侧面板向下滚动找到"Phone"分类
- 或者手动创建Frame，设置尺寸为390×844px

### 问题2：元素创建后没有被选中
- 用鼠标单击该元素
- 或按V键切换到选择工具，然后点击元素

### 问题3：无法看到渐变选项
- 确保元素被选中
- 在右侧面板的Fill区域，点击颜色方块
- 在弹出的颜色选择器中，点击顶部的渐变图标

### 问题4：MCP工具提示"Nothing is selected"
- 确保在Figma中有元素被选中（显示蓝色边框）
- 刷新浏览器页面重新选择元素
- 确保Figma标签页是当前活跃的标签页

## 📞 准备就绪的信号

当您看到以下情况时，就可以告诉我"已经选中元素"：

✅ Figma中有一个元素被选中（蓝色边框）  
✅ 右侧面板显示该元素的属性  
✅ 左侧图层面板中元素名称被高亮  

然后我就可以使用MCP工具来帮您开始设计AI密码管理器的界面了！

---

**提示**：如果您在任何步骤遇到困难，请告诉我具体在哪一步，我会提供更详细的指导。