Framer更新
关注更新日志,我们会定期更新内容
自定义分发
我们对内置分析功能进行了一些改进,首先是为 A/B 测试添加了自定义分发选项。这对于在更大范围推广之前先向小部分受众推出变体非常有用。通过这种方式,你可以测试重新设计或其他更新,并快速衡量影响。除了自定义分发,我们还添加了更多改进。
新增功能
新增按跟踪 ID 筛选
新增文件夹以组织侧边栏
新增 A/B 测试的自定义分发
新增对 CMS 页面的 A/B 测试支持
新增 Pro 套餐网站的扩展历史记录
新增地理位置部分的系统语言
改进优化
提升了查看分析数据的速度和准确性
改善了 Pro 套餐中 Convert 附加组件的可用性
Framer Convert
隆重推出 Convert,这是一个全新的附加组件,配备了用于分析、优化和转化的高级工具。漏斗分析、A/B 测试,以及现在新增的触发器,全部整合在一个套餐中。你可以通过漏斗可视化用户旅程,为任何页面创建 A/B 测试,还能为组件和浮层添加动态触发器。借助新的触发器功能,你可以向从特定页面访问的用户展示横幅,仅在特定日期更新消息内容,当用户滚动到一定位置时显示浮层,等等。了解更多关于 Convert 的信息。
二月更新 流动效果
二月更新为布局模板带来了 Flow Effect 支持。Flow Effect 可以让页面区块响应交互或组件来触发动画,非常适合用于 FAQ 手风琴折叠等场景。现在,我们将这一效果引入布局模板,解锁全新的导航方式,并可在所有页面中即时使用。此外还有一系列优化修复……
新增
为布局模板添加了 Flow Effect
为新项目添加了美观的默认标题
为文本样式添加了字体预览
为 CMS 添加了字体预览
改进
改进了 Windows 上的键盘快捷键
改进了搜索时的字体预览
改进了复制项目的命名
改进了应用内所有的调整大小光标
修复
修复了 Safari 中文本截断有时不生效的问题
修复了文本样式中文本截断不生效的问题
修复了菜单中滚动阻塞的回退问题
修复了 CMS 图库变量的图片适配问题
修复了
⌘K在操作中不能可靠触发的问题修复了断点中弹出层定位的问题
修复了双指缩放同时影响 UI 的问题
修复了添加 Ticker 时间距被重置的问题
CMS 动态筛选器

Framer 动态筛选功能
Framer 正式推出动态筛选功能。它为你的 Framer 站点带来强大且高度自定义的 CMS 内容筛选能力。配置过程非常简单。选中一个集合列表,前往筛选面板中新增的 Dynamic 区域,按需添加搜索框、标签栏、开关、下拉选择或复选框。一切即刻生效,无需复杂配置。每个筛选器会自动关联到页面变量。由于筛选器不依赖特定图层,你可以将其放置在页面任意位置,布局完全自由,同时可以像编辑画布上的常规图层一样,完全自定义控件的外观与交互。你还可以通过重置变量来添加"清除筛选"按钮,让访客一键恢复初始状态。该功能与 Framer 已有的空状态展示和分页等功能完全兼容。动态筛选让高级筛选变得轻而易举,我们迫不及待想看到你用它创造出的作品。
Server API

Framer Server API 发布
我们推出了 Framer Server API,让你无需打开 Framer,即可从任何服务器以编程方式进行访问。Server API 拥有与插件 API(Plugin API)相同的能力,你可以将 CMS 集合与 Notion、Airtable 等外部数据源同步,发布更改、更新画布以及修改项目设置——这些操作可由 AI 代理、Webhooks 或定时任务触发。
该 API 基于有状态的 WebSocket 通道,非常适合批量处理以及需要极快流式响应的大语言模型(LLM)集成场景,同时也兼容 REST 服务和 Webhooks。
开始使用:在站点设置中创建 API 密钥,然后安装 framer-api npm 包。GitHub 上已提供 文档 和 示例 供参考。
Server API 在公开测试期间免费使用。我们非常期待你的反馈,欢迎写信至 server-api-feedback@framer.com。
CMS组件

CMS 中的组件功能介绍
在编写富文本内容时,组件(Components)让你突破纯文本、图片和表格的限制。你可以将画布(Canvas)上创建的任何组件直接拖放到内容中,轻松实现动态画廊、交互式嵌入内容以及邮件订阅表单等功能——全部嵌入在你的正文之中。
无论你是在 CMS 中编辑,还是直接在画布上操作,插入组件的体验都快速且熟悉,使用的是你在资源面板(Assets panel)中已经熟知的文件夹结构。
组件添加后依然保持完全的灵活性,你可以在当前上下文中调整属性(Properties)、变体(Variants)和对齐方式。当存在与你的断点(Breakpoints)匹配的变体时,组件还会自动实现响应式适配。
最终效果是:页面更丰富、更具动态表现力,交互元素自然地穿插在段落之间,全部在你的内容中直接管理。
CMS列表空状态

