Framer 指南：从设计到编程、组件及其它

原文：blog.framer.com/framer-tuto…
作者：Wojciech Dobry
翻译：Jun

看下面这两个很 cool 的原型，它们都是使用 Framer 制作的。是不是也想做一个？没问题，看完这篇文章你就会使用 Framer 来设计自己的原型了。

当你在原型中需要做一些精准的逻辑或者要实现一些特殊效果时，Framer 是不二之选，尽管它不是那么容易上手。不过现在不一样了，最近 Framer 发布了一个全新版本，新增了设计模式，你可以直接在 Framer 中设计你的原型并通过代码给它添加功能，在这个过程中你不需要任何第三方软件和其他的编程技巧。

来吧，让我教你如何使用 Framer 来写简单的代码逻辑，即使你没接触过编程也没关系。你将会学会如何充分结合设计和代码的优势来设计制作一个可交互原型，并学会使用一些代码让你的原型更加有趣。

Framer 基础

在开始之前，你需要先下载试用软件，如果你是壕已经购买了就当我没说。如果你还没有买，可以先下载试用再做决定。试用版有两周的时间而且可以使用它所有的功能，这个时间绝对够你入门了。

安装好之后，欢迎页面上会有一些示例项目，你可以进去把玩把玩。OK，看完了吗？我们要开始写原型了哦。

（在这一次的教程中，我会直接使用 Framer 进行界面设计，尽管它还提供了诸如 Sketch 、Figma 导入和直接代码实现的方式。）

Framer 新版本——设计模式

在这篇教程里面，我们将会在几分钟内使用最少的代码来完成这三个很酷的原型?：基本交互动作、滚动组件和页面组件。

最新版 Framer 有一个很牛逼的特性：设计模式，它可以让你像在 Sketch 或 Figma 中那样进行可视化设计。你可以画矢量图形、导入图像、或者是创建一个文字图层并调节它的样式。如果你性子比较急不想在几个软件中切换的话就可以直接在 Framer 中进行快速设计。

开始界面设计:

在第一部分，我们先要设计一个最基本的界面。这个界面的设计包括三种不同类型的图层：矢量图层、图片图层和文字图层。

第一步: 创建一个小按钮和背景

请先切换到设计模式，添加一个画板，就像在 Sketch 中一样。本篇教程里，我们将会使用 iPhone 7 大小的画板（买不起只能在这里画画了），这就是我的画板默认大小了。同时，我给它填充了蓝色的背景。

接下来，使用矩形工具在下方中间画一个简单的圆形按钮。

第二步：创建一张图像卡片

我们直接从电脑的文件夹里面选一张图片拖到 Framer 中，并使用右边的属性调节调整一下他的样式。我用了一张简单插画，调整了投影什么的让它看起来像一张卡片。

第三步：添加标题

Framer 也支持添加文字图层，就像在其他设计软件中一样，你可以选择字体、字号、对齐方式、字间距等。

第四步：告诉 Framer 哪些图层是可交互的

画完了所有图层在给 Framer 添加交互动画之前，我们还有最后一步：我们需要告诉 Framer 哪些图层是可交互的。点击图层面板中图层名称右侧的圆环（靶子图标），给想要添加动画的图层改个名字以在代码中使用。为了长远考虑最好给每一个图层起一个有意义的名字，我给给它俩取名为 card 和 button 。

第五步：定义一些全局的颜色变量

一个好的编程习惯是在开始前给原型定义一些全局变量。你可以定义一组颜色、基本的字号行高，或者画布尺寸等，这会帮助你节约后面的工作时间。

当你想好需要哪些颜色之后，就可以在代码编辑器中给他们都起个名字，然后使用 = 给它们赋一个值，可以是 HEX 、RGB 或者 RGBa 格式的色值。请注意这些变量定义一定要放在最前面。

#    变量 -------------------------------
blue = "#005D99"
green = "#3DBE8B"
white = "#FFFFFF"复制代码

第六步：添加相对位置

在新版的 Framer 中，让你的原型支持响应式很简单。你可以在设计模式下设置图层的相对位置，就像下面这样：

这里有一些常用的方法，帮助你在代码中对齐或者计算图层位置。如果你想让你的原型是响应式的并在之后添加一些交互效果时会发现这很有用。

