从零开始玩转Framer：新手也能轻松建出漂亮网站
说到做网站，很多人第一反应就是头疼——写代码太累，WordPress后台又太复杂，光是装主题和插件就能折腾一整天。但今天要聊的 Framer 完全不一样，它把建网站这件事变得跟画画一样直观。你只需要打开浏览器，拖拖拽拽，一个像模像样的网站就出来了。最关键的是，设计完直接就能上线，不是那种只能看的原型图。
Framer是一款集设计、动效、发布于一体的无代码网站搭建工具。操作界面跟 Figma 很像，对用过设计软件的人来说基本零门槛，就算你从来没碰过设计工具，花半天时间也能上手。
第一步：注册账号，开始你的第一个项目
注册特别简单。打开浏览器，访问 framer.com，点击右上角的“Sign Up”，用邮箱或者 Google 账号都能注册。Framer 完全在浏览器里运行，不需要下载任何软件，这点对电脑配置不高的朋友特别友好。
免费版就能开始建站了。虽然发布之后网站底部会带一个小小的“Made in Framer”标记，每个月也有限制访客量，但拿来学习、做个人作品集或者给朋友展示一下项目，完全够用了。
登录之后你会看到 Dashboard 面板，点击蓝色的“New Project”按钮新建项目。这时候有两种选择：一种是空白画布，适合那种心里已经有完整设计想法、想从头开始自由发挥的朋友；另一种是从模板库里挑一个现成的模板。我特别建议新手先从模板开始——模板库里什么类型都有，个人作品集、品牌官网、产品落地页、活动页面……选一个跟你想要的样子最接近的模板，然后替换里面的图片和文字，改改配色，一个像样的网站就出来了。而且模板本身就带着完整的设计结构和交互逻辑，一边改一边学，比从零开始摸索快得多。
第二步：熟悉 Framer 编辑器的三个核心区域
新建项目之后，你会看到一个很干净的操作界面。别被一堆图标吓到，Framer 编辑器其实就分成三个主要部分，弄明白它们在哪、干什么用的，后面就顺了。
画布（Canvas）：就是中间那一大片白色区域。所有设计都在这上面完成，往里面放文字、图片、按钮，调整它们的位置和大小，你看到什么样子，最后网站就是什么样子。这里有个很重要的点——你在画布里做的一切，就是真实的网站页面，不是效果图，也不是原型。
图层面板（Layers Panel）：在左边，显示当前页面所有元素的层级结构。每个图片、每段文字、每个按钮都能在这里找到。刚开始可能觉得图层没什么用，但等你页面内容多起来之后，图层面板就像一张地图，能帮你快速定位到想改的那个元素。
属性面板（Properties Panel）：在右边，这是最常用的地方。选中画布上的任何一个元素，右边就会出现一堆可以调整的选项——改颜色、改大小、改字体、加阴影、加圆角……相当于不用写一行 CSS 代码就能给网页上样式。
花五分钟分别点一点这些面板，试试看选中不同元素时右边属性面板的变化，你的 Framer 学习之路就开了个好头。
布局核心：Stacks 和尺寸模式，彻底搞懂 Framer 的排列逻辑
布局是所有网站设计的基础。不管你想做个人博客、产品介绍页还是公司官网，如果布局这块没弄明白，后面做动效、加多页面内容都会很吃力。所以这一节不讲花里胡哨的东西，把 Framer 最基础的布局逻辑讲透。
Stacks 是什么，为什么它是 Framer 的灵魂
Stacks 是 Framer 里最常用也是最重要的布局工具。你可以把它理解成一个“自动整理盒子”——盒子里的所有元素会自动按行排列或者按列排列，而且元素之间的间距是统一控制的。这其实就是前端开发里 Flexbox 的可视化版本，但不用写一行代码，拖一拖、点一点就能实现。
给你举个特别实际的例子。你想在网页顶部做一个导航栏，左边放 Logo，中间放几个导航链接（比如“首页”“关于”“服务”“联系”），右边放一个“立即咨询”的按钮。传统做法你得一个一个拖，还要费劲对齐。但在 Framer 里，你只需要画一个大的 Frame 作为容器，把左边部分、中间部分、右边部分三个东西放进去，然后打开 Auto-layout（自动布局），设置一下元素之间的间距和对齐方式，几秒钟导航栏就做好了。
Auto-layout 还有一个特别省心的特点：你往 Stacks 里添加新元素或者删掉某个元素时，其他元素会自动重新排列，不需要你手动调整位置。比如你突然想在导航栏里加一个“作品展示”的链接，拖进去就行，右边的按钮会自动往旁边让一让，不会重叠也不会乱跑。
搞懂三种尺寸模式：Fill、Fixed、Relative
每个放在画布上的元素，在 Framer 里都有三种尺寸模式可以选。理解这三个模式的用法，是做出响应式网站的关键。
Fill（填充）：元素会占满父容器里所有能用的空间。这通常是用在容器和背景区块上——比如一个栏目的背景框，设为 Fill 之后，不管父容器多宽，它都会自动撑满。
Fixed（固定）：元素有固定的大小，不会因为父容器或者屏幕尺寸变化而改变。举个例子，一个按钮的宽度你希望在任何屏幕上都保持某个具体数值，那就用 Fixed。
Relative（相对）：元素尺寸是父容器的某个比例。比如想让一张图片占据父容器宽度的 50%，那就选 Relative，然后填 50%。
很多刚开始用 Framer 的朋友容易犯一个错误——不管什么元素都一股脑用 Fixed。结果在手机屏幕上一看，所有东西都挤在一起或者超出边界了。其实大部分情况下，Fill 和 Relative 才是更明智的选择。
响应式设计实操：让网站在手机上也好看
超过六成的网页流量现在都来自手机和平板。这意味着如果你的网站在手机上看起来乱七八糟，就已经把一大半访问者拒之门外了。而且搜索引擎现在也更看重移动端的表现。所以响应式设计真的不是可选项，是必选项。
Framer 的断点系统：先做桌面版，再适配小屏幕
Framer 采用的是桌面优先的设计思路，默认断点宽度是 1200 像素。也就是说，你先在电脑屏幕上把网站设计得漂漂亮亮的，然后再逐步调整它在平板和手机上的样子。
这个逻辑挺合理的——桌面布局通常比较复杂，元素多、结构丰富，先搞定最复杂的版本，后面再针对小屏幕做简化，比反过来做要轻松很多。
Framer 默认提供了三个断点：Desktop（桌面，1200 像素以上）、Tablet（平板，810 到 1199 像素）、Mobile（手机，390 到 809 像素）。你可以在编辑器顶部工具栏里切换这几个断点，然后在每个断点下分别调整元素的位置、大小、字体，甚至可以决定某些内容在大屏幕上显示、小屏幕上隐藏。
这里有个很重要的概念叫“继承”：你在桌面断点下做的所有更改，会自动传递到平板和手机断点上，除非你在小断点里手动改掉了它。举个例子，如果你在桌面断点里把某个按钮的背景色改成了深蓝色，那平板和手机上的按钮也会自动变成深蓝色，不需要你重新改一遍。
移动端导航栏怎么做才顺手
导航栏在手机上的适配，是很多新手最头疼的问题。一个在桌面上横着排开的导航菜单（首页、关于、服务、博客、联系……），到了小小的手机屏幕上肯定放不下，需要变成那种点击三条横线弹出来的“汉堡菜单”。
正确做法是这样的：先把整个导航栏做成一个 Component（组件），然后在这个 Component 里面创建两个 Variants（变体）——一个是桌面版本，导航链接横排显示；另一个是移动版本，导航链接藏到汉堡菜单里，平时看不到。接着在手机断点里加一个交互规则：点击汉堡图标的时候，切换到移动版本的变体。
这样做的好处是，不需要写任何代码，你的导航栏就能在桌面和手机之间无缝切换。而且因为用的是 Component，你只要改一次导航栏的样式（比如换个背景色或者改改 Logo 大小），所有页面里用到的导航栏都会同步更新，不用一页一页去改。
Framer AI 和动画动效：让你的网站活起来
用 AI 一句话生成整个网站
Framer 最让人惊艳的功能可能就是 AI 建站了。你不需要懂设计、不用写代码，甚至不用想布局——只要输入一段文字描述，AI 就能自动帮你生成一个完整的网站，配色、字体、配图全都给你安排明白。
具体怎么操作呢？新建项目的时候，选择“Start with AI”或者“Create with AI”，然后弹出一个对话框，你在里面输入想做什么样的网站。比如你写：“帮我做一个面包店的小网站，风格要温暖治愈，主色调用米色和浅棕色，要展示店铺介绍、招牌面包图片和地址联系方式。”AI 收到指令之后，几十秒内就会生成好几个页面，布局也帮你分好了，比如首页轮播图、招牌产品展示、关于我们、联系页面等等。
生成之后你还可以继续动手改。觉得某个区块的背景色太深了？点一下就能换。想换掉 AI 配的图片？直接拖拽新图片进去就行。整个流程就像跟一个设计师在合作——你提需求，它出方案，你改细节。
对于做小生意的店主、独立创作者或者想快速验证想法的人来说，这个功能真的太实用了。以前从零到上线一个品牌官网可能要好几周，现在几个小时就能搞定。
让网站动起来：悬停、滚动、点击效果
现在的网站，静态的已经很难满足用户的期待了。适当加一点动效，网站看起来会更专业、更有质感，也能在不知不觉中引导用户的视线。
Framer 在动效这块做得相当顺手。鼠标悬停放大、点击反馈、滚动触发的淡入效果、页面切换时的转场动画，几乎都是内置功能，不用写任何代码。
比如你想做一个卡片悬停时微微放大的效果：选中那张卡片，打开右下角的 Interactions 面板，点击“Add Interaction”添加一个 Hover 交互，然后设置 Scale 为 1.05（放大 5%），再设置一个平滑的 Transition 过渡效果，比如持续 0.3 秒、缓动曲线选“Ease Out”。几十秒就搞定了。
再比如你想让某个文字段落随着页面滚动到视野里才慢慢出现：选中这个文字，用“While in View”这个交互方式，设置透明度从 0 变成 1，再设置一个位移效果让它从下方 20 像素的位置滑上来。这样用户滚动到这一部分的时候，内容会像从画面里浮现出来一样，感觉很舒服。
这些效果放在以前，都需要前端开发写一大堆 JavaScript 才能实现，但在 Framer 里拖拖拽拽就能搞定。
CMS 内容管理：不用一页一页重复建页面了
CMS 到底是什么
CMS 就是内容管理系统的英文缩写。听起来好像很复杂，其实说白了就是让你像填表格一样管理网站上的内容，不用再一页一页手动复制粘贴。
举个例子，你想做一个博客网站。如果没有 CMS，每写一篇新文章都得复制一个现成的文章页面模板，改标题、改正文、改配图、改发布时间……重复劳动不说，还特别容易漏掉某处或者把格式搞乱。
但有了 CMS 之后，你只需要先创建一个“博客文章”的 Collection（集合），在里面设置好几个字段：标题、正文内容、配图、发布时间、作者。然后每次写新文章的时候，就像填一张在线表单一样，把标题填进去、正文粘贴进去、上传一张配图，点一下保存，Framer 就会自动帮你在网站上生成一篇格式统一的新文章页面。
CMS 能做的事情远不止博客。团队介绍页、客户案例展示、产品目录、活动日程表——凡是内容结构差不多、数量会不断增加的东西，都适合用 CMS 来管理。改起来也方便，比如你想把案例展示页里“客户评价”这个字段的字体颜色从灰色改成深黑色，只要在 Collection 的模板里改一次，所有案例页面的评价文字颜色就全变了，不用一个一个改。
用 CMS 做案例展示页面的完整流程
假设你做的是一个设计工作室的网站，想在首页展示过往的客户案例，每个案例包含一张封面图、案例名称、服务类型和一个查看详情链接。
第一步，在 Framer 里创建一个新的 Collection，名字就叫“案例展示”。然后添加四个字段：封面图（Image 类型）、案例名称（Text 类型）、服务类型（Text 类型）、详情链接（URL 类型）。
第二步，往这个 Collection 里添加具体内容。比如第一个案例：“封面图”上传某品牌网站截图，“案例名称”写“某某品牌官网设计”，“服务类型”写“品牌网站设计”。
第三步，在画布上设计一个案例卡片的样式。放一个 Frame 作为卡片容器，里面放图片元素（绑定到封面图字段）、文字元素（绑定到案例名称和服务类型字段）、按钮（绑定到详情链接字段）。
第四步，选中这个设计好的卡片，在属性面板里把它标记为“CMS Item”，然后选择刚刚创建的“案例展示”Collection。Framer 会自动根据 Collection 里的条目数量生成对应数量的卡片，并且按照你设计的样式排列好。
以后有新的案例要加上去，只要在 CMS 面板里添加一条新记录，填好图片和文字，首页上的案例列表就会自动多出一张卡片。整个过程不需要再碰设计界面。
网站发布和定价方案怎么选
一键发布，真的只需要点一下
网站设计好了、内容也填完了，怎么让全世界看到？在 Framer 里这件事简单到有点不太真实——点击编辑器右上角那个红色的“Publish”按钮，你的网站就会自动生成一个 framer.app 的域名，直接上线。
你还可以绑定自己买好的域名，比如 yourname.com 或者 yourshop.cn。在项目设置里找到“Domains”选项，按照提示输入你的域名，然后去你的域名管理后台按要求配置一下 DNS 解析记录就行了。等解析生效之后，别人访问你的自定义域名就能看到网站了。
免费版发布之后，网站底部会显示一个小小的“Made in Framer”标记，而且每月访客上限是 1000 人次。如果你只是做个个人作品集、给朋友的生日做个纪念页面、或者测试一下项目想法，免费版完全够用。但如果是商业用途或者预期会有比较多的访客，就需要看看付费套餐了。
常见问题（FAQ）
问：完全不懂代码的人真的能用 Framer 做出网站吗？
真的可以。Framer 本来就是给不懂代码的人设计的。所有操作都是可视化拖拽，你不需要写一行 HTML、CSS 或者 JavaScript。当然，如果你懂一点前端知识，能通过自定义代码实现更复杂的功能，但绝对不是必须的。
问：Framer 做出来的网站能直接上线吗？
能。Framer 自带托管服务，设计完成后点一下“Publish”按钮就上线了。你可以绑定自己买的域名，网站会自动配上 SSL 证书和 CDN 加速，加载速度挺快的。
问：免费版和付费版最大的区别是什么？
免费版发布后网站底部会有“Made in Framer”的小标记，而且每月访客上限是 1000 人次。付费版可以去掉这个标记，访客上限高很多，还支持绑定自定义域名、添加更多协作成员、使用更多 CMS 集合等功能。
问：Framer 里的 Component 是什么东西？
Component 就是可以重复使用的设计零件。你做好一个按钮、一个导航栏、一张产品卡片，把它转成 Component 之后，就可以在整个项目的任意页面里反复使用。而且最厉害的是，你只要修改这个 Component 本身，所有用到它的地方都会自动同步更新——维护起来特别省心。
问：Framer 能做多语言的网站吗？
可以。Pro 及以上的套餐支持多语言功能。你可以在项目设置里添加不同的语言版本，比如中文和英文，然后为每种语言分别填写内容。Framer 会自动处理好切换逻辑。
问：Framer 网站加载速度怎么样？
Framer 生成的网站性能很不错。底层用的是 React 和现代前端技术，还内置了 CDN 内容分发网络，不管访问者在哪个城市，加载速度都挺快的。在性能测试工具里的评分通常都在 90 分以上。
问：我能把 Framer 做的网站导出代码吗？
Framer 主要是托管平台，不直接提供导出完整代码的功能。如果你需要把网站部署到自己的服务器上，可以考虑用 Framer 的发布功能结合反向代理，但一般情况下直接使用 Framer 托管就够用了。