1 刚开始学framer的时候别急着搞复杂交互，先搞明白它那个组件树，跟React的思路差不多，一个页面就是一个树，叶子节点是基础元素，根节点是整个页面。

2 我踩过最大的坑是忘了framer里所有动画都靠AnimatePresence和motion.div，不加Presence的话元素离开就没动画，贼尴尬。

3 想做拖拽交互？直接给元素加个drag属性就行，framer自带手势识别，省了自己写touch那一大堆恶心代码。

4 说到状态管理，framer的useMotionValue和useSpring挺香的，比用useState自己控制动画流畅太多，而且不用操心重绘。

5 教程里那些花里胡哨的粒子效果其实底层就是canvas，framer只是封装了基础API，真想玩炫酷的还得自己写点原生canvas。

6 新手最容易犯的错是死磕不协，其实framer的自动布局跟Flexbox一模一样，搞清楚flexDirection、alignItems、justifyContent这三兄弟，页面布局基本通吃。

7 我是真受不了那些教程里把framer吹得神乎其神，说到底就是个带可视化编辑器的React组件库，上手快是真的，但复杂场景还得会写代码。

8 想快速出效果的话，直接抄framer官方示例库里的代码，改改参数就能用，比从头写省一半时间。

9 注意framer的版本，老版本framer X和新版本framer在API上差别挺大，我见过有人照着老教程写了个寂寞，代码全报错。

10 最后说一点，framer的变体（Variants）功能是神器，一个对象定义多个状态，用animate属性切换，做按钮点击反馈、菜单展开折叠简直不要太爽。

相关问答

- framer和Figma哪个更适合做交互原型？

framer更偏向代码交互，能实现高保真交互逻辑，Figma更适合静态设计和团队协作，看你需求。

- 没有编程基础能学会framer吗？

基本操作可以，拖拽组件、改属性没问题，但要做复杂动画或自定义交互，最好懂点Javascript和React基础。

- framer的项目能导出成HTML吗？

能，直接导出成静态页面，也能导出React代码，方便前端开发直接复用。

- 为什么我拖拽时元素不跟着鼠标走？

检查一下drag属性是不是绑在父级上了，或者元素本身有position:fixed导致偏移，给父容器加个overflow:hidden试试。

- 教程里那些交互动效能用在实际项目里吗？

大部分可以，但注意性能，比如大量粒子或频繁重绘的动画，真机可能卡顿，建议用useMotionValue控制频率。