# 这些代码教你如何对齐图层
x: Align.center(0) # 水平居中对齐图层
x: Align.center(200) # 在水平居中向右偏移200px处
x: Align.right(0)
x: Align.left(0)

y: Align.center(0) # 垂直居中对齐图层
y: Align.top(0)
y: Align.bottom(0)
# 你也可以使用一些变量
width: Screen.width # 当前设备宽
height: Screen.height # 当前设备高
# 当然你也可以使用图层名来引用该图层的坐标
x: layerA.x # layerA 水平位置
y: layerA.y # layerA垂直方向 位置
width: layerA.width # layerA 的宽度
height: layerA.height # layerA 的高度
# 你还可以结合这些，进行一些数学计算
    width: Screen.width / 2 - layerA.width复制代码

都搞定啦？开始吧

现在我们在 Framer 中已经创建了好几个图层，是时候开始我们的交互部分了。

好开心，比较枯燥的过程都完啦，现在是时候开始处理交互了。你可以从这里先下载原文件。

1. 创建按钮反馈动效

在设计任何动效之前，我们都需要想清楚这个动效是怎样被触发的。可以使一个用户的点击、一个动画的完成、一张图片的加载完毕或者手机陀螺仪的变化。

第一步：创建交互事件

先来个简单点的，我们假设是在你点击之后触发的按钮动效，可以像下面这样添加一段代码：

layerA.onTap (event, layer) ->复制代码

Framer 会自动添加这段代码，它的意思是当你点击按钮图层时，会发生一些事情。

第二步：给事件添加动画

我们设置好触发事件之后，需要给它添加一个动画。点击图层面板中按钮图层右边的圆环，选择“添加动画”，Framer 就会转到动画编辑模式下，此时你可以缩放、移动、旋转或者改变任意其它属性。

在这个时候 Framer 会自动在后面添加几行代码。（不要担心，你还是可以在动画面板中调节它的）

button.onTap (event, layer) ->
    button.animate
        borderRadius: 27
        borderWidth: 10
        borderColor: "rgba(115,250,121,1)"
        options:
            time: 0.30
            curve: Bezier.ease复制代码

恭喜你！你已经使用 Framer 创建了人生中第一个交互动画。不过这个交互效果只能被触发一次，没关系，后面我会说怎么修复。之所以只有一次的原因是我们没有定义动画完成之后的事件，其实当点击动效完成时，我们应该让按钮的各项属复原。

第三步：复原动画属性。

我们来添加另外一个事件以停止动画：

写下这么一行代码：

button.onAnimationEnd (event, layer) ->复制代码

接着添加代码，让按钮进行另一个动画来复原各项属性。

button.onAnimationEnd (event, layer) ->
    button.animate
        borderWidth: 100
        borderColor: "rgba(255,255,255,1)"
        borderRadius: 100
        options:
            time: 0.3
            curve: Bezier.ease复制代码

搞定啦！现在我们就有了一个可交互的按钮。

按钮反馈动效

2、给卡片创建不同的状态用于交互

好了，现在你知道了如何给图层添加动画并使用一些事件来触发动画，但是多数情况下我们是通过给图层添加不同状态来实现动画效果的。你可以给一个图层添加多个状态，在每一个状态下都有着不同的属性，如位置、尺寸、透明度等。

第一步：给卡片图层添加状态

给图层添加状态和给图层添加动画差不多，点击图层面板该图层名称右侧的圆环，然后点击“添加状态”。现在你进入了图层状态编辑模式，接下来就可以改变图层在该状态下的样式了。

请注意代码的缩进，这一次我们要顶着代码编辑区左侧开始写。

在这个例子里，我给卡片图层添加了两个不同状态。

card.states.a =
    width: 248
    height: 287
    x: 63
    y: 190
    borderWidth: 10
    borderColor: "rgba(115,250,121,1)"
card.states.b =
    x: 139
    y: 529
    width: 98
    height: 98
    borderRadius: 49
    borderWidth: 1
    borderColor: "rgba(255,255,255,1)"复制代码

第二部：添加事件

添加好不同的状态之后，我们需要一个事件触发图层在不同状态间切换才可以看到效果。我我们一起来创建触发事件吧：

