如何使用 Framer：2025 年新手指南

想制作炫酷的网站或应用程序，但不知道从哪里开始？

确实很难，对吧？

这些设计工具看起来都非常复杂。

猜猜看？裱画并不一定很难。

本指南将向您展示如何使用 Framer 制作出令人惊叹的作品，即使您是完全的初学者。

我们将一步一步地讲解，这样你就可以立即开始设计自己的网站和应用程序。

框架

加入数千个令人惊叹的建筑工地。Framer 的速度如何？用户反馈设计工作流程速度提升高达 50%。立即开始免费试用！

免费试用 Framer 阅读完整评论

设置框架

首先，你得先下载Framer。注册过程就像注册其他网站一样。

创建账户：

访问 Framer 网站。你会看到一个写着“注册”或“开始使用”的按钮。点击它。

你需要输入你的邮箱地址并创建一个密码。很简单，对吧？有时候，你甚至可以用你的谷歌账号注册。

注册成功后，您可能会收到一封确认账户的电子邮件。只需点击邮件中的链接即可。

了解工作区：

好了，现在你已经进入了！屏幕一开始可能看起来有点复杂，但别担心。

中间的大片开放空间就是你进行设计的地方。它就像你的画布。

两侧会显示工具和面板。这些工具和面板可以帮助您添加形状、更改颜色和移动元素等。

创建新项目：

要开始制作，你需要创建一个新项目。找到写着“新建项目”或类似字样的按钮，点击它。

你可以从一张空白纸开始，就像从一张白纸开始一样。或者，你也可以选择一个模板。模板就像预先设计好的图案，你可以对其进行修改。

如果你选择空白项目，就可以从零开始设计自己的作品。如果选择模板，则可以节省时间。

基本设计工具

现在，让我们进入有趣的部分：创作！Framer 提供了一系列工具来帮助你进行设计。

添加形状和文本：

想画一个正方形或一个 圆圈找到形状工具。点击你想要的形状，然后在画布上点击并拖动鼠标来绘制它。

要添加文字，请点击 文本 工具。然后，点击你想输入文字的位置，开始输入。

您可以更改形状和文本的颜色。只需找到颜色选择器即可。您还可以通过拖动角点来放大或缩小图形。

处理图像：

想用图片吗？点击图片工具。然后，您可以从电脑中选择图片。

图片导入 Framer 后，您可以移动它的位置，调整它的大小。您还可以裁剪它，使其完美适配。

使用图层：

层层叠加就像一层层透明的纸，可以帮助你整理物品。

添加形状或图片时，它会位于单独的图层上。您可以上下移动图层来更改图层的显示位置。

这一点很重要，因为如果你想在形状后面放置图片，图片图层必须低于形状图层。

让事物动起来：动画

让我们的设计栩栩如生！动画能让事物动起来，变化起来。

简易动画：

你可以让物体淡入淡出、在屏幕上滑动或改变大小。简直就像魔法一样！

查找动画设置。你会看到诸如“淡入淡出”、“滑动”和“缩放”之类的选项。

你还可以设置动画的播放速度。这可以告诉 Framer 动画播放的速度快慢。

过渡：

转场动画是指从一个屏幕切换到另一个屏幕的过程。可以把它想象成翻书页。

你可以让屏幕滑动、淡入淡出或缩放。

流畅的过渡效果能让您的网站或应用程序看起来非常专业。

互动：

交互是指当有人点击或轻触某些东西时所发生的事情。

例如，您可以设置当鼠标悬停在按钮上时，按钮颜色发生变化。

或者，你可以点击图片使其放大。

这些功能让你的设计更具互动性和趣味性。

搭建一个简单的网站

好了，让我们把所有东西整合起来，搭建一个简单的网站。这比你想象的要容易得多！

网站规划：

首先，想想你希望你的网站实现什么功能。你需要首页、“关于我们”页面还是联系页面？

在每一页上写下你想要的内容。这有助于你了解需要构建什么。

创建首页：

您可以从空白项目开始，也可以使用模板。

在顶部添加一个包含您网站名称的标题。

在中间添加一些内容，例如文字和图片。

在页面底部添加页脚，包含联系信息或链接。

运用你所学到的技能，让它看起来更美观。

添加更多页面：

要创建新页面，请点击“新建页面”按钮。

设计每个页面时，都应像设计首页一样。

使用页眉中的按钮或链接将页面连接起来。

预览和发布：

点击“预览”按钮，查看您的网站外观。

如果你喜欢，请点击“发布”按钮将其发布到网上。

Framer 会给你一个指向你网站的链接。现在，任何人都可以看到它了！

Framer 的替代方案

以下是一些其他网站 建筑商 您或许想看看：

• 伽马: 专注于创建具有网站风格的演示文稿和文档。
• 耐用的: 利用人工智能技术，只需几分钟即可快速为您的企业搭建网站。
• 胡桃: 帮助您利用人工智能构建网站，重点在于内容生成。
• 代码设计: 另一款基于人工智能的网站创建工具，侧重于设计。
• 西特: 让你能够构建以视觉设计和动画为重点的网站。
• 10Web: 一个基于人工智能的WordPress网站构建和托管平台。
• 菠萝建造者: 提供基于模块的建站工具，方便用户轻松创建网站。
• 多里克: 提供简单易用的拖放式界面，方便用户构建网站，尤其适用于 SaaS 和初创公司。
• Typedream: 让你能够像写文档一样构建网站，非常简单易用。
• 吉姆多: 一款用户友好型网站搭建工具，注重简洁性和易用性。
• B12: 提供人工智能驱动的网站建设服务，并可选择专业服务。
• Appy Pie： 以其 应用构建器但它也提供网站搭建工具。

结论

所以，你学到了很多！你现在已经掌握了Framer的基本使用方法。

我们讲解了如何设置账户、使用设计工具、通过动画让事物动起来，甚至还讲解了如何构建一个简单的网站。

您已经了解了如何添加形状、文本和图片。

你学会了如何运用图层和组件来保持结构清晰。你也学会了如何让元素滑动、淡入淡出，以及在用户点击时做出反应。

接下来呢？继续探索 Framer 的更多功能吧！

尝试不同的工具，看看你能创造出什么。

如果你想了解更多，网上有很多视频和教程。

只要坚持练习，你很快就能设计出很棒的作品。

常见问题解答