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

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

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

1. 打开Figma并创建文件

1. 在浏览器中访问 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密码管理器的界面了！

---

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