Framer X + React

编程零基础?照样学React!Framer官方指定课程

谢谢你让React如此简单易学!😊

- Kaitlyn Vu, 用户体验设计师

从滑稽的动画开始学

用好玩滑稽的动画来学习,然后应用到真实工作环境的微交互和组件中。

直观学习React

你是视觉动物?我们也是啊!我们用漫画和动画来解释React里的抽象概念。

抄-改-学

抄抄改改网上的代码,咱不就搞定了HTML和CSS吗?为啥不能也这样学React和JavaScript?
4
小时
高清视频
27
视频
讲座
全程
普通话

课程大纲

  1. 简介
    • 1.1 开篇简介
    • 1.2 到底Framer X能用来做什么?
  2. 画线框图(Wireframing)
    • 2.1 把纸上画的原型串起来
  3. 视觉设计(Visual design)
    • 3.1 视觉设计工具概览
    • 3.2 Frame、image和graphic
    • 3.3 从手绘涂鸦到矢量图
    • 3.4 文本
    • 3.5 UI排版工具:Frame和Stack
    • 3.6 用组件(component)来设计
  4. 交互设计(Interactive design / High-fidelity Prototyping)
    • 4.1 零编程实现交互效果
    • 4.2 准备开始编程:环境设置
    • 4.3 别戳Skinny先生的脸:code override
    • 4.4 Skinny转圈圈:让另一个属性动起来
    • 4.5 Skinny从远方来:制作针对多个属性的动画
    • 4.6 给Skinny的飞行课:顺序播放动画
    • 4.7 乌鸦遥控器1: 在Code override之间通信
    • 4.8 乌鸦遥控器2: 动画配置以及JS对象(Object)
    • 4.9 Skinny参加接力赛:动画延时
    • 4.10 真实场景示例:Material FAB交互效果
  5. 亲手打造一个React组件!
    • 5.1 世界,你好:写一个代码组件(Code component)
    • 5.2 Skinny想要不同颜色的羽毛:加一个新的React prop
    • 5.3 着色按钮:React组件和code override
    • 5.4 克隆来袭:由组件组成的组件组成的组件
    • 5.5 给整个小分队都换颜色:React程序里的数据流向
    • 5.6 真实场景示例:为组件填充数据
    • 5.7 用生产环境的组件做设计:环境配置
    • 5.8 用生产环境的组件做设计:包装一个Lottie组件

来自全球的设计师都在和我们一起玩React

这门课程直观清晰地讲解了React里的抽象概念。

- Patrick Multani, 产品设计师

马上入学!

🔥🔥 Framer X + Reac

限时福利:课程三折,Framer订阅五折!

加公众号就可以拿到折扣券喽!

690188

Linton是一个非常友好、乐于帮助我们设计师的程序员。

- Lincoln Mitchell, 高级用户体验架构师

Linton Ye
你好!我是Linton!

很荣幸能贡献一份绵薄之力,帮你进阶。我一直认为,程序员应该懂一点设计,设计师也应该会一些代码。你觉得呢?

我是一名程序员,喜欢设计,喜欢分享,信奉终身学习。 10多年来我一直在从事全栈软件开发,包括设计工具、开发工具、移动应用和Web应用。我从2007年开始写Android应用,从2015年开始研究React Native。 我参与了开源项目React Navigation,在LyndaTreehouse上编写过在线课程。

咱们课里见!

Beebee Ye
Hey! 我是Beebee!

我是一名设计师和动画师。我的很多灵感来自于我的梦日记。

在梦里,我看到史前猛犸象在马戏团里追逐袖珍小熊;我说服了秦始皇停止杀戮;我和爱德华王子用中文谈笑风生;朝鲜打导弹过来,在天空中炸开成了烟花,太美了,无法用画笔再现;我看到一幅幅诡异的图画,有奇怪的莲花,有油绿的水草,有灰白的死鱼,但是,当他们组合起来时,却美得让人窒息。

你的梦里有什么?

© 2019 jimu Labs, Inc.