createwithflow.com

Flow是什么网站?

Flow 是一款面向设计师的动效与动画制作工具，主打“不用写代码”就能做出可交付的动画。官网定位是“UX Animation for Designers”，核心能力是把设计稿导入后，用类似设计软件的时间轴完成动画，并直接导出代码或媒体文件。

主要用途

• 动效设计：用时间轴做位移、缩放、透明度等动画，支持 1/100 秒精度和自定义缓动曲线。
• 设计稿导入：从 Sketch、Figma、SVG 导入，保留形状、图片、文字等属性，导入后即可开始动画。
• 交付开发：一键生成 iOS、Web、Android、React 项目代码，官网称“production-ready code”。
• 导出素材：支持 Lottie、APNG、GIF、视频、SVG 等格式，方便直接用在产品或页面里。

谁在什么情况下用

• 产品设计师要做按钮、加载、转场等界面动效，但不想学复杂的三维或代码动画工具。
• 团队需要把动效交给开发落地，希望减少用文件检查工具反复沟通的成本。
• 做 Webflow 网站的人，可以把 Flow 动画嵌入 Webflow 页面。
• 需要 Lottie 文件的场景，Flow 提供 Lottie 导出。

与同类工具的侧重差异

• 相比偏代码驱动的动画方案，Flow 的侧重点是设计师可直接上手的时间轴操作，降低学习门槛。
• 相比只做原型演示的工具，Flow 更强调导出可上线代码和多种媒体格式。
• 官网引用的开发者反馈提到，不用 Flow 时只实现了约 70% 的设想、还花了 4 天开发时间；这反映的是它在设计到开发衔接上的定位，而不是单纯的动效演示工具。

上手方式

官网写明“Get started in seconds”，并提供课程、教程和文档。付费通过 Stripe 处理，具体价格未在资料中给出，需要到官网查看当前方案。

如何将Sketch或Figma设计稿导入Flow进行动画制作?

从 Sketch 或 Figma 导入设计稿到 Flow，核心是走官方插件或 SVG，把图层属性完整带过来，再在时间轴上做动画。

导入方式

• Figma：使用 Flow 的 Figma 插件，把选中的画板或图层直接发送到 Flow。
• Sketch：使用 Flow 的 Sketch 插件，同样将选中内容同步进 Flow。
• SVG：在 Sketch 或 Figma 中导出 SVG，再导入 Flow；适合插件不可用或只想搬单个图形的情况。

Flow 官方描述是“Seamless translation from Sketch, Figma, and SVG to Flow in seconds”，并强调导入后形状、图片、文字等属性保持完整、可直接动画。

导入后能做什么

• 在类似设计工具的时间轴里拖动、对齐、选择、删除关键帧。
• 时间精度可调到 1/100 秒（厘秒）。
• 可动画属性覆盖软件里大多数可动属性，另有 30+ 标准缓动曲线，也能自定义曲线。
• 导出为 Lottie、APNG、GIF、视频、SVG，或直接生成 iOS、Web、Android、React 项目代码。

谁适合这样用

设计师在 Figma/Sketch 里已完成静态界面，需要给按钮、箭头、图标、加载态加动效时，用插件导入最省事；开发者不想手写动画代码时，可以让设计师在 Flow 里做完直接导出代码或 Lottie。

选择建议

• 想保留图层结构和可编辑属性：优先用 Figma/Sketch 插件。
• 只搬单个矢量图形或插件出问题：用 SVG 导入。
• 需要嵌到 Webflow 或交给开发：导入后直接导出 Lottie 或生产代码。

原资料中一位 iOS 开发者提到“作为开发者用 Flow 做动画很容易”，一位 CTO 提到不用 Flow 时只实现约 70% 的设想且多花 4 天开发时间——对读者的启发是：导入这一步省下的不只是操作时间，还会减少设计和开发之间的反复沟通。

Flow导出的代码支持哪些平台或框架?

