文档

欢迎使用 Framer X,在这里学习如何使用绘图工具、组件、商店、代码。

简介

Framer X 既可以满足简单的设计需求,也可以帮助你做一些更加复杂的作品。我们认为很多设计师会将自己的组件发布到商店供其他人使用,因此即使你不会写代码也可以直接安装别人的组件来进行界面设计。如果你正好是一个喜欢写代码的设计师,那么 Framer X 就是你最好的用来构建自己组件库的工具。

Framer X 的初衷并不是帮你生成产品级的代码,而是使用你写好的代码进行界面设计。自动生成代码在产品中使用是一件无穷无尽的事,因此最好是把你已有的代码变为视觉化的组件来使用。如果你已经有了一套 React 组件,那么你可以很快导入 Framer X 使用。也就是说,你在 Framer X 中绘制的东西都是 React 组件,在需要时你可以将它们导出为 jsxhtml 代码或静态文件。

使用案例

使用案例 描述 话题
线框图 快速表达你的交互效果、界面布局、用户流程或信息结构图。 界面, 画布, 布局
视觉设计 美化界面布局,绘制图标,生成像素级的设计资源。 绘画, 导入, 导出
交互 快速将设计图转换为可交互原型,可添加基本效果,如页面跳转、滚动等。 预览, 交互, 设计组件, 商店, 分享
高级交互 用代码创建真正的产品,使用状态、数据、物理模拟、用户输入创造你自己的动效。 代码组件, 交互, 代码函数, 代码库
设计系统 管理团队组件库和设计系统,在组织中不断进化。 商店, 代码