Figma AI UI Kit - 赛博风格组件库 ​

组件库介绍 ​

专为现代 Web/App 设计的赛博朋克风格 UI 组件库，包含 200+ 精美组件。

核心特性 ​

• 🎨 完整的设计系统
• 🔧 Auto Layout 自动布局
• 🌈 深色/浅色双主题
• ⚡ 组件变体功能
• 📱 响应式网格系统

组件清单 ​

基础组件 (40+) ​

• Buttons - 按钮 (10种样式)
• Inputs - 输入框 (表单控件)
• Cards - 卡片 (数据展示)
• Navigation - 导航栏
• Typography - 排版系统

高级组件 (80+) ​

• Dashboard - 仪表盘模块
• Charts - 数据图表
• Tables - 表格组件
• Modals - 弹窗对话框
• Forms - 表单页面

页面模板 (20+) ​

• Landing Page - 落地页
• Dashboard - 后台管理
• Profile - 用户中心
• Settings - 设置页面
• Pricing - 价格页面

图标库 (60+) ​

• 赛博朋克风格图标集
• 支持多种尺寸
• 可自定义颜色

下载说明 ​

Figma 社区文件：在线使用

本地副本：下载 .fig

使用教程 ​

第一步：复制到你的文件 ​

1. 打开 Figma 社区链接
2. 点击"Duplicate"复制到你的账户
3. 文件会出现在你的 Drafts 中

第二步：启用组件库 ​

1. 打开你的设计文件
2. 点击 Assets 面板
3. 点击书籍图标 → Enable library
4. 选择 "AI UI Kit"

第三步：使用组件 ​

1. 在 Assets 面板搜索组件
2. 拖拽到画布即可使用
3. 在右侧面板修改组件属性

设计规范 ​

颜色系统 ​

字体系统 ​

• 标题：Inter (700-900)
• 正文：Inter (400-600)
• 等宽：JetBrains Mono

间距系统 ​

基于 8px 网格：4, 8, 12, 16, 24, 32, 48, 64

自定义指南 ​

修改主题色 ​

1. 进入 🎨 Styles 页面
2. 选择 Color Styles
3. 双击颜色并修改 Hex 值
4. 所有组件自动更新

创建新组件 ​

1. 参考现有组件结构
2. 使用 Auto Layout 布局
3. 创建组件变体
4. 添加到组件库

应用案例 ​

• ✅ SaaS 产品后台
• ✅ 数据可视化平台
• ✅ AI 工具界面
• ✅ Web3 DApp

技术支持 ​

遇到问题？

• 📖 查看 使用文档
• 💬 加入 Discord 社区
• 📧 邮件联系：support@example.com

← 返回创作资源