更新日志

Framer推出瀑布流网格功能。只需一次点击，就能将任何网格转变为紧凑的瀑布流网格。

在网格属性下可找到“瀑布流”切换按钮，启用该按钮后，你就能打造瀑布流布局。

这类布局采用固定列数但行高灵活的设计，因此元素会紧密堆叠，形成由各图层内容或高度决定的类似砖块排列的图案。

这与我们最近推出的图片适配功能搭配使用效果尤其出色，能让你直接在Framer中设计出类似Pinterest的布局。

你也可以从头设计新的瀑布流网格，方法是从工具栏的“布局”菜单中选择“瀑布流”。

瀑布流网格与我们的CMS系统兼容良好，在CMS中使用“交错”和“灯箱”等效果，能解锁各种全新的动画和交互方式。

观看YouTube上的视频，了解更多关于在Framer中使用瀑布流网格进行设计的内容。

第十六期 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都能为您提供强大支持。

快去探索这些新内容，将您的项目提升到新的水平吧！

大家好！

非常高兴地宣布，我们的​​全新内容页面已经搭建完成啦！​​ 🎉

从这个月开始，我会​​每周固定更新一篇高质量的原创内容​​，专注于帮助大家从零开始，系统性地学习和掌握 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移动端导航菜单展开后，项目分布不均匀导致的布局错位问题，现在导航体验更完美了！

希望您喜欢本次更新！立即尝试新功能，打造您的下一个杰作吧！ 🚀

本次更新我们带来了一个精心打造的​​拟物风格（Skeuomorphic）UI组件合集​​，旨在帮助您无需代码即可在Framer中构建出质感十足、交互惊艳的设计。所有组件均可一键复制，立即使用！

​​✨ 更新内容​

• ​​🔄 拟物风格转动组件​​ - 带来复古表盘般的精准操控感。

• ​​🔄 拟物风格切换组件​​ - 在两种状态间优雅滑过，反馈清晰。

• ​​🔘 拟物风格按钮组件​​ - 拥有逼真的按压质感与物理反馈。

• ​​📜 拟物风格滚动组件​​ - 模拟实体滚轮的顺滑与阻尼感。

• ​​🎚️ 拟物风格滑块组件​​ - 像调节物理旋钮一样直观地控制数值。

• ​​🔌 拟物风格开关组件​​ - 经典拨动开关，咔哒声仿佛就在耳边。

• ​​📸 拟物风格相机交互组件（重磅推荐！）​​ - 此组件设计极为精巧，涵盖了在Framer中使用​​变体（Variants）​​ 构建复杂交互的大部分高级技巧。通过它，您可以深入探索如何将多个交互逻辑无缝衔接，创造出令人惊叹的流畅效果。

🐛 问题修复

• ​​✅ 修复了组件库页面更新消息入口无法正常进入的问题​​ - 现在您可以顺畅地访问所有更新动态了。

​​🚀 立即体验​​

欢迎复制使用这些组件，尽情探索如何在Framer中​​无需一行代码​​，即可轻松构建出拟物化的精致设计和令人叹为观止的交互效果！

希望它们能激发您的创作灵感！💡

本次更新我们带来了大量炫酷的 Framer 组件和效果，并对一些关键问题进行了修复，让你的网站体验更上一层楼！

🚀 ​​新增超强组件​​

• ​​🔥 热成像效果​​

  全新可定制热成像组件！现在你可以自由调整热图的颜色、对比度、灵敏度和动画速度，创造出独一无二的视觉冲击。

• ​​🔄 文本切换​​

  想让你的标语动起来？这个组件能让你展示一系列词语，并通过3种不同的动画效果让它们优雅地淡入淡出。

• ​​🌀 乱码文本​​

  借助这个组件，你可以对文本进行打乱处理，创造出犹如黑客帝国般的酷炫效果，瞬间提升页面的科技感和互动性。

• ​​🔄 前后对比​​

  用两张图片进行直观的前后对比！它的核心采用了GPU硬件加速技术，确保对比滑块操作如丝般顺滑。

• ​​💫 边缘辉光​​

  为你的设计注入一丝魔力！悬停在任何帧上时让边缘发出微光，或者在整个帧的顶部呈现完整的光泽效果。

• ​​🎠 轮播组件 - 增强版​​

  带来了体验升级的轮播！支持流畅的自由拖动滚动、无限循环，并能自动调整图像尺寸。还包含精准的吸附功能，便于导航。

• ​​🎮 3D悬停 & 倾斜​​

  轻松将任何框架或图像转换为立体的交互卡片！当用户悬停时，它会平滑地呈现动态倾斜效果，深度感十足。

• ​​🌌 圆环渐变背景​​

  源自 React Bits 中的 “The Orb” 并进一步增强！这是一种非常酷炫的背景效果，我们为它增加了额外的功能和灵活性。

