画布上的代码创作。开发与设计同时进行。

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

代码和画布简直是天作之合。代码让你能够运用逻辑、状态等表达任何复杂的想法。而用于视觉设计的画布则让你能够快速地组合、布局和尝试不同的界面——Framer将两者完美结合。

Framer是一款无需编写代码的交互式设计工具。它拥有高性能的自由画布，可像许多其他设计工具一样进行直接操作。但 Framer 的画布是用 React 构建的，因此它可以渲染任何 React 组件，包括您直接在工具内编写的组件。您甚至可以为组件属性添加自定义 UI，并立即与任何人分享您的组件。

Framer 中的代码功能可以扩展工具的功能。通过使用代码组件（React 组件）或代码覆盖（高阶组件），您可以在设计之上创建高级交互、共享状态、从 API 加载真实数据，以及几乎任何您能想到的功能。它是一款真正可定制的设计工具。

编辑器和组件编译器经过重大更新后，使用体验变得更加流畅。编辑器现在使用 swc 和 wasm 来即时预览更改（或显示错误）。这是一种在 Framer 中直接构建组件的绝佳方式，当然，您也可以使用来自 npm 或其他工具（例如 CodeSandbox）的外部代码。

Framer 代码完全基于ES 模块构建。这意味着你在 Framer 中创建的每个模块都会自动成为一个 ES 模块。这样，它就可以立即在你的项目和团队成员的项目之间共享。从技术角度来说，这甚至影响了它们在画布上的渲染方式。

由于我们将 ES 模块完全集成到了应用内编辑器中，您可以导入任何基于 HTTP 的 ES 模块并在 Framer 中直接使用，即使是从 npm 导入的模块也可以。无需再进行其他操作yarn install，只需导入 ES 模块所在的完整 HTTP URL 即可：

import _ from "lodash" // Old way (need to install)
import _ from "https://jspm.dev/lodash" // ESM way

你将能够以前所未有的速度开创新想法，创建自定义代码解决方案来提升整个团队的水平，并通过一个简单的链接与全世界分享。

访问我们全新的Framer for Developers 网站，即可开始使用。您可以找到精彩的示例，或立即在我们的代码游乐场上进行练习。最后，欢迎加入我们的 Discord 服务器，与 6000 名成员组成的社区交流，寻求帮助或解答疑问。