从今天开始,你可以直接在画布中为 CMS 集合列表添加和自定义空状态。
当集合为空,或者筛选器没有返回结果时,你现在可以显示一个专门的空状态,而不是在预览和已发布的网站上显示空白区域。
要添加空状态,选择一个集合列表,将 State 属性切换为 Empty,然后一键添加一个空状态图层。Framer 会使用新的 Visible Items 变量自动管理可见性,同时你仍然完全控制布局、样式和内容。
这样你就可以添加文字、图标、按钮和链接来引导访客,让空页面看起来是有意为之且有用的。这是迈向更动态 CMS 集合的第一步,后续还会有更多功能推出。以下是其他更新内容:
新增
新增为 CMS 列表设置空状态的功能
新增详情页选择器中的草稿标记
新增导入图片时的 Alt 文本支持
新增删除正在使用的字段时的警告提示
新增集合项目变量到搜索功能
新增页面内编辑链接的支持
改进
改进重新生成之前的 AI 翻译
改进 CMS 中草稿项目的区分度
改进添加新 CMS 字段时的用户体验
改进本地化空状态的清晰度
改进语言选择器的行为
修复
修复复制集合时缺失草稿状态的问题
修复滚动恢复与无限滚动的冲突
修复筛选器弹出框的一些滚动问题
修复 RTL 文本方向不可预测翻转的问题
修复特定格式文件上传失败的问题
修复长文本与状态标签重叠的问题
插件 3.10: CMS

本月的插件更新由新的 createManagedCollection API 领衔。它为插件作者提供了一种更简洁的方式,可以在所有模式下可靠地创建和管理 CMS 集合,让工作流程无需额外设置即可持续运行。我们还对插件和 CMS 同步进行了改进,包括 CSV 导入更新,使数据迁移更加便捷。查看更新日志。
通用
添加了
setCloseWarning()用于更安全的插件关闭处理添加了
displayTime属性以在日期字段上显示时间修复了
createCollection,现在在所有模式下都能一致工作修复了富文本中过时的 YouTube 嵌入导致的崩溃问题
修复了启用搜索时 Safari 上下文菜单的布局问题
插件
Ashby:通过集合引用支持多个次要位置
CSV 导入:新增映射、集合创建和
DateTime支持HubSpot:修复了身份验证重定向问题,使登录更顺畅
Workshop:现在可以干净地支持外部更改和手动编辑
CSV 导入、Notion、Google Sheets:现在在关闭时显示警告
一月更新:字体预览

一月更新带来即时字体预览功能。打开字体选择器并悬停在字体上时,你可以立即看到该字体应用到所选图层后的效果。这让你更容易发现新字体,找到合适的字体,而无需先确认选择。观看视频>
此外还有大量质量更新,详见下方。
新增
新增悬停时即时预览字体
组件菜单新增"查找"操作
矢量菜单新增"查找"操作
改进
改进未使用组件的删除
改进查找本地组件作为光标
改进在项目中查找外部矢量集
改进多个 SVG 导入的可靠性
改进 Safari 和 Firefox 中的右键菜单
改进插入面板的搜索结果
修复
修复从堆栈切换到网格时布局崩溃
修复从设计页面创建的页面路径重复
修复滚动效果中图片的布局动画
修复移除时文本截断未被清除
修复 OpenType 特性在网站上无法正常工作
修复某些右键菜单点击后保持打开
修复缺失边框变量导致组件崩溃
修复双击重命名有时不起作用
修复组件中选择使用错误的色调
修复布局模板未移除页面光标
修复快捷操作菜单导致 ⌘ 键卡住
修复渐变停止点与颜色样式不兼容
修复颜色样式选择改变文件夹颜色
修复颜色样式编辑影响错误的主题
修复渐变填充未被正确覆盖
修复组件在面包屑栏中残留
修复矢量上透明度被应用两次
修复滚动效果在断点中失效
高级托管

