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复制代码

搞定啦！如今咱们就有了一个可交互的按钮。

按钮反馈动效

二、给卡片建立不一样的状态用于交互

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

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

给图层添加状态和给图层添加动画差很少，点击图层面板该图层名称右侧的圆环，而后点击“添加状态”。如今你进入了图层状态编辑模式，接下来就能够改变图层在该状态下的样式了。

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

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

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行代码就实现了一个不算简单的原型，比开发哥哥都厉害。

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

在页面组件中，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。