SuperAPI AI 工具集

framer-hello-world

编程与开发

查看项目

更新于 10-15 23:26

技能介绍

用途:该技能用于创建一个最小可运行的 Framer 示例,适合在开始新的 Framer 集成、测试环境配置或学习基础 Framer API 模式时使用。

主要能力:包含四部分示例。一是 Hello World 插件,使用 framer-plugin SDK 提供的 framer 全局对象,在 Framer 编辑器中插入带样式的文本层和图片,并通过 framer.showUI、framer.addText、framer.addImage、framer.notify 与编辑器交互。二是代码组件,使用 framer 的 addPropertyControls 与 ControlType 定义可调属性,组件需 export default,在 Framer 站点内渲染。三是代码覆盖,使用 Override 类型实现滚动淡入、悬停缩放等动画行为,每个覆盖须为具名导出函数。四是服务端 API,使用 framer-api 的 framer.connect 连接,读取页面列表与 CMS 集合条目。

使用方式:前置条件为完成 framer-install-auth 设置、Framer 编辑器已打开项目、插件开发服务器运行(npm run dev)。插件代码在编辑器 iframe 内运行;代码组件通过编辑器 Assets > Code > New Component 创建;代码覆盖通过 Assets > Code > New Override 创建;服务端脚本需配置 FRAMER_API_KEY 与 FRAMER_SITE_ID 环境变量。

适用场景:快速验证 Framer 插件与站点代码的搭建流程,学习编辑器交互、属性控件、动画覆盖和无头访问的基本模式。

限制与错误处理:framer is not defined 表示代码在编辑器外运行;组件不渲染通常是缺少 export default;覆盖不生效多为导出名错误;服务端 API 超时需检查 FRAMER_SITE_ID。资料未提供收费、价格与平台支持等细节。