Framer 推出高级托管功能,内置多站点和自定义请求头。
多站点让你将多个站点(Framer 项目或外部来源)托管在一个域名下,实现逐页迁移或将大网站拆分成多个项目,同时保持统一 URL。
自定义请求头让你用支持通配符的有序规则扩展默认设置,用于安全策略等。
仪表板新增域名管理,侧边栏快速访问所有工作区域名,集中管理多站点、请求头和重定向,轻松处理复杂网站。
高级托管功能面向企业版团队开放。Pro 或 Scale 版团队可通过表单申请私测资格,限时免费体验。
On-Page Editing 2.0

Framer 的页面编辑功能现在对设计师和编辑者都更加灵活强大。编辑者可以直接在页面上重新排列内容,包括文本、框架和组件,轻松调整副标题、卡片和区块等元素的顺序,尝试不同的内容排列方式。视觉更新也更快了,只需一键即可切换图标和组件变体,以更好地匹配页面内容。设计师仍然拥有完全控制权,可以使用 ⌘ + L 锁定特定图层或区块来防止意外修改,同时仍允许快速、有意的编辑。此外,页面编辑现已全面支持本地化,只需访问本地化页面并点击编辑,即可实时更新本地化的文本和图片。应广大用户要求,圆形编辑按钮现在可以移动到屏幕任意位置,避免遮挡网站内容,而大量使用页面编辑的团队也可以轻松管理特定项目的邮件更新通知。
插件 3.9:合集功能
本次更新的核心是全新的 Create Collection API,插件可直接创建 CMS 合集并自动聚焦,无需手动设置即可继续导入数据等后续操作。此外还优化了插件体验和 CMS 同步的稳定性,新增了溢出处理、文本截断等布局与导航功能,并改进了 zoomIntoView 的行为表现。希望这些更新能帮助你构建更强大的插件。更多详情请点击此处。
通用
新增
z-index支持,可控制插件的层叠顺序新增溢出支持,优化滚动和裁剪控制
新增插件背景消息设置功能
新增文本截断支持,改善插件 UI 布局
新增创建 CMS 合集的 API
createCollection为
zoomIntoView和navigateTo新增skipIfVisible参数允许禁用代码组件的"通过插件编辑"功能
修复托管合集同步时出现重复项的问题
修复插件关闭时
Collection.setAsActive()的问题插件 SVG 大小限制从 4KB 提升至 10KB
插件
CMS 导入:现可自动识别富文本中的 Markdown
CSV 导入:插件现可选择/创建合集
Recruitee:导入现支持可选的职位字段
Notion:公式现可用作 slug 字段
Notion:改进了 API 速率限制的处理
自定义代码

我们在 Framer 中更新了自定义代码功能:在你的项目设置里新增了一个专门用于自定义代码的版块。通过这次更新,你可以在一个页面里总览所有添加到各个页面的自定义代码,并且还能把它拆分成多个独立代码片段。这让你在网站中添加、查找和更新代码变得更容易。
我们也改进了自定义代码的运行方式,新增了“每次访问页面时运行(On Every Page Visit)”的选项,这对事件追踪非常有用。默认情况下,代码会设置为“只运行一次(Once)”,这与之前的运行方式类似,适用于第三方脚本。
你可以在“项目设置 → 自定义代码(Project Settings → Custom Code)”中找到这个新的自定义代码版块。了解更多。
流动效果 - Flow Effect
我们推出了流动效果 - Flow Effect,这是一项简单却功能强大的新功能,让你可以根据任意交互或组件为各个区块添加动画。
一个常见的例子是 FAQ 中的手风琴:问题行可以平滑地展开或收起,但相邻的区块却会瞬间跳动,打破连贯的视觉效果,降低整体精致度。
为了避免这种情况,人们通常会把多个区块嵌套在组件里,只是为了强制所有内容一起做动画,这会让网站更臃肿、编辑也更加复杂。Flow Effect 解决了这一问题。
将它添加到你的 Page 和包裹组件的 Stack 上,所有区块就会自动一起进行动画。我们很快也会把这个 Effect 带到 Layout Templates 中。
目前,你可以在Youtube观看视频以了解更多。
本地化页面路径