Flow 的代码导出面向 iOS、Web、Android 和 React 项目，输出的是可直接交付开发的工程文件，而不是只给一段动画片段。除代码外，它也能导出 Lottie、APNG、GIF、视频和 SVG 等媒体格式，供不方便改代码的场景使用。

具体支持情况

谁适合用哪种导出

• 团队里有 iOS、Android 或前端开发：优先用对应平台的代码导出，官方描述是“production-ready code with one click”，即一键生成可上线使用的代码。
• 做 App 内动效、又不想让开发手写动画：用 Lottie 导出更省事。
• 做宣传物料、演示或需要嵌入到不支持代码的平台：用 GIF、视频或 APNG。
• 用 Webflow 建站：Flow 动画可以直接嵌入 Webflow 站点，官方页面专门提到这一点。

选择时的判断点

Flow 的定位是“设计师做动效、开发直接接代码”，所以它导出代码的价值在于减少交接损耗。资料里引用了一位 CTO 的说法：他们曾尝试不用 Flow 上线一个动效，只实现了约 70% 的设想，还花了 4 天开发时间。这说明如果项目对动效还原度要求高、开发排期又紧，直接导出代码比让开发照着设计稿手工实现更可控。

如果你只需要把动画放到网页或 App 里展示，不涉及工程集成，那 Lottie 或媒体导出就够了；如果动画要跟随产品逻辑变化、需要开发维护，选对应平台的代码导出更合适。

Flow的Lottie文件导出有什么特点?

Flow 的 Lottie 导出主打“设计工具里的动画直接变成可用的 Lottie 文件”，不需要写代码。官网在功能列表里把它单独列为一项，原话是“Everyone loves a good Lottie file... Flow's Lottie export is yummers”，强调导出结果讨喜、可直接用于产品。

具体特点

• 导出前不用碰代码：页面反复强调“No. Coding. Required.”，动画在 Flow 的时间轴里做好后一键导出，设计师可以独立完成。
• 导入来源决定动画素材的完整度：支持从 Sketch、Figma、SVG 导入，且形状、图片、文字等属性会保留下来再进入动画环节，因此 Lottie 里的元素不会在导入时丢属性。
• 可动画的属性范围广：官网称“100s of Editable Properties”，软件里能动画的属性基本都能动，Lottie 导出能承接这些效果。
• 时间精度到 1/100 秒：时间轴支持 centisecond 级调整，Lottie 的节奏可以调得比较细。
• 自定义缓动曲线：除 30 多种标准曲线外还能自建，Lottie 里也能带上这些缓动。
• 导出是整套输出的一部分：Lottie 与 APNG、GIF、Video、SVG 以及 iOS、Web、Android、React 代码导出并列，同一份动画可以按需要选格式。

谁在什么情况下用

• 设计师做完 Figma/Sketch 稿，想直接产出 App 或网页里的 Lottie 动效，而不走“设计稿→开发重做”的流程。
• 团队要交互动画但开发排期紧。官网引用了 CTO Mark Salpeter 的经历：不用 Flow 时只实现了约 70% 的设想，还花了 4 天开发时间——对读者来说，这意味着 Lottie 导出的价值主要在省下这段返工。
• iOS 开发者 Josh Arnold 的反馈是“作为开发者，用 Flow 做动画很容易”，说明导出的文件对开发侧也友好。

选择时的判断点

如果你的目标是网页或 App 内的轻量交互动画，Flow 的 Lottie 导出是核心卖点，且和 Webflow 有配合。若你要的是视频、GIF 这类成品媒体，它同样能导出，但那就不是 Lottie 的用途了。想先验证效果，可以从官网的 “Try Now” 入口用一份 Figma 或 Sketch 文件试导入再导出。

Flow的时间轴编辑器如何实现1/100秒精度的动画调整?

Flow 的时间轴编辑器把动画时间拆到 1/100 秒（资料里叫 centisecond）来调整，核心是让设计师用“拖拽 + 对齐 + 选择”的方式，像在设计工具里一样直接操作关键帧和元素，而不是写代码或改参数表。资料在“1/100s Precision”下写明可以“Adjust timing down to 1/100th of a second”，并把它和“Easy-to-Use Timeline”并列描述为：拖它、对齐它、选中它、删除它。

