DesignCode 出品的 Framer Playground 交互动效教程。内容包含布局、动画、手势交互、Lottie、API 等，教你做出一个完整的 App。目前该教程免费。 

前几天，设计工具 Framer X 又更新了一个版本，按他们的话来说是 2019 年以来最大的一次更新。既然是最大的更新，肯定有一个重磅功能，这一次的重磅功能就是 Playground——一个内置的专属于设计师的代码编辑器。  那么这次发布的 Playground 到底是什么呢？和以前的代码编辑器又有什么不同呢？ 我大概看了一下官方的博文，总体来说就是做了两件事：提供了一个基于 React 的基础代码库，同时还提供一个针对这个库优化过的代码编辑器。 那么具体该怎么用呢，你可以参考这篇文章：https://mp.weixin.qq.com/s/V0ijT0ciC3AHxOgZ6N_95A 。 **参考链接：**<br/> - [Framer X Playground 介绍](https://www.framer.com/blog/posts/introducing-framer-playground/) - [Code 文档](https://www.framer.com/docs/code) - [API 文档](https://www.framer.com/api) - [Framer React 指南]( https://paper.dropbox.com/doc/Framer-ES6-React-Guide-Th7joG9fFSSiyZgOFYqj6) - [在线示例](https://codesandbox.io/embed/z2j2q261k3)

Framer X 已经发布好几个月了，相较于之前的 Framer Studio，X 不再分为设计模式和代码模式了，而是提供了「设计组件」和「代码组件」。「设计组件」和 Figma 的组件、Sketch 的 Symbol 大同小异，而代码组件则是完全使用代码编写的组件。同时，X 也摒弃了过时的 Coffeescript，而采用时下火热的 React。 代码组件，顾名思义是使用代码编写的，而不是通过拖拽图形组合而成的。X 的代码组件很特别的一点是可以自定义它的哪些属性可以调节，就像你在右侧设置一个矩形的背景色、圆角一样，你可以在右侧调整一个组件的自定义属性。 今天，我将通过一个简单的评论组件来介绍在 X 中如何使用代码编写组件。

这是一篇译文，原标题 “How to create a simple prototype with Code Overrides in Framer X”，原作者是 Framer.com 的设计师 Benjamin den Boer 。这篇文章主要讲解的是，如何在 Framer X 中使用 Code Overrides 在不同的组件、图层之间进行连接，使其产生交互反应。

早在 6 月份， Framer 官方就在网站上放出了新产品 Framer X 的消息，并表明这是一个“突破规则的产品，能够更好地融合设计和开发”。同时，这款产品最开始的一条 Slogan 是 “React meets design” ，React 是 Facebook 2013 年开源的一款组件化构建界面框架，主要特点是用数据维护界面状态。这一切都给我们很丰富的想象空间。 终于，我在这周收到了 Framer X 的测试版，简单把玩了一下，试着写一下我的感受。 先抛出结论：Framer X 更像一个设计工具了，布局、组件、路径这些功能都很完善；但是对于想要实现高保真可交互原型的人来说，却更难了，因为要学会使用 React 构建组件；不过它却更接近一个可以构建设计系统的设计工具了。

2017 这一年 Framer 更新迭代很频繁。这一年我们的设计模式逐渐支持了渐变、特效和导出功能，在年尾时又添加了 frame 、形状和矢量绘图，到现在 Framer 已经成为一个特性丰富的界面设计工具。如果你已经是个原型达人，这意味着你不再需要额外的图形绘制工具作为辅助了；而如果你刚刚接触原型设计，你会发现 Framer 的全流程设计方式会让你的工作变得简单直观。 本文介绍了 Framer 最新的 10 个设计特性（以及快捷方式），以帮助你更加高效地进行设计。

Facebook 推出的前端框架 React 现已被广泛使用，其组件化开发理念大大提高了开发效率。对于设计师来说，这种组件化思维和设计工具中的组件式设计也是相通的，而且设计工具 Framer 已经支持设计师直接使用 React 构建交互式组件。因此，设计师有必要了解或学习一下 React，这对于设计与开发之间的协作是很有帮助的。

上个月 Framer 放出了新产品 Framer X 的预告片，让我想起了这篇旧文。这篇文章讲的是代码给我们的设计流程带来了怎样的变化，以及在不久的未来我们可以怎样利用这个工具。 除了设计工具标配的图形编辑、响应式布局以及快速连线原型，最大的变化是 Framer X 引入了组件——可以使用 React （ Facebook 创建的一种用于组件式开发的代码框架）编写组件，并存入组件库用以复用。借助于代码“唯一数据源”的优点，构建一套完整而强大的设计系统变成了可能。 对这个新的设计工具有什么特性好奇可以前往 https://framer.com/x 查看，阅读下面的文章可以了解代码在设计流程中的演进。

