1 小时快速入门 Framer 保姆级教程
你现在看到这篇博客，最早的版本就是小吉用 Framer 搭建起来的——效果是不是比大多数网站颜值要高一些？这就是 Framer 的优势。
如果你也想通过无代码工具快速搭建一个颜值还不错的网站，跟着这篇教程学准没错啦。1 小时内，带你走完：注册账号 → 看懂界面 → 做完第一个苹果百科落地页 → 发布上线。
废话少说，让我们出发吧～
课程资料
- 课程最后实现的网页：苹果公司百科极简版
- 苹果公司百科素材源：Wiki — 苹果公司
注册 Framer 账号
首先打开 Framer 官网，点击右上角的 Sign up 注册账号。Framer 支持邮箱或 Google 账号注册，这里用邮箱演示。
输入邮箱、点击 Continue 之后，邮箱会收到一个激活链接，点开激活链接、设置用户名、勾选同意协议，再点 Finish 就完成注册啦。
了解 Framer 界面
第一次进来网页，会有一个新手指引，可以跟着指引完成新手教程，我们这里直接跳过。
Framer 的界面非常清晰简洁，按功能模块做了细致的划分——正上方的 导航区、左边的 页面/图层区、中间的 主编辑区 和右边的 属性控制区。
页面正上方导航栏的左侧，把常用的功能集合到了一起：添加文字、添加版式等等。
导航栏正中间是项目标题，点击可以修改项目名称。右侧的导航是项目通用设置，比如邀请协作者、预览和发布网页。
🤔 小吉疑惑：Framer 导航栏右边第一个按钮和 Invite 功能目前是一样的，小吉猜测可能后续会在这里加更多功能，暂时占位。
导航栏下方的 页面/图层区，是除主编辑区之外操作最频繁的模块，分三块：
- Pages — 创建和管理不同的页面（不同的 URL）
- Layers — 当前页面下的所有元素都会在这里以图层形式呈现
- Assets — 可以重复使用的资源，比如不同页面共用的导航栏、页脚
接下来正中间的 主编辑区，是制作网页时使用最频繁的区域，可以直接在里面打字试试。
最后是右边的 属性控制区，用来改变所选元素的属性。比如选中文字后，可以改字体颜色、放大字号、设置垂直水平居中。
至此你已经完全掌握了 Framer 的操作界面，一点都不难，对吧？接下来进入实战环节，难度也跟上面差不多。
制作第一个 Framer 落地页
为了方便快速上手，Framer 准备了非常多拿来即用的模块——用这些模块就能快速搭出颜值很高的落地页。我们结合苹果公司的百科素材，做一个苹果百科的落地页。
Hero 首屏
先做落地页的开头。"在背景图上叠文字"这种效果 Framer 已经提供了模板，直接 insert 进来即可。
接下来给图片加一个背景。Framer 已经接入了免版权图库，可以直接搜索想要的图片，点击就能添加。
双击想要修改的文字，把信息填充到落地页中。用同样的方式把子标题填进去，调整文字大小、删掉左边不需要的按钮。
子标题文案：
美国苹果电脑公司（Apple Computer Inc.），2007 年 1 月 9 日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。
接着点击按钮，把苹果公司的网站链接输进去，预览看看是否可以正常跳转。
恭喜你，已经完成了一个漂亮的落地页首屏啦。
基础信息模块
先把页面变长一点：选中 Desktop，把 Height 改成 5000。
点击 Text、点击画布，把"公司名称"打出来，再用同样的方式把"苹果公司"打出来。
选中两个元素，给它们加一个 Stack（栈）来约束布局——可以把 Stack 理解成一个长管子，把东西丢进去就会被码得整整齐齐，不会到处乱跑。
默认是竖版，把它改成横版，会发现元素被隐藏了——那是因为管子的长度不够。把 Stack 的模式改成 Fill，它就会挤满父元素，名字就被完整显示出来了。
为了让页面看起来更精致，把文字调小，左侧的"公司名称"改成灰色、右侧的"苹果公司"保持黑色，用色阶区分信息的重要程度。
我们还需要多个介绍基础信息的 Stack，所以选中"公司名称"的父级 Stack，按 ⌘+D 多复制三个出来。再添加"基础信息"标题、移到顶部。
这些内容都属于基础信息模块，所以再用一个 Stack 来约束它们——这次试试快捷键 ⌘+⌥+回车，被选中的元素会自动加进一个新 Stack。
现在标题的顶部被裁切了，那是因为外层 Stack 还是固定长度模式。把它改成 Fit Content（自适应内容），给盒子设置一个 Top Padding，并把里层 Stack 的 gap 改成 0，看起来就正常了。
挑几条百科里你喜欢的公司介绍信息替换进来即可。
最新消息模块
进入下一个模块——给页面加新闻。鼠标悬浮到导航栏的 Insert 按钮，在 Sections 模块下找到双栏组件，拖到页面里。按 T 键添加标题文字"最新消息"，移到双栏的头部位置。
从百科里挑两条新闻填进去，分别修改标题和正文部分。然后给两个新闻找合适的图片——还记得吗？Framer 内置 Unsplash，直接搜索就能填充。
合作机构模块
接下来模拟一个合作机构模块，顺便看看 Framer 的 Icon 组件功能——可以非常方便地添加各种 icon。
先把 Trusted By 模块拖进来，把标题改成"合作机构"。把默认图标全部删掉，在 Insert → Icons 下随便选一个 icon 拖进画布，按 ⌘+D 多复制几份。
在 Material 的 Name 下有非常多 icon 可选，挑几个喜欢的、把颜色统一改成灰色。
联系我们 + 页脚
页面最后加"联系我们"和"页脚"——这些同样不用自己做，Framer 自带模块，拖进来、把信息换成你想要的内容就好。
底部如果看起来太长，把主 Stack（即 Desktop）的 Height 改成 Fit Content，它就会自动匹配内容长度。这样整个页面就完成啦。
发布 Framer 落地页
内容做完后，肯定想第一时间分享给朋友帮忙看看对吧？很简单，点右上角的 Publish，Framer 会生成一个默认的免费域名。点击链接就可以跳转到刚做的网站。
教程总结
恭喜你，完成第一个 Framer 落地页啦。
回顾一下这一小时做了什么：
- 注册并激活 Framer 账号
- 拆解 Framer 操作界面的四大区域
- 实战搭建一个苹果百科落地页（首屏 / 基础信息 / 最新消息 / 合作机构 / 联系 / 页脚）
- 发布上线
Framer 的核心理念其实就两个字——Stack（约束布局）和 拖拽（拿来即用）。掌握了这两点，剩下的就是把素材组装成你想要的样子。
这是小吉 2023 年第一次写 Framer 教程的版本，原文发在旧博客 bmms.me。现在迁移过来作为 handbook 沉淀。如果你跟着这篇做完了第一个 Framer 落地页，欢迎在我的 X / 微信号上分享你的成品 🌟