Figma复制品-交互式设计实现
Figma设计的像素完美实现，具有交互式组件、流畅的动画和现代UI模式。
✨ 特性
- 🎨 像素完美设计 来自Figma
- 🧭 交互式罗盘 点击旋转动画
- 📝 记录/SB组件 采用渐变风格
- 🌧️ 动画天气组件 像素化雨滴
- 🎯 交互式CTA按钮 具有悬停效果和弹出模式
- 📱 响应式设计 （桌面和移动视图）
- ✨ 流畅的动画 和过渡
- 🎭 现代UI模式 具有柔和的阴影和模糊效果
- 🪟 浏览器窗口模型 带有Safari风格的chrome
🛠️ 技术栈
- 反应 -UI框架
- 维特 -构建工具和开发服务器
- 顺风CSS -实用性优先的造型
- TypeScript -类型安全
🚀 入门指南
先决条件
- Node.js（v16或更高版本）
- npm或纱线
安装
- 克隆存储库：
git clone https://github.com/YOUR_USERNAME/figma-replica.git
cd figma-replica- 安装依赖项：
npm install- 启动开发服务器：
npm run dev- 打开浏览器并导航到
http://localhost:5173
📜 可用脚本
npm run dev-使用热重新加载启动开发服务器npm run build-为生产而建npm run preview-在本地预览生产构建npm run sync-从图中同步设计数据（需要图_API_KEY）
📁 项目结构
figma-replica/
├── src/
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles & Tailwind imports
├── public/ # Static assets (SVG exports from Figma)
│ ├── 111-586.svg # Compass component SVG
│ ├── 85-373.svg # SB component SVG
│ └── 85-374.svg # Weather component SVG
├── .agent/
│ └── workflows/ # Workflow documentation
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── README.md🎮 交互式组件
🧭 指南针组件
- 单击以触发旋转动画
- 具有主方向（N、S、E、W）的精确Figma设计
- 绿色圆形针，旋转平稳
- 微妙的阴影，增加深度
📝 记录/SB组件
- 渐变背景（灰色到白色）
- 自定义字体间排版
- 白色边框口音
🌧️ 天气部分
- 使用绿色圆圈的像素化云设计
- 无限循环的动态雨滴
- 交错的动画延迟以获得自然效果
🎯 大CTA按钮
- 正常状态：亮石灰绿（#C7FF29）
- 悬浮状态:
- 颜色变为浅绿色（#E2FF91） - 按钮升起，阴影增加 - 平滑过渡
- 点击：打开带有幽默信息的模态弹出窗口
- 像素完美的Figma实现
🪟 模态弹出
- 干净、现代的圆角设计
- 背景模糊效果
- 动画中的平滑反弹
- 单击外部或X按钮关闭
🎨 设计细节
- 调色板:
- 主要的，重要的 #C7FF29 （石灰绿） - 背景 #F3F7FF （浅蓝色） - 口音： #1A1D1C （接近黑色）
- 排版：跨字体系列
- 动画：自定义关键帧动画，实现流畅交互
- 阴影：柔和的阴影（8px模糊，8%不透明度）
🌐 浏览器支持
- Chrome（最新）
- Firefox（最新）
- Safari（最新）
- Edge（最新）
📝 许可证
麻省理工学院
👤 作者
内置于❤️ 使用Figma设计规范