设计师学编程要怎么学？我在和很多设计师打交道的过程中，发现大部分人对于学习编程会存在一些误区。 比如很多人虽然想学但又认为编程太难有排斥心理；相对地也有一些人用CSS写了一些样式会觉得前端很简单；还有些人不知道从何下手，就开始啃起了枯燥无味的w3school文档（web技术中文文档）。于此我觉得设计师想学会写代码一定要对编程有正确的认知，既要对技术保持一颗敬畏的心，又不能从潜意识里排斥它。 我做了两年前端开发，同时也做过许多设计的工作。基于自己的经验，对于设计师学编程这件事我有一些自己的想法和建议想分享给你。

对于很多设计师来说，编程是很难的一件事情。但是，其实最大的阻碍是“你觉得代码难”，而不是它真的特别难。作为设计师，我们学编程并非为了写出产品级代码，而是能够以代码为工具，让自己更强大。 这篇文章以写文章类比写代码，帮助你理解代码世界的逻辑，让你更加平滑地学会编程。

对于设计师来说，世界上最孤独的事就是自己的作品只能自己欣赏。 正因为此，今天我要给大家介绍几种方法来分享自己的 Framer 作品。比较常见的两种方法是这样的：如果你设计的是移动端 App ，可以安装 Framer Preview 在手机上预览；如果你设计的是桌面端原型，可以在浏览器上直接预览。

当我们使用 Framer 做原型时，一般会选取一个手机或电脑包裹住原型来彰显自己的品味。尤其是在最后给各位老板演示的时候，使用了哪个设备决定了老板对我们的态度。所以原型有多有趣其实并不重要，重要的是你选择了什么设备。

相信不少使用 Framer 的设计师在学习一段时间之后都会遇到这个问题——在循环中给图层添加事件总是出错。 来看看到底是为什么，以及该如何解决它吧。

最近我和 Ben 的主要工作就是使用 Framer 和 Sketch 设计 VR 原型，在这篇文章里我们总结一下这个项目的经验。 在此之前我们对 Framer 知之甚少，关于 VR 原型的经验也几乎没有。所以这篇文章的目标读者也是想要尝试这个却无从下手的人。使用 Framer 设计 VR 原型的优点是可以快速迭代，而且不需要任何 3D 渲染器。下文所写的这些方法都是十分简单且灵活的，希望它能够在 Framer 或 VR 原型设计之路上助你一臂之力。 我们的目的是在 VR 环境中创建一个类似于鼠标悬浮响应的动画，请使用电脑访问 https://framer.cloud/quZbq 来体验我们的原型。 - 翻译：Jun - 原文作者：Sophie Rahier - 原文地址：https://blog.framer.com/comprehensive-guide-to-prototyping-vr-in-framer-29b7dd1bdd2a

前段时间 Airbnb 开源了跨平台动画解决方案——安比迎·老铁（ Lottie ），它可以让设计师和工程师更高效地实现交互动画。它的工作原理很简单，就是让设计师把 AE 产出的动画转换成一段数据文本，而工程师只需要通过 Lottie 提供的动画解析库就可以将数据文本还原成动画，随意地使用在 iOS、Android 以及 Web 等平台。不仅如此，工程师还可以对动画的过程进行控制，使得实现一些高质量交互动画成为可能。 这段时间我研究了一下 Lottie 的工作流程，编写了一个 Framer Module。这个 Framer module 将 Airbnb 的 Lottie 结合进来，让你能够通过 Framer 加载 AE 导出的动画，并能对这个动画过程进行控制。

作为一个在音乐公司工作过的 boy ，我准备用 Framer 做点和音乐相关的东西。大家应该还记得语文老师讲过一种修辞手法叫“通感”，就是在描述一个事物时将触觉、听觉、视觉等交换挪移。前几天在 Framer 的网站上发现了一个叫 Debashish Paul 的人，将声音“通感”成了视觉图像。 让我们来学习一下如何用 Framer 来做一个音乐可视化的效果。

事件是Framer中的一个重要概念，它是交互动效的触发开关。它主要包括一些手势事件（触摸、滑动、双击等），还有动画运行、状态切换、页面切换等事件。我们一般通过监听事件的发生来触发一些交互动作。

很多设计师都想尝试一下Framer，体验用代码做交互原型的感觉。然而由于Framer团队很小，没有太多精力开发Windows版软件，Windows用户一直没法体验。但是，Framer的核心引擎是开源（https://github.com/koenbok/Framer）的，所以我们可以通过搭建其引擎环境体验Framer。 今天我要给大家介绍一种方法，不用安装任何编辑器，直接在线上使用。还记得之前给大家介绍的前端工程师的 dribbble 吗？没错，就是 Codepen（网址是http://codepen.io）。这是一个前端开发者们分享 Demo 的网站，他们会在上面直接编写代码并查看效果。 你可以在原文中查看如何在 Codepen 中使用 Framer。

