FramerX & Web 系列教程简介 | 三木的课程

视频版本

--------------------------------

文字版本

--------------------------------

Hi 我是三木

这是Framer X & web系列免费系列教程的第一期视频，那这期视频呢主要是和大家简单介绍下这套课程，让你对Framer有个基本的了解，同时要让你知道学习使用Framer首先需要具备哪些知识，以免浪费大家的宝贵时间，看了半天的课程内容，发现这款软件完全不适合自己。

我把本期的内容分为以下六个问题

1. Framer是一款怎样的软件?

2. 我是谁?我为什么要做做Framer的课程？

3. 什么人/团队适合使用Framer?

4. 本套课程适合什么人，内容结构如何？

5. 课程如何更新，在哪里可以看？

6. 学习过程中遇到问题怎么办？

首先是第一个问题

Framer 是一款怎么样的软件？

Framer是一款利用前端代码和设计工具结合来实现高保真原型的一款软件，原本只能在mac上使用，Framer 目前有两个大版本一个是老版的Framer Classic，可使用coffeescript语言进行高保真原型的制作 ，另一个是现在主力维护的FramerX，以react框架为基础，可通过很多api实现高效的高保真原型制作，而Framer web其实就是FramerX的网页版，核心功能和使用逻辑上没有区别，只是可以通过浏览器直接使用，也正是因为这样，现在window的电脑也可以使用Framer了。

那我在录制这个教程的时候，其实framer web还没有正式上线，我用的是内测的账号，如果你看到这个视频的时候Framer web已经正式上线了，那你可以亲自去体验一下。

在我看来，Framer和其他原型设计工具相比最大的特点是 真实 和 灵活

真实表现在可以实时获取真实的产品数据并且注入到原型中，让你的原型和真实的产品体验尽可能的保持一致。

灵活，它可以利用代码快速地调整产品的交互和动画效果，根据需求动态地生成需要的组件和页面元素，于此同时还能将代码和在画板中绘制的各种组件高效地结合，快速生成想要的各种效果。而且它也有很多别人开发好的组件，可供我们使用，可以大大提高我们的设计效率。

Framer web也支持高效的团队协作的模式，多人同时可操作一个项目并进行评论反馈等等操作。

不过有一点你一定要注意，Framer一定要科学上网才能更好地去使用它。

那接下来的内容里，如果我没有特别说明，我说Framer 一般就是指代FramerX

第二个问题

我是谁？我为什么要做Framer的课程？

我是谁这个人生终极问题，emmm。。。简单的说，我就是一个喜欢研究前端的设计师，我做过不少设计工作，平面的，电商的，品牌的、UIUX，不过我大学学的是金融，从事设计主要是兴趣和爱好，我的经历这里就不多说了。

这是我第二次做Framer软件的教程，第一次是去年年中的时候做的Framer classic ，也就是老版的Framer的教程 ，那也是我第一次试着做教程，做得很粗糙，讲的也不是很好，要命的是我一做完那套课程，FramerX出来了，而且整个产品的逻辑和classsic相差很大，感觉非常酸爽。

那时隔一年多，我又开始继续要做这个Framer X的教程了。

在我看来Framer它既体现了互联网产品设计工具的发展趋势，同时它又可以帮我练习我的前端代码能力，又能实现很多一般软件做不到的高级复杂的交互动效，不过最关键的应该是，我在网上找不到好的FramerX的中文教程，英文的教程也是比较零散，哪怕是它官网上的，也是不成体系，学习起来效率很低。所以，我就决定自己出一套的成体系的framer教程，一方面可以在出教程的过程中进一步学习和提高自己的前端技能，同时也能更系统地把这款软件学习得更加透彻，当然，如果有对这款软件感兴趣的同学，我也希望这套课程能帮助你更高效地去学习好这款软件。

除了免费教程和平时的一些分享，我也在做一些针对设计师的前端基础入门和进阶的教程，不过这些可是收费的，有兴趣的同学也可以友情关注下我的公众号。

什么人/团队 适合学习和使用Framer X？

Framer的高效实用离不开一定的前端基础，也就是html、css、JavaScript这三种语言。如果你了解这几门语言，或者说有一定前端的基础，那么对于你学习使用Framer是非常有帮助的。如果还熟悉React的框架，那么就更好了，因为FramerX就是基于react的。

团队也是一样的，如果你的设计团队里面有那种懂前端的设计师，或者你们就是由一群懂前端的设计师组成的团队，那么这款软件能有效地提高你们的设计工作效率。