button.onTap ->
    card.stateCycle()复制代码

这段代码所做的工作，就是在我们每次点击时按顺序轮流循环切换状态。如果你想要切换到某个确定的状态，可以用下面这段代码：

button.onTap ->
    card.stateSwitch("b")复制代码

可是看了一下效果我不太满意，感觉不是很完美，所以我又调整了一下两个状态之间过渡动画的速度和运动曲线。

card.animationOptions =
    curve: Spring
    time: 0.8复制代码

iPhone 原型的状态转换交互

使用事件你可以干很多事情，目前为止你已经学会了如何创建一些基本的交互。不过想要做一些复杂的事件交互还是有点难度的，但请不要害怕，Framer 中文文档里面一般都能找到答案。

组件：加快你的工作流程

是时候使用 Framer 组件来加快你的工作流程了。为了更好地理解这篇教程，请先下载该示例源文件：framer.cloud/WTySI。

我对这个原型做了一点点修改。现在这个原型里面有一个很长的列表，它的内容已经超出设备屏幕了，导致我们看不全。没关系，我们想个办法把它变成可以滚动的。

第一步：创建图层并设置组件

我们先创建一个比屏幕还要长的图层，然后把它变成代码目标并命名为 list 。接着切换到代码模式，这一次我们不使用左侧的调节工具而是直接使用代码来调节这个图层是指可以滚动。

scroll = new ScrollComponent
    width: Screen.width
    height: Screen.height复制代码

这段代码创建了一个和当前屏幕一样大的不可见区域。

第二步：告诉Framer你想滚动哪个图层

啥事儿都没发生对吧？因为我们还没有告诉 Framer 让哪个图层滚——————动。很简单，我们只需要把 list 图层添加为滚动组件的内容（ content ）就可以啦。

list.parent = scroll.content复制代码

第三步：只允许纵向滚动

试一试，现在是不是可以滚动啦？但是好像可以随意滚动，可我们只想上下滚动啊喂，那我们就想个办法禁止横向滚动吧。

scroll.scrollHorizontal = false复制代码

滚动组件

哇！有没有发现你竟然只写了5行代码就实现了一个不算简单的原型，比开发哥哥都厉害。

2、页面组件: 从一屏滑向另一屏

在页面组件中，Framer 让你可以一屏屏滑动，停下时会固定卡在一个位置不动。

使用页面组件时，Framer 让你可以一屏屏滑动，停下时会自动停留在某个页面不动。

可以用页面组件实现的比较流行的交互效果是滑动切换屏幕，和这个原型类似，你可以下载它把玩把玩：framer.cloud/icddT。

第一步：设置页面组件

首先我们应该先在代码编辑器中用页面组件画一个盒子，一个装满了黑魔法的盒子。

page = new PageComponent
    width: 315
    height: Screen.height
    x: Align.center
    scrollVertical: false
    clip: false # 超出组件尺寸的内容不会被隐藏复制代码

看这段代码应该不是很陌生吧？和上面我们设置滚动组件一样，在这里我们创建了一个页面组件并对其进行初始的设置，现在我们往里面添加一些图层用来滑动。

第二步：创建图层

我比较懒，所以我将会继续使用第一个原型中的设计图。不过有点不同的是，这一次我们导入两张图片。

首先我们把画板变成之前的两倍宽。在画板属性面板中，找到宽度 width 并把它乘以 2（在后面加上 *2 ）。把这两张卡片挨着放在一起，同时给它们添加代码目标，一个叫 card1 另一个叫 card2 。

第三步：把图层添加进页面组件

在刚才的代码后面，加上这两行：

card1.parent = page.content
card2.parent = page.content复制代码

它的意思是把这两个图层添加进页面组件。

页面组件允许你在不同页面间滑动，横向纵向都可以

页面组件允许你在不同页面间滑动，横向纵向都可以。此时你已经完成了这个页面切换的原型。

最后

这一片指南就是这些内容，希望这篇教程可以帮助你入门 Framer ——这款最强大的原型设计工具。你也可以加入 Facebook 小组，在这里会有很多人帮助你。

想要更深入的学习，你可以阅读 Framer 中文网里面的内容，订阅豆瓣阅读专栏《 Framer 原型设计指南》，或关注公众号 codesigner。