• ​​📊 滚动进度监测​​

  一个实用的滚动跟踪组件，它能实时监测并显示页面的滚动进度，以及当前正在阅读的标题，导航从未如此清晰。

• ​​🎴 卡片模糊效果​​

  使用 Framer 变体实现了优雅的卡片悬停效果。卡片内容在悬停时会从模糊变为清晰，全部无需代码即可实现！

• ​​👁️ 渐变模糊​​

  为任何对象添加时尚的渐变背景模糊效果。模糊的程度、精度甚至叠加的颜色都可以完全自定义，细节控的福音。

• ​​🖊️ 自定义文本下划线​​

  告别单调的下划线！该组件可以给全文或特定词语/短语添加下划线，并且能完全自定义其样式，让你的排版更出彩。

• ​​🃏 堆叠卡片效果​​

  创建可交互的卡片堆叠！以级联的布局展示卡片，带有优雅的缩放和间距效果，动画和交互均可自定义。

• ​​♾️ 无限图像网格​​

  一个可以无限延伸的图像网格组件，为你的作品集或画廊设计提供无尽的可能。

✅ ​​问题修复​​

• ​​🐛 修复了手机端 Header 导航无法正常点击的问题。​​

• ​​🐛 修复了 Footer 联系按钮无法正常点击的问题。​​

希望你喜欢这次重磅更新！快去尝试这些新组件，打造更令人惊艳的网站吧！🎉

🏠【前端焕新】

视觉与交互全面升级，精心优化的界面让浏览更流畅、信息更清晰，愿您第一眼就感受到我们的用心。

🧩【模块库与组件库双升级】

• 原“组件库”正式更名为“模块库”，涵盖更丰富的Framer功能模块；

• 全新“组件库”上线！专注收录创意性UI组件，助力灵感迸发；

• 新增「相似组件推荐」功能，找组件更快、更准、更智能。

📄【文档体验优化】

内容排版重构，阅读更舒适，关键信息一目了然，助您高效获取知识。

✨【更多令人欣喜的改进】

• 移除用户系统，所有内容免费开放，真正实现无障碍访问；

• 新增「联系」页面，欢迎随时反馈想法、建议或合作意向；

• 多个页面持续优化中，我们始终以用户体验为核心。

感谢大家的持续关注与支持，未来我们会继续迭代，带来更优质的内容与功能！🚀

📢 本次更新我们隆重推出了​​✨20个✨​​全新的FAQ组件，显著提升了内容的广度与深度。

🔄 为进一步提升用户体验，我们将建立​​📅每周更新​​的长期机制，对组件库进行持续优化。

⭐ 诚挚邀请您​​收藏我们的网站​​，以便及时获取最新资讯。感谢您一直以来的支持🙏

✨ 15个免费 LogoClouds 组件 | 提升品牌展示效果

✨ 20个高效集成连接组件 | 快速对接第三方服务与数据

🔧 组件丰富，开箱即用，助力项目高效开发！

⭐ 欢迎收藏关注，持续获取更多优质组件更新 ~

✨ 新增 40 个多功能“功能亮点”组件

多样风格｜覆盖多种场景和视觉风格

响应式适配｜多端自动优化，完美兼容不同设备

灵活易用｜直接复用，快速构建吸睛页面

🚀 轻松突出产品特性，让用户一眼看见你的亮点！

🎉 新增 30 款精美 Hero 组件

多风格设计｜覆盖现代、简约、商务、创意等多种风格

响应式布局｜自动适配手机、平板、电脑端，完美展示

即拖即用｜轻松定制，快速搭建惊艳的首屏视觉

✨ 让你的页面“第一屏”就抓住用户的眼睛！

👇 需要的话欢迎随时调用，也欢迎大家收藏关注，持续获取更新哟～

✅ 组件系统已全面搭建完成！

当前所有组件支持

🔍 智能搜索 | 轻松查找所需组件

📂 分类筛选 | 快速定位资源类型

👀 在线预览 | 实时查看效果与代码

⬇️ 免费下载 | 所有组件开放使用，随心集成～

🆓 当前组件库内容​​完全免费​​，欢迎大家随意使用和分享！

📢 后续更新通知平台

新组件/新资源将首发更新至小红书 & 微信，

如果想第一时间获取最新内容，欢迎前往支持页面关注我们的官方账号✨

🙏 感谢大家的关注与支持，我们会持续更新优质组件！

🧭 导航栏升级

整体优化，现在更加实用高效

用户头像加载样式美化：告别“加载中”文字，迎来流畅骨架屏效果

新增用户菜单：快速查看个人信息、进入用户中心或退出登录

📄 全新页面亮相

【里程碑】记录每一个重要时刻🏆

【组件库】上线！首批带来多个导航栏组件 ➕ 更多精彩组件持续更新中！

【更新日志】随时掌握最新开发动态📃

【支持页面】等你来探索~ ❤️

感谢大家的支持，我们会持续优化体验！