准时下班？小白看了都会的figma高精尖教程！

66c86443c420el2mlzy9ep2288.gif

66c867f173487dzahtzj135556.gif

66c866b765499jxs2rsoxr917.gif

66c868ae932f3g925t1f62974.gif

66c868610a5fd6cvi7vwc16601.gif

Light系列VOL.1&gt;&gt;Streak Effects Manipulation (含PS教程)

01214f596393baa8012193a3489417.jpg

012fc760f78eef11013f47204462be.png

Design specification

01f24b5617190932f875313d866eb3.png

Table portlet

Principle教程（四）：动效视图的运用（附源文件）

调整Artboard 2里命名为icon的图标组，调整为想要的最后样子。在Artboard 2里，首先选择icon组里的Layer 2,把透明度调整为0，然后选择Layer 1，把角度调整为45度，再选择Layer 3，角度调整为135度。最后调整下Layer 1和Layer 3的位置。

019fd7585fe4d2a8012060c888983d.png

原创设计｜CHC｜VIS视觉识别系统

672a272815498qo32xgz9d8920.png

0154a85a9f5ddca8012195864dbf03.png

ProtoPie

Principle教程（三）：联动视图的运用

时间节点在“0”的位置时，选择绿色形状图层，然后在联动视图里点击X轴栏下的“+”号图标，选择“Opacity”（透明度），把检查器里的透明度改为“0”，然后拖动时间线到节点“340”的位置时，检查器里的透明度改为“100”，最终的预览效果是，当蓝色卡片在中间时，右边的绿色卡片消失，向左边移动时，绿色卡片会渐变出现。

01e72258568ae3a8012060c86cc7bf.gif

01aa825a6dd308a80120a12385ceca.jpg

WD/后台；

66c867c4cf0d50hgc0vecr1876.gif

01r14rq6l8ceiaygf0eb9e3534.png

侧边栏的设计和交互指导

Principle教程（二）：静态、拖拽、滚动、翻页（附源文件）

选中文字组，选用检查器里的Scroll(滚动)功能，然后对Clip Sublayers打钩，再进行编辑。

01f09f584d7d84a801219c77f05bde.gif

激活动效视图。打开工具栏的Animate,下方出现动效视图窗口，此时的窗口是空的，这时点击两个画板上方的箭头图标，激活视图。

011708585fe4afa801219c772395aa.png

01ba2c5d50dcdba80120695cc11396.png

Google Maps拖动操作模拟

选中3个色块编组后（编组快捷键和sketch里一样），选用检查器里的Page(翻页)功能进行编辑。

0110c0584d7d2fa801219c77d95ae6.gif

0148d65a015c2da801216a4b1f2032.png

Bike-Share Strategies

018leowkxmrf56vgg14cvm3835.jpg

WOOP产品款式策略管理系统

Adobe XD 最新中文包及首页汉化文件 

01caca59a18ff4a801211d25ad3d24.png

017d105d8043b5a8012060be44144b.png

按钮与滑块

01d15a5dc3f985a8012163ba6e7040.png

Sketch-临摹

0165e057f8a9eaa84a0d304fd68dc1.png

动效小练习(附Principle源文件)

15款高效网页制作工具，助你快速建站！

014yqcjkmiuof0pojveogy3938.png

66ac475254643in5xmjwld6603.png

Shopify App

这个是原型，http://www.xueui.cn/school/play-interface-prototype-color-do-homework-20160830.html