framer｜LOFTER（乐乎） - 让兴趣，更有趣

framer

参与话题

793浏览 30参与

打开新页

zwsub 关注

如何用Framer.js进行UI原型设计

作者：zwsub

Pluralsight教程中文字幕

原型设计是现代数字产品设计和开发工具包的一流成员

Framer是一款原型开发工具，可让您将静态模型转化为交互式原型，并通过动态的本地感知动画和交互快速进行实验

它与设计工具无缝集成，可平滑地输出到移动设备，并且采用现代网络JavaScript的语言

Framer 原型设计长文章

热度(1)转载分享推荐喜欢

打开新页

Haiyang 关注

捷库工作2 的活动面板，用Framer设计。喜欢请赏赞👍

Featured & Campaign Panel, Gikoo Job 2 made with Framer.

捷库工作2 的活动面板，用Framer设计。喜欢请赏赞👍

Featured & Campaign Panel, Gikoo Job 2 made with Framer.

UX UI 交互设计设计动效用户体验 GIF 听与说 Framer

热度(19)转载分享推荐喜欢

打开新页

Haiyang 关注

UX Framer Gikoo 原创微交互 UI 用户体验交互听鱼说 gif

热度(5)转载分享推荐喜欢

打开新页

Haiyang 关注

UX 交互设计用户体验交互听鱼说 Framer gif

热度(1)转载分享推荐喜欢

打开新页

Haiyang 关注

2

在Framer里写了一个可以半自动生成各种尺寸Banner的小脚本 🤓

Banni ver 0.1.1

在Framer里写了一个可以半自动生成各种尺寸Banner的小脚本 🤓

Banni ver 0.1.1

Framer 脚本 Banner 平面设计平面听雨说用户体验交互 Coding 编程

热度(4)转载分享推荐喜欢

打开新页

小强Joey 关注

#MOTION9#Framer stateCycle

Framer 第一课。捣鼓了三个小时，语法和操作这个软件感觉都不是很难。难点在于如何熟练使用代码语法实现想要的效果。它不像 AE 那种 Keyframe 之间的转化，需要自己用代码设置各个节点的转化，需要计算时间和设置触发器，这是一个难点。AE是制作动画，Framer是只做交互动画。

经验：

1.流程 - 元素属性，位置。元素各个状态。元素如何在各个状态间转化。元素状态变化的触发器

2.Sketch - 编组的会自动成为 Framer 的一个层.Same name, position...

#MOTION9#Framer stateCycle

Framer 第一课。捣鼓了三个小时，语法和操作这个软件感觉都不是很难。难点在于如何熟练使用代码语法实现想要的效果。它不像 AE 那种 Keyframe 之间的转化，需要自己用代码设置各个节点的转化，需要计算时间和设置触发器，这是一个难点。AE是制作动画，Framer是只做交互动画。

经验：

1.流程 - 元素属性，位置。元素各个状态。元素如何在各个状态间转化。元素状态变化的触发器

2.Sketch - 编组的会自动成为 Framer 的一个层.Same name, position, and size

3. 所有 Sketch 的元素都必须在 Framer 的层上

弄清楚 State 和 Animation 之间的关系(概念模糊)，以及如何制作 Staggering Animation

展开

收起

Motion Framer gif

热度(6)转载分享推荐喜欢

打开新页

MONK DESIGN 关注

2

Facebook live 表情可交互点击效果实现

表情可交互点击效果（framer）

效果为framer官方主页提供效果简化版本

可交互的展示效果：http://share.framerjs.com/rplyw2v0sl8z/

Facebook live 表情可交互点击效果实现

表情可交互点击效果（framer）

效果为framer官方主页提供效果简化版本

可交互的展示效果：http://share.framerjs.com/rplyw2v0sl8z/

ui 设计动效源文件 framer

热度(13)转载分享推荐喜欢

打开新页

Learn Framer 关注

21: getSeconds / Minutes / Hours / Utils.interval

