用Framer的实例，说说设计师学习代码的那些事

@Sophia的玲珑阁：前段时间Framer改版，让这个软件大热，分出了设计和代码两种模式。我喜欢尝试新鲜事物的性格，这下子也是跃跃欲试。这一周，终于静下心来去尝试做了一个demo。通过做这个demo，来说说设计师到底有没有必要学习代码。

Framer简介

先来说说我对Framer的理解。

用Framer的实例，说说设计师学习代码的那些事

Framer是一个用来做动效的软件，用来将咱们二维平面软件设计出来的方案做成可以在手机上可以进行真实模拟操作交互的原型出来。市面上有很多种这样的软件，每个软件的原理可能不太一样，比方说Flinto，Principle，Origami等等。

绝大部分都是在视觉基础上进行一些手势的串联，设计师只需要设置出类似流程线的东西，设置好一些参数（不需要写代码），软件就会帮忙进行计算，然后渲染出demo，即咱们所说的原型。

Framer的不同之处，它是真的是让设计师去写代码呀，通过代码实现出原型，当然Framer它自己也做了很多的类似于效果包的代码库，设计师只需要调出来进行使用就可以。意思就是，不是每行代码设计师都要敲，Framer是简化后的代码模式软件。还有就是它支持Sketch等文件的导入，也就是说咱们可以在sketch上画好了，再到Framer进行动态效果的呈现，不需要将每个图层都在Framer进行代码实现。（后来验证，画图还是在Framer自己的设计模式进行画实现才比较方便）

用Framer的实例，说说设计师学习代码的那些事

怎样学习

入手Framer的时候，我先从它全英文的手册开始看，跳过设计模式（粗略看了一下觉得跟sketch的用法很像），直接从代码模式进行查看。知道了原来它是基于CoffeeScript语言进行demo开发的。当然，手册网上也可以找到部分的中文翻译，但更新不完全，我也下了一番功夫，将最新的Framer的代码手册翻译成了中文，整理好了之后会给分享给大家。

CoffeeScript我也不会，于是又从网上去找相应的官方手册，发现太难了，一点也不想看（原谅我也是个萌妹纸，偶尔也会任性）。

于是，我一不做二不休，直接从Framer官方网站的简易版手册和部分教学视频开始学习。然后画好了sketch文件，导入到Framer进行敲代码了。当然也是不完全会的，先在官网上看手册，然后加入一些学习小组的群在群里进行讨论。

然后遇到都不懂的问题（毕竟咱们都是设计师），我就在下班后拿去请教公司的开发GG们，当然也不能太多，可以分开进行问几个人，这样每个人都比较轻松。

就这样纠结了好几天，一个雏形的demo算是做出来了。

我现在说的是很轻松，每一步实施起来都是困难重重，因为不懂所以会遇到很多问题，然后自己再耐心一个个解决。

学习中的收获

这一个礼拜的收获除了自己入门的Framer，还有几点比较重要。

一是验证了我一直强调的学习方法，即实践总是让自己学习最快的流程，没有之一。

二是最为交互设计师，领悟到了之前开发GG们一直强调的一句话“设计师的方案是会影响到开发代码实现的逻辑的”。设计师在做方案的过程中不要突发奇想去想一些很创新的idea，往往这些idea可以解决当前的交互问题，可能却不知道影响了哪些地方的操作和逻辑的统一性。考虑问题的时候不单单从一个小的点进行思考，如果可以，尽量从大局，即所有的功能点都进行一些思考。操作越统一，代码越简单，逻辑越清晰，实现起来也越方便。