以前是脑子里想布局，直接让 AI 写代码。以后可以先用 Figma 拖拽出一个样板图，再用 anima 插件直接生成 vue 代码 <!-- more --> Figma 作为一款专门针对 UI 界面开发的设计工具 可以完成界面、网页、管理系统、H5 等题材内容设计 figma -> code [Official Vuetify 3 Figma Library (Community) – Figma](https://www.figma.com/design/JK1zWdpQyjn2H1LUr0kaiA/Official-Vuetify-3-Figma-Library-(Community)?node-id=1302-3709&m=dev) | 视频编号 | [零基础学 Figma 01 - 苹果商店页设计_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1fg411G7cs?p=2&vd_source=dea414ee2d39e74f662ceec0edffdf24) | | | ---- | ----------------------------------------------------------------------------------------------------------------------------------- | --- | | P1 | 最新先导片 | | | P2 | 苹果商店页设计 | 1 | | P3 | 零基础学 Figma 02 - 线性图标设计 | | | P4 | 零基础学 Figma 03 - 面性图标设计 | | | P5 | 零基础学 Figma 04 - 玻璃拟态页设计 | | | P6 | 零基础学 Figma 05 - 样式组件功能入门 | 交互 | | P7 | 零基础学 figma 06 - 连线动画效果说明 | | | P8 | 零基础学 Figma 07 - 参考线和栅格应用 | | | P9 | 零基础学 Figma 08 - 响应式网页设计 | | | P10 | 零基础学 Figma 09 - B 端表格页设计 | | | P11 | 零基础学 Figma 10 - B 端规范搭建 | | Figma 是一个强大的、基于云端的设计和原型制作工具。它主要用于用户界面（UI）和用户体验（UX）设计，但其功能远不止于此。以下是 Figma 的主要用途和特点： - UI/UX 设计：用于创建网站、移动应用和其他数字产品的用户界面设计。 - 协作设计：多人可以同时在同一个文件上工作，实时查看彼此的更改。 - 原型制作：可以为设计添加交互性，创建可点击的原型。 - 设计系统管理：帮助团队创建和维护一致的设计系统和组件库。 - 版本控制：自动保存设计的不同版本，方便回溯和比较。 - 插件生态系统：有丰富的插件可以扩展 Figma 的功能。 - 跨平台：基于浏览器，可以在任何操作系统上使用。 - 矢量编辑：提供强大的矢量编辑工具。 - 代码生成：可以导出 CSS、SVG 和其他开发相关的代码。 - 设计手 off：方便设计师与开发人员之间的交接。 - 演示模式：可以直接在 Figma 中进行设计演示。