Code丨Framer文档
代码模式 Code
先说在Framer中用代码创建交互的概念和一些简单的教程。
不用管你会啥不会啥先，我们做Framer的初衷就是希望它是一个好玩的工具。如果你已经会HTML、CSS或者JS，那会用Framer就分分钟的事儿。不会也别担心，很多一点儿代码都不会的设计师已经用Framer创作了很多优秀的作品了，可以作为提升自己的工具。接下来就是简简单单的入门教程啦～
还是先了解Framer中的概念，别怕，不是得先全部搞懂来之后才能上手。整个Framer的迭代历史都是越来越简单，越来越容易学。用的代码是简化过的，并且有自动代码，不对的也会马上告诉你，并且随时可以查看帮助文档。
流程 Workflow
在Framer中有三种方法添加交互。在这段将Design模式和Code模式的关系，怎么从其他设计软件导入文件到Framer，并给图层添加代码。
推荐的方法
先在Design模式中组织图层和元素。可以直接在画板上绘制，或者用设备专用画板** ？** 。设计模式中的层次、布局、分组可以和代码模式无缝对接，可以同时在两个模式中编辑，哪边方便用哪边。完成设计后，点图层后的小蓝点输入图层的名称（提示 name for target）就可以在代码模式中给图层添加交互了。
了解更多关于指向Targeting，此处该有链接，先放个原文链接把
另一个方法
从Sketch、Ps导入设计。图层组也是可以导入的，在代码中添加动画，在设计软件中编辑。实时更新无缝对接。
还有一个不推荐的方法
在代码中写 ' layerA = new Layer` 添加图层，定义图层属性。但是你要是玩得溜也不能把你怎样啊
预览窗口 Preview Window
在代码模式中有预览窗口，也就是模拟屏幕的窗口，可以实时的预览交互和动画（前提是得先定义交互和动画）。
这儿，可以实时反馈你在设计模式中摆的图层和代码模式中写的交互。按 CMD + R 回到初始状态。默认状态下预览窗口吸附在Framer窗口的右侧，也可以拖到Framer外面成为一个单独的窗口。「一段不知道指什么If you created your design directly on the canvas in Design, all of the layers you insert will not contain a parent artboard. Placing your layer on
the x: 0 and y: 0 position values will position the layer to the top left of the preview window.」
画板 Artboards
在Framer中画板可是响应式的。
代码模式不是可以选设备么，选不同的设备，画板中的元素还可以适配到不同的设备。
设计应用到代码 Design to Code
直接在Framer中设计的页面，可以完美的转换成代码。每个画板都被定义为一个父级，画板内的元素是子级。在代码中定位父级就自动定位里面的子级了。像 FolwComponent （页面切换？流程？）这样的交互就很容易实现了。
# 初始化 FolwComponent
flow = new FolwComponent
# 设置从画板开始流程
flow.showNext(ArtboardA)
#ArtboardA被点击的时候
ArtboardA.onClick ->
#显示下一个页面（也就是画板啦）
flow.showNext(ArtboardB)
#ArtboardB被点击的时候
ArtboartB.onClick ->
#回到上一个页面
flow.showPreviious()