那我这里简单粗暴地做了一个对比，你可以以这个做一点参考，了解一下前端知识对于使用Framer的重要性。

如果你不知道react是什么 你能发挥framer的 5%的能力

如果只是简单用过react 你能发挥framer 30%的能力

能用react写网站 你能发挥framer 80%的能力

前端能力扎实 react非常熟悉 并且你对有创意的交互方式和动画效果非常感兴趣 你能发挥framer 120%的能力

那听到这些，如果还没有关掉的视频的小伙伴，那么我想告诉你，其实你也可以通过Framer这个软件来帮你去学习前端开发，如果你是一个刚入门前端不久的设计师，如果你开始接触react，那么用Framer进行学习和练习是非常好的，因为写交互的功能和细节的动效其实是非常锻炼写代码的逻辑性的，同时也能很好地帮我们理解和巩固前端的基本知识，并且能迅速提高我们的开发能力，而Framer可以很直观地让我们看到代码产生的视觉和动态效果，是非常适合设计师使用的。

本套课程适合什么人，内容结构如何？

首先我要再强调一次 本教程不适合完全没有前端基础的同学！

我分享Framer教程的初衷就是让更多有前端基础的设计师，可以更快地上手Framer，而不是让没有任何前端基础的同学，在短时间内学很多前端基础知识，然后再去生搬硬套做一些效果出来，我觉得这没有意义，也不是好的学习方式，所以如果想学好用好Framer，越扎实的前端能力是越好的。

那课程中我以Framer X作为演示，但是也会介绍Framer web的界面布局，因为两者的整体功能和产品逻辑是一样的，只有一些界面上的区别和一些细小的差异，所以只要你学会了Framer X，那么Framer web也是一样用的。

那这套Framer 教程的整体结构我主要分为四个部分

第一个部分是不需要前端知识的部分，主要讲解的是软件的设计工具，这部分内容不需要懂前端或者代码也能使用

第二部分是使用代码的部分 这部分主要讲的Framer一些组件的api和工具，代码和设计结合的使用，主要是Override以及如何开发自己的可在设计面板中进行参数调节的组件，还包括其他的一些实用的和代码结合的使用方式，比如如何引用真实外部数据，如何使用lottie动画等等

第三个部分就是案例实战部分，我会把一些常见app的一些交互作为案例进行真实还原再现，用framer进行实现，这个部分会持续阶段性更新

最后一个部分是关于最佳实践的部分，主要是要分享一下如何通过Framer实现design system 以及团队协作等等

在课程中我不会讲一些很基本前端知识，比如css，html元素、js中变量、对象或者三元运算符等等，所以需要你有比较好的前端基础，但是我会讲framer中的一些api和工具的使用要点，我会讲交互效果我是如何思考的，如何一步步拆解，如何从0到1把这个功能通过Framer实现出来，以及一些我自己在学习和使用过程中总结出来的小知识点。

课程是如何更新的，在哪里可以看？

整套课程是边制作边更新的，做好一期更新一期，目前都是免费的内容，所以整体的更新速度不会那么快，这些课程内容会在B站和YouTube上进行发布，同时微信公众号也会同步推送更新的内容视频，但是如果你想持续学习的话，最好还是在B站或者YouTube上观看。

学习过程中遇到问题怎么办？

我在slack上创建了一个workspace，如果你之前用过slack，你可以自己加入进来，在我的公众号里有我的workspace的slack加入地址，如果你没有用过slack，没关系，我专门录制了一个小视频告诉你如何使用slack，你可以去我的公众号或者B站和YouTube上都看的到，看完之后你就知道我前面说的slack加入地址怎么用了。

在slack中，你可以进行提问和分享，微信群我就不想建了，我知道你已经有太多有用没用的微信群了，如果真的有需要可以加我的个人微信，如果你想要课程中的案例源文件，直接关注我的公众号就能够找到。我建议大家都通过slack来交流，因为可以把各种问题和知识沉淀下来，方便后来的人，也方便自己。

还有最后一点！

如果你在工作中有碰到有什么交互动效很难用常规的交互软件做出来，也希望你能告诉我，我试着用Framer去实现它，如果可以，我也愿意把它做成案例教程，分享出来。

好，那我要说的基本上就这么多，希望这套课程能帮助到想学习的Framer的同学，也希望越来越多的设计师能够学会前端，一起来体会用代码做设计的快感！

我是三木，我们课程中见！