具体怎么用

• 拖拽调整：在时间轴上直接拖动关键帧或动画元素，改变它在时间线上的位置，从而改变动画发生的时间点。
• 对齐与选择：时间轴支持对齐和选择操作，方便把多个元素或关键帧卡到同一时间精度上。
• 精度单位：最小调整单位是 1/100 秒，也就是 0.01 秒，比常见的 0.1 秒更细，适合做快速、短促的微交互。
• 配合缓动曲线：Flow 提供 30+ 标准缓动曲线，也可以自建曲线，精度调好后用曲线控制加减速，动画会更自然。

适合谁、什么场景

• 做按钮、图标、加载动效、页面转场等 UX 动画的设计师。
• 需要把 Figma、Sketch、SVG 里的设计快速变成动画，再导出 Lottie、GIF、视频或生产代码的人。
• 对时间敏感、希望动画节奏更准的微交互，比如 0.2 秒内的反馈动画，1/100 秒精度能让节奏更可控。

选择条件

如果你只需要粗调动画时长，普通时间轴够用；如果你要精细控制快节奏动效，或者要把动画交给开发落地，Flow 的 1/100 秒精度和“一键生成生产代码”是更直接的理由。资料里也提到，有开发者认为用 Flow 做动画很容易，有团队没用它只实现了约 70% 的设想，还多花了 4 天开发时间。

没有动画经验的设计师如何快速上手Flow?

没有动画经验的设计师上手 Flow，关键是从“移动已有图层”开始，而不是先学代码或复杂时间轴。Flow 的定位就是“UX Animation for Designers”，强调无需写代码，并且能从 Sketch、Figma、SVG 直接把形状、图片、文字等属性完整导入后开始做动画。

先走最短路径：导入 → 拖动 → 导出

1. 从 Figma、Sketch 或 SVG 导入设计稿，Flow 会保留图层属性，不需要重新搭建。
2. 在时间轴上直接拖动、对齐、选择、删除元素来产生动画，它的操作逻辑接近设计工具，不是传统编程式动画工具。
3. 需要交付时，一键导出 Lottie、APNG、GIF、视频、SVG，或生成 iOS、Web、Android、React 项目可用的代码。

没有经验时优先用这些功能

• 时间轴：拖拽式操作，先做位移、缩放、透明度这类最直观的变化。
• 自定义缓动曲线：Flow 自带 30 多种标准曲线，不够时可以自己画，让动画不显得生硬。
• 1/100 秒精度：调整节奏时能细到厘秒，适合做按钮、加载、转场这类短动画。
• 可动画属性多：软件里能动画的属性基本都能在 Flow 里动画，不用因为功能缺失换工具。

适合谁、在什么情况下用

如果你是产品设计师，需要给按钮、图标、页面切换做微交互，又不想等开发排期，Flow 的导入和导出链路比较直接。资料里一位 iOS 开发者提到“作为开发者用 Flow 做动画很容易”，一位 CTO 提到不用 Flow 时只完成了约 70% 的设想、还花了 4 天开发时间；这说明它对设计和开发之间的交接也有帮助。另一位第一次学动画的产品设计师表示“很容易开始”。

选择条件

• 你已经在用 Figma 或 Sketch：导入几乎无缝，适合直接上手。
• 你需要 Lottie 或可交付代码：Flow 支持 Lottie 导出和 iOS、Web、Android、React 项目代码生成。
• 你完全零基础：先从按钮、箭头、加载图标这类小元素练起，不要一上来做完整页面动画。

下一步动作

打开 Flow 的教程或课程资源，跟着做一个“按钮点击反馈”或“图标位移”练习；把 Figma 里的一个静态按钮导入，只改位置和透明度，导出 Lottie 看效果。熟悉时间轴后再加自定义缓动曲线。