http://share.framerjs.com/tq59o8taezo4/

21: getSeconds / Minutes / Hours / Utils.interval

http://share.framerjs.com/tq59o8taezo4/

framer framerjs gif

转载分享推荐喜欢

打开新页

Learn Framer 关注

20: for in / if / layer.y / array

http://share.framerjs.com/0h8ppskwqdw2/

20: for in / if / layer.y / array

http://share.framerjs.com/0h8ppskwqdw2/

framer gif framerjs

转载分享推荐喜欢

打开新页

Learn Framer 关注

19: clientX、Y / modulate / Z

http://share.framerjs.com/vvnnfe6yohmj/

19: clientX、Y / modulate / Z

http://share.framerjs.com/vvnnfe6yohmj/

framer framerjs gif

转载分享推荐喜欢

打开新页

Learn Framer 关注

18: circle mask

http://share.framerjs.com/myfc6hr8dzgm/

18: circle mask

http://share.framerjs.com/myfc6hr8dzgm/

framer gif framerjs

热度(5)转载分享推荐喜欢

打开新页

Learn Framer 关注

17: gooey / mixBlendMode / contrast / blur

http://share.framerjs.com/hs89o2c2qwa5/

17: gooey / mixBlendMode / contrast / blur

http://share.framerjs.com/hs89o2c2qwa5/

framer framerjs gif

热度(2)转载分享推荐喜欢

打开新页

Learn Framer 关注

16: reverse() / rotationX Y / saturate / brightness:

http://share.framerjs.com/vzdk1hg2bnr3/

16: reverse() / rotationX Y / saturate / brightness:

http://share.framerjs.com/vzdk1hg2bnr3/

framer gif framerjs

热度(1)转载分享推荐喜欢

打开新页

Learn Framer 关注

15: mask / width / heigth

http://share.framerjs.com/k04tfo8nkdtp/

15: mask / width / heigth

http://share.framerjs.com/k04tfo8nkdtp/

framerjs framer gif

转载分享推荐喜欢

打开新页

Learn Framer 关注

14: mask / mixBlendMode / states.next( )

http://share.framerjs.com/lh1xtlhy2hz7/

14: mask / mixBlendMode / states.next( )

http://share.framerjs.com/lh1xtlhy2hz7/

framerjs framer gif

转载分享推荐喜欢

打开新页

Learn Framer 关注

13: layer.style / indicator / snapToNextPag

https://share.framerjs.com/itpnyu9baa3g/

13: layer.style / indicator / snapToNextPag

https://share.framerjs.com/itpnyu9baa3g/

framerjs gif framer

热度(2)转载分享推荐喜欢

打开新页

Learn Framer 关注

12: array / if else / for in

http://share.framerjs.com/x3gy4cgep1u4/

12: array / if else / for in

http://share.framerjs.com/x3gy4cgep1u4/

framerjs gif framer

热度(2)转载分享推荐喜欢

打开新页

Learn Framer 关注

11: start( ) / stop( ) / isAnimating

http://share.framerjs.com/0m6uy3fs2xkw/

11: start( ) / stop( ) / isAnimating

http://share.framerjs.com/0m6uy3fs2xkw/

framerjs gif framer

转载分享推荐喜欢

打开新页

Learn Framer 关注

10 : Drag / LongPress / randomColor

http://share.framerjs.com/zlopsmmbsbpu/

10 : Drag / LongPress / randomColor

http://share.framerjs.com/zlopsmmbsbpu/

framerjs gif framer

转载分享推荐喜欢

打开新页

Learn Framer 关注

9: ignoreEvents / visible / (event,layer)

http://share.framerjs.com/zqrq5gbar9ro/

9: ignoreEvents / visible / (event,layer)

http://share.framerjs.com/zqrq5gbar9ro/

framerjs gif framer

转载分享推荐喜欢

LOFTER-网易轻博

framer

如何用Framer.js进行UI原型设计