从今天起,Framer 允许你为站点上任意页面翻译路径,而不仅仅是 CMS 内容。这能为使用不同语言浏览你网站的访问者带来更顺畅的体验,并帮助搜索引擎更准确地索引已翻译的内容。在本地化视图中,通过进入 Settings(设置),你现在可以启用 Translate Page Paths(翻译页面路径)。如果你之前已经在翻译 CMS 的 slug,那么这个选项会默认开启。同时还有一个额外的复选框,可以将路径包含在 AI 翻译中。
启用后,页面路径会与其他所有翻译内容一起,显示在本地化视图中各个页面标题下面。你也可以直接在画布上翻译页面路径,就在你通常重命名页面的地方:当项目包含多种语言时,页面面板顶部会显示一个新的语言切换器,你可以为每种语言分别重命名各个页面。发布后,切换语言会自动更新页面路径,而内置的冲突警告可以帮助你避免路径重复。你可以在这篇文章页面中了解更多关于本地化页面路径的信息,并查看分步指南。
超椭圆
12 月更新带来了 Squircle,这是一种全新的现代属性,让你可以为图层设计出极度圆润顺滑的拐角,就像 iOS 应用图标那样。Squircle 在 Framer 中有着深度集成,可用于 Frames 和 Stacks,也适用于 Link Styles 和 Forms。这意味着使用 Squircle 的图层都是可动画的。
Squircle 基于全新的 CSS 属性 corner-shape 实现,它目前在 Chrome 和 Edge 中表现完美,但 Safari 和 Firefox 暂时还不支持。为了解决这个问题,我们设计了自己的回退方案,仅通过 Radius 来尽量匹配视觉上的圆角效果,确保你的设计在任何环境下都不会“崩坏”。
本次更新还为 Forms 带来了可变字体(Variable Fonts)支持,为 Vectors 增加了多选能力,等等。你可以在这里查看 Squircle 视频,了解更多细节。
新增
在 Styles 中新增了 Squircle 属性
新增复制粘贴 Grid Styles 的能力
为 Forms 新增了 Variable Font(可变字体)支持
为 Vectors 新增了多选功能
新增解除 Vector Sets 关联的能力
为 Component Events 新增了上限(cap)
改进
改进字体选择器(Font Picker),会自动滚动到当前选中的字体
改进页面面板(Page Panel),会自动滚动到当前页面
改进自定义字体(Custom Fonts),现已基于团队(team-based)管理
改进桌面端标签页,可通过鼠标中键关闭
改进粘贴 Vector Sets 的体验
改进富文本链接的编辑体验
改进重定向(redirects),现已支持括号
改进通过双击重命名 Assets 的体验
改进重命名 Assets 的性能
修复
修复 Position 设置为 Absolute 的 Tickers 会塌缩的问题
修复 Tickers 不支持 Scroll 和 Loop Effects 的问题
修复带有 A/B Variants 的模板中 Scroll Effects 的问题
修复修改尺寸时 Aspect Ratio 仍然保持不变的问题
修复 Gradient 角度值不会被四舍五入的问题
修复 Viewer 能够修改 Color Styles 的问题
修复带有引用的自定义代码无法构建的问题
修复代码错误不会显示在发布面板(publish sheet)中的问题
修复 Scroll Sections 中 Add Custom Cursors 的问题
修复 App Toasts 在各视图中的对齐问题
修复 Text Styles 的 Link Style Transitions 问题
修复从 Collections 粘贴文本图层的问题
修复导出含有缺失字体图层时的问题
修复 Windows 上桌面端标签页崩溃的问题
修复 Overlays 中文本选中颜色的问题
修复 Quick Actions 无法找到文件夹的问题
修复 Forms 中 Submit Button Variants 的问题
瀑布流网格布局
Framer推出瀑布流网格功能。只需一次点击,就能将任何网格转变为紧凑的瀑布流网格。
在网格属性下可找到“瀑布流”切换按钮,启用该按钮后,你就能打造瀑布流布局。
这类布局采用固定列数但行高灵活的设计,因此元素会紧密堆叠,形成由各图层内容或高度决定的类似砖块排列的图案。
这与我们最近推出的图片适配功能搭配使用效果尤其出色,能让你直接在Framer中设计出类似Pinterest的布局。
你也可以从头设计新的瀑布流网格,方法是从工具栏的“布局”菜单中选择“瀑布流”。
瀑布流网格与我们的CMS系统兼容良好,在CMS中使用“交错”和“灯箱”等效果,能解锁各种全新的动画和交互方式。
观看YouTube上的视频,了解更多关于在Framer中使用瀑布流网格进行设计的内容。
字体上新 · 第16期