Framer 是一个以制作微交互动效而著称的强大原型工具。在其他软件中很难表达的手势、动画和逻辑在 Framer 中却很容易制作。然而，当你想要把这些微交互放置在一个完整的 App 中去演示的时候却比想象中要难。用 Framer 创建一个完整的可操作的 App 界面流是可以的，不过需要花费大量时间，但是像 InVision、Marvel 或 Flinto 这些软件只需要点击几下就可以实现了，可是它们却不太好实现一些精美的微交互。 ViewCotroller（视图控制器）模块就是为了解决这个问题而出现的，它能够帮助你使用 Framer 快速地创建一个完整的 App 演示。

状态和图层、动画一样也是一个对象，它包含了一个图层的位置、颜色、大小等信息。状态可以看做是动画的节点，而动画可以看做不同状态间的过渡。我们可以给一个图层定义不同的状态，当它在不同状态之间变换时就形成了动画。图层、动画和状态是Framer的三个基本要素。

动画一般和图层一起用，它可以让图层动起来。我们可以通过一系列属性，诸如执行动画的图层、需要变化的可视属性、动画时间、动画延迟时间等，来定义一个动画。动画也提供了一些函数可以让你控制它的开始、结束和反向。

图层在Framer中是一个很基础的元素，同时也是很重要的一个概念。这篇教程将讲述如何定义图层，如何通过图层属性来定义其外观样式，以及图层之间的层级关系。

在 Framer 中有这么一个函数模块，它可以让你在代码中更方便地处理一些事情。它所包含的功能及其丰富，可以处理数值范围、设置延时、循环定时、检测设备等，可以说是 Framer 中的瑞士军刀。在前面的一些教程中我们已经用过了它的几个功能，比如延时方法 delay，但我没有细说。这篇文章我将全面的介绍一下这个函数模块——Utilities。

使用 Framer 制作一个红心翻页且自带倒计时效果的动效。

使用 Framer 做一个支付宝余额数字从小变到大的动效，假装自己很有钱。

学会使用 Framer 做一个类似于 Path 的弹出式菜单动效。

在 Windows 中没有 Framer 客户端，但是你可以以纯代码的形式来做原型设计。

Framer 是一款支持通过代码实现交互效果的设计工具，通过它设计师可以设计复杂的可交互原型。同时，Framer 支持 Sketch 和 Photoshop 源文件导入，实时预览交互效果，也可以在移动设备上进行测试。在图形化设计工具大行其道的时候，Framer 选择了更高效的方式，虽然学习曲线较斗，但学会之后不仅能制作高还原度的原型，还能让设计师对代码的原理略知一二，文件源码对于开发工程师也有一定帮助。

本教程翻译自 prototypingwithframer，作者 Kenny Chen，用户体验设计师。[prototypingwithframer](http://www.prototypingwithframer.com) 是 Kenny 的博客，会不定期的分享他使用 Framer 的教程和心得。

这是很早之前的一篇教程，那时候 Framer 还在使用 coffeescript。虽然现在不适用了，但看看思路也还是可以的。

Framer 不是一款很大众的原型工具，因此网上可以找到的学习资源不多。今天我把自己接触到的资源进行汇总，希望能帮助你更好地学习 Framer。 需要说明的是，目前英文资料比中文资料更加丰富，所以英语不太好的设计师朋友们还是尽量逼迫自己啃一下英文，对自己以后的设计生涯帮助会很大（来自一个英语四级没过但毕业后狂补并至今受益的我的建议）。

当你在原型中需要做一些精准的逻辑或者要实现一些特殊效果时，Framer 是不二之选，尽管它不是那么容易上手。不过现在不一样了，最近 Framer 发布了一个全新版本，新增了设计模式，你可以直接在 Framer 中设计你的原型并通过代码给它添加功能，在这个过程中你不需要任何第三方软件和其他的编程技巧。 来吧，让我教你如何使用 Framer 来写简单的代码逻辑，即使你没接触过编程也没关系。你将会学会如何充分结合设计和代码的优势来设计制作一个可交互原型，并学会使用一些代码让你的原型更加有趣。 - 原文：https://blog.framer.com/framer-tutorial-from-design-to-code-components-and-beyond-d2b147838167 - 作者：Wojciech Dobry - 翻译：Jun

上个月 Framer 官网首页放出了一个很短的预告片，表明五月底将会有重大的版本更新。短片最后则出现了一行字： Design Code Collaborate ，预示着这个版本将会把代码和可视化设计更好地结合。