Framer是一款现代化的网页设计工具，可以帮助开发者快速创建交互式原型和动画效果，也可用于UI/UX设计和网站建设，并且无需编写代码，简直是技术小白的福音！本文将主要介绍Framer软件的功能特点和一些基本的使用方法。
Framer官网地址：点击访问
一、Framer功能和特点介绍
1、原型功能丰富
Framer提供了丰富的原型功能，可用来制作丰富的交互和动画功能。例如支持自由的添加各种触发事件、动画和过渡效果等，能够快速实现生动、流程、高度可定制的交互效果。
2、支持AI生成Web网页
Framer利用AI生成技术，根据用户的描述生成网页初始版本。用户提供的细节越多，生成的网页效果就越好。
3、自由形式画布
Framer可以在自由格式的画布上设计网站，例如添加动画和交互元素。另外设计界面、图层编辑、代码编辑器和交互预览等方敏，Framer和其他主流的设计工具（如 Sketch、Figma）和开发工具（如 React、Angular）实现了无缝集成，方便设计和开发团队之间的协作，提高了工作效率。
4、支持代码自定义
Framer可以通过编写代码来自定义设计元素和动画效果，因此能够更灵活地实现自己的设计想法，提高设计质量。
5、跨平台使用
Framer还支持Windows、macOS和Linux等多个操作系统，因此可以在不同的平台上使用Framer。
6、搜索引擎优化
Framer随时一个网页设计工具，但也支持SEO和性能优化，为上线前后节省了大量的时间。
二、Framer组成部分
1、图片导出工具
从Photoshop导出设计图实际上是使用了Adobe ExtendScript脚本。Adobe ExtendScript脚本语言可以操纵photoshop执行一些自动化操作。Mac下作者用Framer.app包装了脚本代码，windows下则直接提供了脚本 http://www.framerjs.com/static/downloads/FramerPS.jsx.zip。导出工具不仅导出了图片，还生成了一个上面目录结构的完整工程，用浏览器打开index.html就可以了。
在原型设计的过程中，可能会需要多次导出图片，而导出工具不会覆盖app.js文件，所以不用担心你写的代码会被覆盖。它只会在没有文件的情况下才自动生成。
2、JS类库
JS类库提供了View(视图)、animation(动态特效)、event(事件绑定)等类，可供使用者调用。
3、app.js
Framer默认生成app.js文件。在使用Framer的过程中，除了用Photoshop设计原型图之外，这里也是花时间最多的地方。前面准备的素材就看你怎么组织了。视图的创建、切换、动态特效、手势、事件绑定，都可以在这个文件里完成。
三、Framer定价
购买地址：Framer官网
1、个人版
2、商业版
四、Framer使用步骤
1、用Photoshop软件设计原型图；
2、用Framer.app从Photoshop中导出设计图；
3、在app.js里写视图展示及交互代码，可以加各种特效；
4、用浏览器打开index.html文件就可以查看和调试了。
Framer项目的代码结构是这样的：
/
app.js //【重要】用来写视图和交互代码
framer/ //Framerjs的框架，app.js里用到的功能都是它提供的
framer.js //framer核心文件
framerps.js //根据views.app.js生成frame对象
views.app.js //根据psd文件的结构导出的文件，用来记录图片属性和图层关系(用json格式表示)，app.js中要用到
images/ //从photoshop导出的图片都在这里
index.html //预览时的首页-
广告合作
-
QQ群号：707632017