第十六期 Framer 字体上新™来啦!本次为我们精选的开源字体库新增了 Tiny 5×3、Xx Stardust、Wavetosh 和 St. Martin 四款字体。
现在你就可以在字体选择器里找到它们,用在你的下一个模板或网站项目中。
想让你自己的开源字体也出现在 Framer 里吗?欢迎随时联系我们,我们一直在寻找更多优质字体。
本期字体:
Tiny 5×3 by Jack Halten Fahnestock
Stardust by Studio Mucho Gusto
St. Martin by Carl J. Kurtz
Wavetosh by GGBot
滚动效果
全新推出滚动效果,让文本、图片等内容轻松实现连续滚动动画。我们彻底重做了 Framer 的滚动功能。
新版滚动效果支持 CMS,可以应用到任意堆叠组件上,每个断点都能单独设置参数,运行速度更快,可访问性也更强。在效果菜单里就能找到它,无论是 CMS 集合列表还是堆叠组件都能用。
再也不用忍受乱糟糟的画布、到处复制带筛选条件的集合,或者为了适配不同屏幕而隐藏副本了。
更棒的是,它还新增了拖拽支持和自动识别方向等功能,让你的工作流程和创意交互都上升一个台阶。相信你一定会爱上它。
最高保真的动画和交互工具,只在 Framer。
自动重命名
自动重命名功能是一种由 AI 驱动的图层重命名新方式。只需选择您想要重命名的图层,然后在 macOS 上按 ⌥ + R,或在 Windows 上按 ALT + R,我们就会神奇地为图层重命名。这有助于保持您的项目整洁易管理,无需任何手动操作。
Framer 会检查您的图层所代表的内容,并为其生成简洁的名称。请观看我们在 YouTube 上的简短演示视频,了解此功能可以生成的图层名称效果。
大大大大大大更新,认真的

🎉 重大版本更新 - 全新升级体验
我们迎来了史上最大规模的版本更新!这次更新几乎重构了整个平台,为您带来前所未有的使用体验。
✨ 主要更新内容
1. 🎨 全新 UI 设计
网站界面全面升级,采用与 Framer 一致的设计语言,让您在学习和使用过程中获得更加流畅统一的体验。
2. 💡 灵感页面正式上线
全新推出的灵感中心,汇集全网优秀网页设计案例。为您的 Framer 创作提供源源不断的灵感来源,让设计不再枯竭。
3. 📚 文档 100% 汉化
Framer 官方文档现已完成全量汉化,每一个细节都经过精心翻译和校对,让中文用户学习 Framer 再无语言障碍。
4. 📰 博客系统全面开放
全新的博客板块正式上线,提供最新的行业资讯、深度教程和优质资源分享,让您始终站在设计前沿。
5. 🚀 400+ 高阶组件上新
新增超过 400 个精心设计的高阶 Framer 组件,覆盖各类复杂交互场景,助您快速搭建专业级网站。
6. 🏗️ 300+ 区域模块扩充
一次性新增 300+ 预设计区域模块,涵盖首页、产品展示、团队介绍等各类常用版块。内容之丰富,更新之巨大,让我们都数不过来了!
7. 🔍 全站搜索功能上线
随着资源库的急速扩充,我们推出了强大的搜索功能。现在您可以快速检索组件、模板、教程等所有内容,让海量资源触手可及。
8. 📢 Framer 官方更新追踪
更新页面新增 Framer 官方更新板块,第一时间推送 Framer 的功能更新和改进,让您永远不错过任何重要特性。
这次更新凝聚了我们数月的心血,希望能为您带来更好的使用体验。感谢您一直以来的支持,让我们一起在 Framer 的世界里创造更多可能!
相对日期

今天我们推出了相对日期功能,这是 CMS 中呼声很高的一个功能需求。现在您可以显示动态日期值,如"今天"、"昨天"或"1周前",让您的内容感觉更自然、更及时。
要使用此功能,请选择任何连接到 CMS 集合的日期,打开文本转换弹窗,然后选择"相对"作为显示类型。您还可以通过调整大小写格式,以及在短、中、长样式之间进行选择来微调显示效果。
相对日期完全兼容本地化功能,因此它们会自动适应您网站的语言。
动态优化
动态优化是一种全新的已发布网站优化方式。现在,所有网站(即便是大型网站)都能在几秒钟内完成优化。而且,添加页面不会对优化时间产生任何影响。页面如今会在首次访问时进行优化,我们会缓存优化结果,直到下一次发布为止。您访问量最大的页面会在发布时预先优化,确保性能稳定,并且能全面了解任何问题。这让Framer最出色的功能——即时发布——变得更加完善。我们撰写了一篇包含更多技术细节的文章,您可以在此处找到。我们将在整个10月逐步推出这项功能。发布速度,再获提升。仅在Framer实现。
新组件、新体验、新指南

本次更新带来了多个令人兴奋的新功能和内容,旨在帮助您更轻松、更高效地构建卓越的网站体验。
🎛️ 1. 全新拟物化组件库,零代码打造复古交互
我们新增了6款精美的拟物化(Neumorphic)交互组件,助您轻松构建极具质感和深度的用户界面。所有交互均可在Framer内直接完成,无需编写任何代码!
Triple Light Switch (三联灯开关)
Dot Switch (点状开关)
Hollin' Volume (霍尔音量控制器)
Triple Push Buttons (三联按钮)
Digital Clock Radio (数字时钟收音机)
Rotary Radio Player (旋钮收音机播放器)
➡️ 立即体验: 在您的Framer项目中搜索这些组件,感受无代码交互设计的魅力!
🌊 2. Foll-ow 导航组件,复刻无缝沉浸体验
我们深度更新了 Foll-ow 导航组件!现在,您可以使用Framer轻松复刻其官网那种无缝衔接、丝滑流畅的沉浸式浏览效果。无论是视差滚动、平滑过渡还是微交互,都能完美实现,极大提升您网站的现代感和专业度。
🚀 尝试一下: 将组件拖入画布,自定义您的内容,即可获得同样惊艳的视觉效果。
📚 3. 新文章:Framer vs Figma Sites,终极对决!
Figma刚刚推出了自家的网站构建器 Figma Sites,每个人都在问:它能否与Framer一较高下?
我们撰写了这篇深度对比文章,将它们放在一起进行全面分析,从易用性、模板质量、性能SEO、高级功能到定价,帮你厘清主要区别,做出最明智的选择。
🤔 阅读指南: 想知道哪个工具真正适合你的需求和工作流?这篇文章将给你答案!
🖼️ 4. 体验优化:封面图适配全新灯箱效果
为了提供更现代、更流畅的用户体验,我们为模块详情页的封面图部分适配了Framer最新版本的灯箱(Lightbox)效果。
交互升级:用户点击封面图后,即可享受背景变暗、图片平滑放大至屏幕中心的沉浸式查看体验。
视觉提升:新的灯箱动画更加细腻流畅,让您的作品集和图片展示更具质感。
无需配置:此优化已自动应用,为您带来开箱即用的现代化交互。
💡 总结
本次更新继续强化了Framer在无代码交互设计和专业网站构建方面的领先地位。无论是追求独特的视觉风格,还是需要极致的性能和功能,Framer都能为您提供强大支持。
快去探索这些新内容,将您的项目提升到新的水平吧!
几周内从0到100上线网站

大家好!
非常高兴地宣布,我们的全新内容页面已经搭建完成啦! 🎉
从这个月开始,我会每周固定更新一篇高质量的原创内容,专注于帮助大家从零开始,系统性地学习和掌握 Framer,让你也能轻松打造出专业又惊艳的网站。
🚀 本周更新内容:【Framer 完全改变了我构建网站的方式】
在这第一篇内容里,我没有一上来就讲枯燥的工具用法,而是分享了我个人从对 Framer 感到陌生和困惑,到几周内就能独立上线的真实学习历程。
我坦诚地告诉大家,Framer 虽然强大,但确有学习曲线。我成功的秘诀并非疯狂看教程,而是采用了一种非常高效且有趣的 「逆向拆解」学习方法。
这篇文章将详细为你拆解:
🤔 为什么最终选择了 Framer? (解决了我的哪些核心痛点)
🧠 什么是「逆向拆解」学习法? 为什么它比传统学习方式快得多?
🔍 五步实操指南: 从如何选择合适的模板,到最终从零重建,一步步带你上手。
⏱ 合理的时间预期: 告诉你每个阶段可能花费的时间,帮你更好地规划学习。
如果你也对 Framer 感到好奇,或者曾经打开过却不知从何下手,相信我的这份经验分享能给你带来巨大的启发和帮助。
希望这篇内容能成为你 Framer 学习之旅的完美起点。期待你的反馈和想法!
我们下周见!
新模板限时免费领!限时!

本次更新重磅推出限时免费模板,并带来一系列炫酷的新组件和资源库,助您打造更具互动性和设计感的网站!
🎉 新模板限时免费!
【Aylix】—— 人工智能与SaaS品牌的优雅之选
✨ 简介:专为AI初创企业和SaaS品牌打造的时尚Framer模板。
💎 功能:优雅地展示您的按需人工智能团队、集成功能、自动化流程和合规情况。
⏰ 限时免费赠送活动:
📱 小红书平台:关注我们,私信
FramerAylix,并点赞/收藏/关注指定笔记,即可免费获得模板兑换码!
💬 微信公众号:关注我们,私信
FramerAylix,即可免费获取该模板的Figma设计源文件!
立即行动,用兑换码免费兑换模板,快速启动您的项目!
🧩 炫酷新组件
我们新增了5个极具表现力的组件,让您的网站动起来:
⛓️ 重力文本 (Gravity Text):模拟重力对字母产生影响的文本组件,让每个字符都拥有物理质感。
🌀 波普网格 (Pop Grid):适用于Framer的波普网格组件,能在形状网格上创建生动有趣的动画效果。
🧈 可拖动Bento (Draggable Bento):支持实时拖放和重新排列,搭配如黄油般流畅顺滑的动画。
🖱️ 运动轨迹光标 (Motion Trail Cursor):一款流畅、具有方向感知功能且可完全自定义的光标,为交互增添乐趣。
🌈 流体网格渐变 (Fluid Grid Gradient):轻松在Framer中创建流畅、动态的网格渐变背景,提升视觉层次。
📚 新资源库
【FramerCN模板库】正式上线!
面向不同团队和场景的精选Framer模板集合。无论您是初创公司、工作室还是个人创作者,都能在这里找到灵感,只需几个小时,就能从想法变为上线的网站。
🐛 Bug 修复与优化
已修复:解决了H5移动端导航菜单展开后,项目分布不均匀导致的布局错位问题,现在导航体验更完美了!
希望您喜欢本次更新!立即尝试新功能,打造您的下一个杰作吧! 🚀
重磅更新! 拟物风格UI套件

本次更新我们带来了一个精心打造的拟物风格(Skeuomorphic)UI组件合集,旨在帮助您无需代码即可在Framer中构建出质感十足、交互惊艳的设计。所有组件均可一键复制,立即使用!
✨ 更新内容
🔄 拟物风格转动组件 - 带来复古表盘般的精准操控感。
🔄 拟物风格切换组件 - 在两种状态间优雅滑过,反馈清晰。
🔘 拟物风格按钮组件 - 拥有逼真的按压质感与物理反馈。
📜 拟物风格滚动组件 - 模拟实体滚轮的顺滑与阻尼感。
🎚️ 拟物风格滑块组件 - 像调节物理旋钮一样直观地控制数值。
🔌 拟物风格开关组件 - 经典拨动开关,咔哒声仿佛就在耳边。
📸 拟物风格相机交互组件(重磅推荐!) - 此组件设计极为精巧,涵盖了在Framer中使用变体(Variants) 构建复杂交互的大部分高级技巧。通过它,您可以深入探索如何将多个交互逻辑无缝衔接,创造出令人惊叹的流畅效果。
🐛 问题修复
✅ 修复了组件库页面更新消息入口无法正常进入的问题 - 现在您可以顺畅地访问所有更新动态了。
🚀 立即体验
欢迎复制使用这些组件,尽情探索如何在Framer中无需一行代码,即可轻松构建出拟物化的精致设计和令人叹为观止的交互效果!
希望它们能激发您的创作灵感!💡
大量组件更新,强大到发光!

本次更新我们带来了大量炫酷的 Framer 组件和效果,并对一些关键问题进行了修复,让你的网站体验更上一层楼!
🚀 新增超强组件
🔥 热成像效果
全新可定制热成像组件!现在你可以自由调整热图的颜色、对比度、灵敏度和动画速度,创造出独一无二的视觉冲击。
🔄 文本切换
想让你的标语动起来?这个组件能让你展示一系列词语,并通过3种不同的动画效果让它们优雅地淡入淡出。
🌀 乱码文本
借助这个组件,你可以对文本进行打乱处理,创造出犹如黑客帝国般的酷炫效果,瞬间提升页面的科技感和互动性。
🔄 前后对比
用两张图片进行直观的前后对比!它的核心采用了GPU硬件加速技术,确保对比滑块操作如丝般顺滑。
💫 边缘辉光
为你的设计注入一丝魔力!悬停在任何帧上时让边缘发出微光,或者在整个帧的顶部呈现完整的光泽效果。
🎠 轮播组件 - 增强版
带来了体验升级的轮播!支持流畅的自由拖动滚动、无限循环,并能自动调整图像尺寸。还包含精准的吸附功能,便于导航。
🎮 3D悬停 & 倾斜
轻松将任何框架或图像转换为立体的交互卡片!当用户悬停时,它会平滑地呈现动态倾斜效果,深度感十足。
🌌 圆环渐变背景
源自 React Bits 中的 “The Orb” 并进一步增强!这是一种非常酷炫的背景效果,我们为它增加了额外的功能和灵活性。
📊 滚动进度监测
一个实用的滚动跟踪组件,它能实时监测并显示页面的滚动进度,以及当前正在阅读的标题,导航从未如此清晰。
🎴 卡片模糊效果
使用 Framer 变体实现了优雅的卡片悬停效果。卡片内容在悬停时会从模糊变为清晰,全部无需代码即可实现!
👁️ 渐变模糊
为任何对象添加时尚的渐变背景模糊效果。模糊的程度、精度甚至叠加的颜色都可以完全自定义,细节控的福音。
🖊️ 自定义文本下划线
告别单调的下划线!该组件可以给全文或特定词语/短语添加下划线,并且能完全自定义其样式,让你的排版更出彩。
🃏 堆叠卡片效果
创建可交互的卡片堆叠!以级联的布局展示卡片,带有优雅的缩放和间距效果,动画和交互均可自定义。
♾️ 无限图像网格
一个可以无限延伸的图像网格组件,为你的作品集或画廊设计提供无尽的可能。
✅ 问题修复
🐛 修复了手机端 Header 导航无法正常点击的问题。
🐛 修复了 Footer 联系按钮无法正常点击的问题。
希望你喜欢这次重磅更新!快去尝试这些新组件,打造更令人惊艳的网站吧!🎉
隆重介绍 FramerCN 2.0

🏠【前端焕新】
视觉与交互全面升级,精心优化的界面让浏览更流畅、信息更清晰,愿您第一眼就感受到我们的用心。
🧩【模块库与组件库双升级】
原“组件库”正式更名为“模块库”,涵盖更丰富的Framer功能模块;
全新“组件库”上线!专注收录创意性UI组件,助力灵感迸发;
新增「相似组件推荐」功能,找组件更快、更准、更智能。
📄【文档体验优化】
内容排版重构,阅读更舒适,关键信息一目了然,助您高效获取知识。
✨【更多令人欣喜的改进】
移除用户系统,所有内容免费开放,真正实现无障碍访问;
新增「联系」页面,欢迎随时反馈想法、建议或合作意向;
多个页面持续优化中,我们始终以用户体验为核心。
感谢大家的持续关注与支持,未来我们会继续迭代,带来更优质的内容与功能!🚀
FAQ组件库大升级!20+组件上线!

📢 本次更新我们隆重推出了✨20个✨全新的FAQ组件,显著提升了内容的广度与深度。
🔄 为进一步提升用户体验,我们将建立📅每周更新的长期机制,对组件库进行持续优化。
⭐ 诚挚邀请您收藏我们的网站,以便及时获取最新资讯。感谢您一直以来的支持🙏
资源库组件持续更新

✨ 15个免费 LogoClouds 组件 | 提升品牌展示效果
✨ 20个高效集成连接组件 | 快速对接第三方服务与数据
🔧 组件丰富,开箱即用,助力项目高效开发!
⭐ 欢迎收藏关注,持续获取更多优质组件更新 ~
40+ 响应式亮点区块来袭!

✨ 新增 40 个多功能“功能亮点”组件
多样风格|覆盖多种场景和视觉风格
响应式适配|多端自动优化,完美兼容不同设备
灵活易用|直接复用,快速构建吸睛页面
🚀 轻松突出产品特性,让用户一眼看见你的亮点!
超强首屏来袭

🎉 新增 30 款精美 Hero 组件
多风格设计|覆盖现代、简约、商务、创意等多种风格
响应式布局|自动适配手机、平板、电脑端,完美展示
即拖即用|轻松定制,快速搭建惊艳的首屏视觉
✨ 让你的页面“第一屏”就抓住用户的眼睛!
👇 需要的话欢迎随时调用,也欢迎大家收藏关注,持续获取更新哟~
组件系统正式上线

✅ 组件系统已全面搭建完成!
当前所有组件支持
🔍 智能搜索 | 轻松查找所需组件
📂 分类筛选 | 快速定位资源类型
👀 在线预览 | 实时查看效果与代码
⬇️ 免费下载 | 所有组件开放使用,随心集成~
🆓 当前组件库内容完全免费,欢迎大家随意使用和分享!
📢 后续更新通知平台
新组件/新资源将首发更新至小红书 & 微信,
如果想第一时间获取最新内容,欢迎前往支持页面关注我们的官方账号✨
🙏 感谢大家的关注与支持,我们会持续更新优质组件!
网站优化更新一览

🧭 导航栏升级
整体优化,现在更加实用高效
用户头像加载样式美化:告别“加载中”文字,迎来流畅骨架屏效果
新增用户菜单:快速查看个人信息、进入用户中心或退出登录
📄 全新页面亮相
【里程碑】记录每一个重要时刻🏆
【组件库】上线!首批带来多个导航栏组件 ➕ 更多精彩组件持续更新中!
【更新日志】随时掌握最新开发动态📃
【支持页面】等你来探索~ ❤️
感谢大家的支持,我们会持续优化体验!
























重要提示




















