figma交互演示教程

figure 入门教程零六简单 loading 动画制作今天教大家快速制作一个 loading 动画，绘制一个画框。为了清晰演示，填充一个背景色， 绘制一个圆，等距复制两份。为了更好理解，我们把三个圆填成不同的颜色，并分别命名为一、二、三。 复制画框调整圆的位置，将右侧圆调整至最左侧的位置，并按顺序推一， 再复制画框，再推移一次。 按同样的规律统一一下图层的顺序。 将每个画框中间的圆放大尺寸， 框显画框制作组建机依次添加颜值触发四百，智能动画缓动八倍， 这样效果就制作好了。最后调整一下颜色和大小， 你学会了吗？原文件在标记式公众号，今天就到这里。

动态原型可以使你的设计方案更真实，并且与静态设计相比，可以与客户或利益相关者进行更多的交流。今天我们就在飞格玛中学习这种弹窗效果，只需三个步骤，一、 切换交互模式。当你绘制好按钮并把弹窗放置在画板外面时，点击右上方的坡头肽，切换到圆形交互模式并框选按钮，把它连接到与之关联的弹窗上。创建完成后就会发现两个参数，左边是触发方式，右边是交互动作。 二、选择触发方式我们可以通过点击拖拽、悬浮、长按按键等操作触发界面上的交互动作。我们选择昂克力克，点击。三，选择交互动作并调整参数。选择 open overa 展开服层位置，选择 menu， 手动调整弹装到想要的位置。为了建立蒙版和方便关闭弹窗，我们需要勾选这两个选项。最后我们选择 moving 移动进入作为入场方式。点击画板旁的播放按钮就可以预览了。 别忘了在这里你还可以复制链接，把它分享给前端开发。

victor 入门教程零三文字交互动校今天教大家快速制作一个文字交互动校。绘制一个画框，放入准备好的文字素材，复制一份框，选注两个画板，点击创建组建局， 将第一个画框的文字下一致画框外区域切换到圆形面板，添加延迟，触发智能动画交互。将画框的背景去除，将制作好的组件集放入素材卡片内。 接下来用同样的方法制作一下另一组文字和图像的组建局。 最后调整一下三个交互不同的颜值，触发时间分别为八百，一千一千，两百。 这样就制作好了，你学会了吗？原文建在标记式公众号，今天就到这里。

哈喽大家好，我是 pbm， 像这种底部图标切换的动画是经常要用到的，这种动画不仅很出效果，而且做起来也非常的简单，今天我就用飞个马给大家演示一下。另外原文件的获取方式我会放到视频结尾。首先我们准备好四个图标，拖出一个图标，然后在他旁边添加文字，然后框选居中对齐，并且 cs 加 a， 创建自动布局，然后给自动布局添加背景， 并且把颜色改为浅橙色。接下来开始设置编剧，上下为十，左右为十五，最后添加原角，然后我们把图标和文字都改为橙色，我们复制一份，把第二个图标拖入自动布局，然后调整文字内容。另外两个也是同样的操作，都是拖入图标，然后调整文字，然后我们选中下面三部分内容，在左边的图层把文字隐藏， 然后把调整好的图标拖入新建的福瑞姆，然后把他们框选居中对齐，并且调整他们之间的间距，让他们间距相等。最后选中后三个图标，在右边把自动布局的背景隐藏，最后一定要选中四 四个内容，在右边把裁剪内容给打开，然后复制三份，分别调整他们的选中状态，也就是图标，文字，背景以及间距，然后切换到圆形模式，开始连线，把每一个未选中的图标都连接到对应的页面，动画的设置都是单机智能动画三百毫秒。最后我们看下效果如何，需要原文件的同学可以关注并在评论区留言，如果今天的内容对你有帮助，可以点赞收藏。

哈喽，大家好，这两天做了一款飞哥买的插件，为什么叫他万能插件？因为他借助了这个 gps 的能力，能把你的任何想法变成现实。然后接下来我为大家演示一下，比如说我现在想做一个这个登录的窗口，然后大概随便先换一下，给他一个这个输入用户名的地方，然后再给他一个密码，然后再来一个按钮，给他一个绿色的，然后我来标记一下这边是 用户名，然后这稍微调大点，好，下面是密码，然后再下面是登录的按钮，然后给他一个大一点颜色。 好，接下来的话我们就可以把这个插件打开，这个插件里面应该在社区搜不到，因为还没有上架。我们选中我们想生成的，直接点按钮，然后要稍微等待一下， 好，他这边的话就已经生成好了。那答案，这个啊，可能我们的画的有点差别，这个后期会持续去改进，但是的话这边其实是已经可以交互了，包括我们去输入，哎，你看密码他自动会举报你， 包括这个按钮。点击好，这边是一个简单的演示，然后接下来的话我再做一个稍微难一点，复杂一点的，比如说我这边想让他做一个这个生成图片的一个这个插件，那么我去先打开去改一改啊，比如说这边我想让他去输入输入文字，然后就能去找到对应的图片，然后生成在对应的地方，比如说这边生成在这个地方图片， 然后我们去给他标记一下。嗯，我想图片生成在这，然后我给他大概的去标记一下这个图片的位置，然后好图片生成在这个地方，全是给他改起来有点突兀了。现在好，这边的话就是搜索图片， 搜索图片这边就是钥匙按钮。 好，这边是一个手刷油，给他加个倒角区分一下。好的，然后的话接下来我们就是把这个描述一下，就是我大概想让他做成个什么样子，然后这段话我提前已经打好了，我就直接粘贴。 就是说当我去输入这个文本的时候，那你需要在这个地方去显示生成相应的一个和文本对应的一个图片，然后把这个描述大概写一写好，完了之后的话我们就可以再去生成了，选中之后点这个按钮， 好的，这边的话就已经生成了，然后我们来测试一下，比如说我想搜索一只小狗的图片，然后的话这边就出现了一只小狗的图片。啊，这个图片，然后我再试一下，搜索一个小猫，试一下，哎，这边就生成小猫咪的图片。

如何将设计好的界面放到手机上进行操作，达到以假乱真的效果？给各位推荐一款最近比较流行的交流动效软件投入派，不仅能实现基础的动效，比如滑动、点击、缩放，而且还支持调出系统组件，模拟真实的使用场景， 比如键盘、相机、拍照、云识别等等。就像你平时使用手机那样，当你在 big 码或者 master go 里面做好设计之后，可以通过插件导入 potalpi 里面做点击效果。里面的操作逻辑也比较 简单，比如最简单的你想要这个正方形，点击后进行移动，那么触发类型选择单机，然后添加移动效果，输入移动后的位置，再点击预览就完成了。获取 figma 或者 principle， 这里的软件能够做到，但是目前他们能够实现的效果还是有 有线图。图派还支持多屏幕交互和硬件结合等等。这类复杂的场景功能非常齐全，而且不限于单个屏幕的交互。它能够实现智能手表与智能手机的配对，也不需要写任何代码，在实际工作场景中也能快速进行交互体验测试。 除了传统的移动端和网页端，还支持车载交互、智能电视等等，满足了不同的场景需求。 做好之后一个链接就能分享给团队其他成员预览交通效果开发也能在上面查看一些运动参数，从而方便了我们的工作流程。如今动校已经成为设计师的必备技能，你就赶紧学起来吧！

pika 入门教程十三自动布局轮播悬停交互今天我们继续用自动布局做一个轮播悬停的交互，绘制一个画框，填充图片，再绘制一个黑色举行透明度修改为百分之三十， 将约束改为机中 复制画框，本笔放大一些， 将举行透明度改为零。康选制作组建机切换到加厚面板，添加悬停时智能动画负三百毫秒。 将制作好的组件添加到界面素材中，添加居中的横向自动布局约束改为居中， 复制五份并替换组件的图片， 这样就制作好啦，选品实惠，放大且不影响布局。 今天就到这里，原文件在标记式社区，你学费了吗？

不是 ae 用不起，而是飞哥马更有性价比。给他一次做动效的机会，他直接新建一个画板，并且把高度调整为和身高一样。随后画了一个矩形，随手扣了波六六六，涂层模式改为颜色简单。紧接着复制一层矩形，颜色改为黑色。 他甚至将涂层模式改为颜色，加深，一个浅，一个深，一浅一深，很认真，这两步非常重要，如果没跟上，建议反复观看。 随后将两个矩形锁死，避免被人偷走。紧接着画一个黑色矩形，置于底层，效果给到涂层模糊，数值居然给到了三十。 再画一个正方形，填充白色，效果同样给到图层模糊，再复制一份填充黑色，删除图层模糊并调整大小。 含笑间，他就把提前画好的 icum 复制了进来。调整位置大小后，复制画板，调整黑白正方形的位置、形状和参数，你怎么开心怎么来。最后一个也是同样的操作。随后给 icum 添加交互触发模式为点击 自定义弹琴动画数值，你就超不超白不超。最后打开预览，一个简单太不动效就做好了。 五星评论家麦克阿瑟表示，自从跟着十八学设计，我老婆说我快了不少，我想让他动他就得动，跟着十八学设计，迟早开上！法拉利大型设计纪录片持续为您播出！

ficama 入门教程十五简单视频显平交互最近 ficama 更新了插入视频的新功能，来做一个简单的 demo 吧。拖入准备好的视频，给一个圆角建一个组件，再添加一份 给默认状态加一个有颜色的举行当之证 切换到圆形面板，链接画框，选择当选平时智能动画三百毫秒 选中组建中的视频，确认默认状态未不播放选听状态未自动播放。 添加制作好的组件，修改一 复制一份，添加自动布局并更换另两份的视频。 选中画框，添加垂直滚动， 这样就制作好了，你学会了吗？原文件在标记式社区。

点赞的朋友们逢考必过！大家最近有没有用 figma 呢？那今天呢，我想用一个简短的视频来跟大家介绍一下最近比较流行的视觉设计趋势， 以及你该怎么样用飞个马来完成。因为我最近用飞个马用的很多，然后我发现我越用这个飞个马就越喜欢，所以什么 sketch 啊，什么其他的 adobe xd 啊，都已经被我抛到脑后了，就是我真的好喜欢飞个马，我真的是觉得他好才会推荐给你们的。 我今天就想用这个非常非常简短的小视频来跟大家介绍你怎么样用飞马就能非常非常快速的做出最新的视觉设计效果。 好的，那我最近呢又看了个 baby 的，我的一二三就是 despicable me， 我不知道你们有没有看过，我真的好喜欢那个系列的电影，我觉得特别特别的可爱， 然后他真的非常非常的好看，看完之后心情就变得好好。然后前几天我冒着生命危险准备去乐高去买一个迪士尼的那开锁那个赛，就是很大很大的一个乐高的拼图的一个 set， 但是没有买到，然后我就意外的发现了这个噔噔噔 minions， 你看这个是凯文，这个是爸爸，爸爸会有个小熊叫 team， 我觉得超级可爱。还有一个是 stuart， 就是热衷于弹吉他那个，我觉得他们都好可爱，我喜欢里面的每一个人，除了坏人，然后 gru 当然不算坏人了， 所以我觉得真的好好看，然后里面的那个 agnes 真的是太可爱了，总之就是是一个太有爱电影系列了，我就特别特别喜欢，我以前中二期的时候，特别特 特别喜欢看那种别人说是很深奥很深奥的，就是很揭露现实的电影，但是我现在我发现我大了之后嘛，就就越来越喜欢那种卡通，或者说喜欢那种开心的电影了。好的，来进入这个视觉设计的趋势， 那视觉设计呢，其实在 ux 里面也是非常非常重要的，尤其是当你在做一个作品集的时候，可能你进入公司之后呢，你主要考虑的是体验方面的事情，就是怎么样让人家使用的舒服啊。但是呢，在做作品集的时候，视觉设计是非常非常重要，因为它可以迅速 让你 get 面试官的注意，当面试官一一天要看几百份作品集的时候，如果你的视觉设计非常非常的脱颖而出，那你就能让他注意到你，然后可能你就会晋级，晋级到这个 面试的阶段。现在视觉设计趋势有很多种，那我就剪几种跟大家介绍一下。第一种我觉得大家都肯定已经非常非常熟悉了，就是这个扁平化的插图，那你往往在这个很多设计的界面里面，你会发现，哎，这个界面有一个这种 像连环花一样的这个小卡通，然后这个界面里面也有像这个，呃，连环花小卡通，他可能莫名其妙就给你放一个，然后你看上去呢，就会觉得，嗯，很舒服，觉得很 时髦这种感觉，那这个呢，其实已经流行了很多年了。第二个我想跟大家讲的，其实呢就是这个软阴影，这个我发现其实是最近一段时间才开始的，就是在这个扁平环设计之后，很多人你会发现，哎， 这个影子好像似有似无的，这种感觉若隐若现，但是你又会觉得加了这个阴影就会很高级， 这个就是软硬硬，待会呢我会跟大家讲怎么弄这种软硬硬。第三个呢就是 newmorphism， 就是你雾化，这呢其实是很多设计师现在在用的一种趋势，那 他也会被很多交互设计师所垢病，关键呢是要看你怎么用，如果你用的非常聪明的话，那就是一个比较好的视觉设计，如果你用的不是很聪明的话，那 别人就会批评你很浮夸，不懂设计的实用性。好了，那我现在就来现场跟大家演示一下，你在菲格曼里面如何完成这些视觉设计，趋势 非常非常的快。首先就是扁平化的设计，那以前我觉得扁平化设计可能大家都会去，比如说一些嗯免费的资源网站，或者说一些付费资源网站，你去买，或者是去下载一些适合于你的，或者说你自己需要手工去 去画一个扁平画的设计。但是现在呢，我最近突然发现菲克玛里面一个非常非常好用的插件啊，简直可以提高你的效率达到百分之一百五十以上。首先你需要去这个 community， 这个 time， 然后你需要搜索 blush， 你就会看到，哎，有插件，这个就是这个比较可爱的这个 icon 这个，然后你就点击 install 就可以了，这样子的话你就飞速的安装了一个插件，对吧？然后我们回到我们的，比如说设计文件，我现在就随便的装作设计一个 iphone x， 然后我装作我在做一个 y fray， 不管怎么样。然后接着，比如说我要在这个区域放一个扁平化的插图，那我就右击 plugins blush， 比如说我想要搜索这个 people， 然后他就会出现好多好多这样的插图，对吧？那我就找一个比较适合我的，比如说我可能需要这个 teamwork， 然后我点击他，就是比较神奇的地方就在这里了。比如说我现在我想改他背景，我想要把它改成山一样的状况，然后，嗯，比如说我想改这个箭头，我想要改成这种像手绘一样的感觉，我可能要把这个缩小一点， 把它提高到这个上面，然后，嗯，后面呢，我想要改，把它改成一个，就是加了黄色的背景这样子的感觉。接着呢，我还可以改它的植物，就是好的东西都可以 customize， 然后好多箭头都可以，就是把它做的很有意思，比如说这个 object， 你可以，甚至你可以把它变成一个 envelope。 接着呢，你还可以改这个人，这个人你还可以改他的姿势，比如说我现在想让他变成这样的一种衣服的风格，然后我想改他的这个发型，这个 face 我觉得我有点 get 不到，所以我就不加了。另外一个人呢？你也可以改 这个人，你可以改他，比如说你把它改成这样子啊，或者说你把它改成这样子啊， 我觉得非常非常棒，有没有？突然之间就变成了一个你独有的一个扁平化的图案，适合于你自己的 app， 就可以敷 customize， 我觉得特别特别好。那这个 app 呢？是我最近才发现的，我所我发现之后呢，我就觉得我 我一定要推荐给大家，希望大家都觉得非常非常有用。那第二个设计呢，就是软硬硬，软硬硬呢，我也在这里演示一下，那我就随便画一个 frame， 假设我要画一个这样的，比如说这是一个 button， 也就是一个按钮， 然后现在都比较流行圆角矩形，我就把它变得稍微圆一点。接着呢我可能是会稍微给他加一个飞速的渐变，可能把它调成这种对角线一样的感觉， 我现在就画好了这样的一个 button， 对吧？我要给他加一个特别特别软的阴影，怎么加软的阴影呢？直接在这个 effects 里面点击加号，然后我一般会把这个 x y 都设成零，然后在这个 blow， 我就把它 blow 的非常非常大，有没有看到直接这个软 阴影就出来了，瞬间就高级了好多呢？然后他一般会给你的阴影加一个透明度，有的时候我会觉得他的透明度有一点偏低，有的时候我会觉得他偏高，所以，嗯，我一般会稍微的调整一下。然后有的时候，比如说这个是蓝色的按钮吗？我觉得他的阴影可能会稍微带一点蓝光， 所以我就会给他加一点这种蓝色的感觉，那这个就是软阴影。接着呢就是你有 moppy 的，你雾化，你就是把它想象成一个像浮雕一样的感觉， 那浮雕一样的感觉到底是怎么做的？其实他是通过一系列的阴影就是加阴影来完成的。这个呢，其实就是一个非常非常典型的 no movitum 的文件，我是在这个网上随意的下载了一个这样的 numovitum 的文件，你可以看到它这个 button 有没有觉得像 浮雕一样的感觉，那这种东西是怎么做的呢？你稍微点开它，你就可以发现它其实是加了一系列的阴影，你可以看到它其实加了有这个这个这个这个这个其实加了五六个阴影，所以就导致了它给人这种 非常非常真实的像浮雕一样的感觉。其实他就是把这个东西想象成一个凸出来的物体，然后由光打到从这个左边打到右边的时候，这个东西他会产生什么样阴影？那我们假设已经有这样的一个文件，我们自己怎么做这个牛猫 freedom 呢？其实你就可以利用菲格玛他本身的特性， 比如说我现在自己创建一个我属于自己的 frame， 嗯，我先不管它的大小了，比如说我创建了这样的一个矩形，我就想把它设计成这样浮雕的感觉。那这个的原理呢？其实 就是在于你把它的所有的阴影的 effects 给 copy 过来，那我先把它设计成这样的一个圆角的矩形，嗯，比如说我现在想做这种浮雕一样的效果，在这个 figuma 里面右击有一个 copy paste copy practice， 你直接把它复制一下，然后这里右击 copy paste， paste properties， 它直接就会变成这样的效果， 你看是不是已经有这样的感觉了？那可能还会有一点点的不一样，就是因为他需要你这个背景颜色，也需要和这个 他凸出来的按钮是同一个颜色，这样的话他就会显得是同样一种材质，你可以把他想象成渲染，你需要给他同样的一种材质才能让他有这种凹凸的感觉，他是渲染的一种 texture， 一种 质地。那好，我现在就把这个背景颜色呢，也把它改成这个灰灰的 一样的颜色。哎，你现在突然觉得他是不是就已经变成了这个浮雕圆的感觉呢？好，现在我比如说把他的这个圆再拉回来一点。 接着呢？比如说我想要设计这种凹进去的感觉，我直接点这个，这个音谱就是他是凹进去的这种感觉，对吧？我还是一样的 copy practice paste properties， 它直接就变成这种凹进去的感觉，有没有非常非常的快？那赶紧去用 figma 吧，我要去，我要去拼我的乐高啦。那喜欢的朋友们一定不要忘记帮我三连，拜拜，我们下期再见。

哈喽，大家好，今天我们给大家分享的就是我们的交互图怎么去画，那我们现在看到的这样一张图呢，就是我们插在这个需求文档里面的一张交互图， 嗯，对于这个需求文档应该是怎么样的，如果大家感兴趣的话，可以在评论里面回忆，然后我把这个需求文档的链接发给大家。 交互图的这个画法呢，其实是比较多的啊，我们可以用这个飞个马，飞个马是一个圆形和这个 ua 设计的工具，也可以使用墨刀里面的流程图和圆形图两种不同的这个墨刀提供的功能。那其他的工具大家也可以自己去了解， 这里的话我就不再去追述到底都有哪些方法可以画。嗯，大家要记住的就是不管是画圆形图还是画这个交互图吧，我们能够使用各种各样的工具，最终我们找到我们自己使用起来比较顺手的工具就可以。那我们从飞格马开始，飞格马是一 网页应用，所以大家不需要下载任何的这个客户端啊，只需要通过我们的这个网站，然后你去搜索一下这个飞哥们就可以进入注，完成注册就可以开始使用了。然后大家在注册成功之后呢，点击一下那个红框那个创建新的那个文件的位置，就可以进入到飞哥码的这个画布了。 在进入到画布之后呢，我们就需要创建一个新的这个页面，这个页面我们给他取一个名字叫抖音交互图， 后续的话我们就需要在这个页面里面去插入不同的这个啊。屏幕这里我们就选择的是 iphone 四三 pro， 那我可以通过这个复制粘贴把这个屏幕空白的屏幕创建多个，对吧？我们假如说是有六张图，那我们就需要创建六个屏幕， 在创建完这个屏幕之后呢啊，我们就需要去把我们的那个呃图片给他复制粘贴进来啊，在粘贴进来之后，我们看到 这个屏幕的宽度他是三百九，所以我们就把图片的宽度也调成三百九，然后再把这些图片一张一张的给他放进去，再放进去之后啊，我们会看到那个底下会出现一段空白嘛，因为我截图是用的安卓去截的这个图， 所以我们就选中上面的这个页面，这个时候我们需要按住 shift 去选择这个页面，选择完了之后把页面的高度调整为七百九十五，这样我们的这个页面和我们这个图片啊他的比例就一样了，我们通过拖拽呢，可以去把他这个位置变成是我们需要的那个最终的位置。 接下来我们需要去做的一件事情呢，就是要把所有的这个页面选中，然后给他进行一个锁定。我们去这么做的原因是因为我们后续需要在这个图的基础之上去加入我们的点击区域，加入我们这个箭头，那因为我们加入的这些点击区域和这个箭头他实际上并不属于我原 原型图的一个部分吧，所以我们就需要在嗯加入这些箭头和点击区域之前，先把已有的这些页面进行一个锁定。 那锁定的方式呢？就是在我们现在的这个地方点击右键，然后选择呃底下的那个锁定，这样的话我们整个这个已有的这些部分就被锁定，你就无法再对他进行任何的移动和修改了。 接下来我们要做的就是在机械图的上面去给他插入我们所谓的这个点击区域哈，我们就可以通过这种给他画一个框的方式，然后对这个框把他的这个填充给他删除掉，然后变成只有那个空白的填充，只有边框，把边框的颜色和边框的那个 出息调整，然后再去画箭头。那这块我们要做一个判断啊，如果用户没有登录的时候和登录的时候有区别，那要去做这个菱菱形的这个东西，我们就画出一个正方形，然后把他的这个 角度调整四十五度，然后把它拖到这个对应的位置，然后上面加上文字可能是这个用户是否登录，然后通过右边去对这个呃这个区域这个文字的这个行属性进行调整。 然后再接下来的话，我们就需要去给另外一条分支去画这个线，这里的话我们画出来这个箭头本来是直线，那我们就需要选择到其中的那个小点，然后对他进行拖动，让他变成一个直角啊，然后写上对应的这个文字未登录。 嗯，其他后面的这个操作的部分呢，就是比较类似的了，我们都需要去通过这个矩形的这个组建，然后就画出来一个框，然后把这个框的呃填充删除掉，然后给他选择这个对应的颜色的这个这个边框，然后再去加上这个箭头后面的部分的话就 跟前面是一样的了，然后我就不再给大家注意数了，这块的话大家可以慢慢的去学会使用它对应的这个快捷键啊，比如说画矩形是用 r， 然后画这个箭头是用我们的 shift 加上 l， 对所有的这些快捷键你掌握了之后呢，你的这个效率就会相对而言会高很多。 等到我们把所有的这个箭头都画完了之后，我们这张图就已经做完了，接下来我们就要用这个切片的工具，大家可以按这个键盘上的 s， 或者用鼠标去点击这个 slides 的这个位置去选中这个区域， 然后再点击右侧的这个导出，选择三倍图，你看一下这个预览没有问题之后点击这个导出，这个时候你再打开你你你就这张图片就能下载到你的本地了。然后你再打开这张图片看， 基本上就是我们在最初给大家看到的那个呃图片了，大家如果学会了的话可以弹幕一个一，如果学会了的话可以弹幕一个二。

接下来呢我们来学习一下如何使用飞挂平台去打造一个基本的页面演示效果， 我们最终所做出来的结果的话呢，是类似这一种，首先呢这个页面你自己设计的时候啊，肯定是长途的这个页面， 但是呢我们在给客户进行展示的时候呢，对方是可以上下进行查看，包括呢左右都可以，还有呢我们点击不同的按钮会跳转到不同的这个页面， 那么这样的话就可以给我们的客户呢带来一个比较好的观看体验。好，我们来看一下具体的操作过程。 我这边的话呢一共有四个页面，我们先看第一个页面，在第一个页面中你这里要怎么去做呢？是不是整体这样上下进行一个运动， 那好那你要记住呢，如果说是整体上下进行运动的话，我们要给这整体呢做一个画框，你看我现在这里啊，就一整个这个画框，然后我拖出来，大家可以看一下， 由于我们在制作的时候呢，下方存了大量的这种数据，所以说呢，你看它下面这里数据还挺多的，然后包括这里啊也是比较多， 来我们来学一下怎么对他进行处理。第一步啊，要把你这种非常长的这个画框给他拉回来， 哎，就拉到我们依平的这个高度，这边还有呢，这边这个区域也找到他，同样的也得给他拉回来，这里一定要拉回来啊，否则的 话呢，那你的数据就不能去滚动，也就是说他的数据实际上已经超出了这个框，但是呢你得给他拉回来，哎，这样才能去进行演示啊，拉回来之后呢，点击我们右上角的圆形， 在圆形中设置他的滚动模式，对于他来讲他就是水平滚动，而对于我们外面的这个整体来讲的话呢，在滚动中给他设置为垂直滚动，哎，把这个给他设置好，设置好之后我们来看一下啊，是否成功， 首先上下没有问题对不对？左右同样的也是没有问题，所以呢关于这个效果看很简单，我们也就把它做了出来，那么这个清楚了之后，我们再看一下如何去切换页面，就让他 跳转这个页面啊，像我们现在这种位置的话呢，点击发现就要让他跳转到发现页面，我们可以呢找到发现的这个组，找到之后鼠标放在这个位置有个加号，点击拖拽给他拖拽到第二个画板上，松手， 松着之后这边是我们的交互魅力，当我们单击时，单击发现时，让他呢导航到第二个页面，哎，这是它里面的一个原理，而动画的话里面支持及时 就是没有效果啊，瞬间出来的这种效果。还有溶解就是慢慢显示啊，这里大家可以多去试一试啊， 我这里的话呢，先选一个溶解好了，先溶解，那选好之后的话呢，这边还可以设置他的一个时间，大家可以多去 尝试，看哪个时间是最符合你的这个效果的。我们来看一下当前的一个演示，这是我们现在这个页面，然后点击这个发现，你看他就过来了，对不对？那同理，我想让他点击首页再回去，那应该怎么去做呢？ 我们需要在第二页面中找到首页，然后点击这个加号，给他拖拽到这个画板上，这样也就完成了我们这个效果，并且里面的设置呢，会和你刚开始的那个设置啊，他是一样的。 好，我们来看一下，点击首页没有问题，然后点击发现，哎又过来了， 然后剩下的话呢，都是一样的啊，就可以不断的去给他呢，比如找到这个消息，然后牵根线，我们牵到这个位置， 那你说我不想去添加这个跳转了，那你呢，就把鼠标放到这个线身上啊，给他松手，拽掉他再松手，这样就完成了线的这个删除，所以添加和删除呢，都非常简单 清楚。这个之后呢，接下来我们再介绍一下啊，他其实还可以加样机，对你点击空白地方，在空白地方中，设备里面可以挑选你的一个样机啊，我们当前是按照三七五乘以八幺二去做的，所以就要选择 iphone 十一 pro 这款设备。 点好之后呢，这个型号什么金色，五叶绿，银色啊，根据自己的喜欢啊，自己去点击就行了。 背景颜色的话呢，他会去决定，你在给别人看的时候就这个背景色，就这边的背景色啊，根据自己设置就行了，你看我现在的话呢，他就已经 生效了，给我们套了一个这个样机啊，我们点击首页这样的观看体验呢，优好了很多。然后在这里的话呢，大家可以通过点击右上角这边，他可以设置全屏， 这样观看体验就更好了啊，如果说大小不合适的话呢，在选项里面，我这里设置的是百分百以完整尺寸显示，然后也可以有这个适应和填充，都可以进行单击都去试一试。 而分享这边的话呢，大家要注意一点的是啊，如果说你在这个页面给他进行分享的话呢，其实对方能看到的是我们所有的这个页面，并非是你刚刚所完成的交互圆形，所以我们不要在这个地方进行点击分享，那在哪里去点呢？你看啊，我先把我 的链接现在关掉啊，关掉之后呢，我们先点击这个播放，就是演示，让他先加载出来这个演示效果， 演示效果加载出来之后呢，在他的右上角有个叫分享圆形，那么这个就是我们发给客户的一个链接， 你可以点击复制链接啊，知道链接的任何人可以查看，然后点击复制链接，那么对方打开之后呢，就可以直接看到我们现在的这个页面，并且呢进行这种拖拽啊，他会自己多去点点进行查看。 那么以上呢，就是关于如何使用飞罐平台制作一个基本的页面交互演示的过程。

哈喽，大家好，今天我们来分享一个关于如何创建玻璃泥肽效果的教程。玻璃泥肽呢，也是最近非常流行的一种 ui 设计的新趋势， 这个教程会用飞格马来制作，当然如果很多人喜欢用 sky 去，同样也是可以的。波尼泰最常见用途之一就是信用卡的形状啦，就像我们现在屏幕上看到的一样。 嗯，也不一定要完全的跟左边图像一样，可以适当的 freestyle 一下。先创建一个矩形作为我们的背景， 选择现心渐变效果，从非常浅的橙色到淡紫色，现在的从上 到下的渐变效果对于玻璃形态背景来说有点太无聊了，所以我们增加一些元素。 这里有个很好的技巧，先画一个圆，将颜色改为深一点的橙色，饱和度足够高，所以这样他就可以和背景很好的去融合，复制他，然后选择另一种颜色淡紫色。 然后我们把这些圆圈添加一个图层效果，叫做图层模糊，数值呢是一百五。然后我们可以移动这些圆，让他变大变小，达到我们想要的效果。 接下来也可以复制这些圆，使他们的形状更小，然后饱和度更低， 最终达到我们想要的背景的效果。之后我们来创建中间的信用卡的形状， 创建合适的大小比例， 矩形的圆角设为三十二。 接下去的操作也是比较简单的，我们选中句型， 选择 radio 效果，注意两边的颜色都选择为白色哦。然后把其中一种颜色拖到左上角，另一种拖到右下角，再改变透明度，一个从零到百分之十， 另外一个从百分之百到大约百分之七十这样，现在是选中整个信用卡， 将 rio 效果改为百分之六十，然后添加一个背景模糊的效果，数值为十二。 现在看起来已经非常经典了，但是你也可以从背景中拖动刚刚做好的圆圈，让卡边上的背景模糊效果显得更加明显。 为了达到我们想要的效果，我们需要做很多这样很微妙的调整。接下来再选择卡片添加一个描边的效果， 确保将颜色改为白色，而且描边需要在形状的内部，这一点很重要，因为我们在这里制作的模拟玻璃边缘的效果需要同时与背景和卡片来混合，然后再看到这个 描边的容量，我们从百分之百概为百分之三十。现在边界已经很好的与卡片融合，但实际上我们需要融合的还有更多， 所以让我们点击色板，选择小水滴，然后选择叠加效果。接下来制作卡片底部的彩色部分，需要在底部附近创建一个矩形，然后按下 enter 键， 只选择底部的两个角，把他们的边界半径改为三十二，他就能够很好的匹配这张卡片的区域部分。然后我们用线性渐变来填充他 水平方向上选择三种颜色，蓝色和紫色之间再选择一个蓝色。 现在我们想要的是一个卡片在三维空间中浮动的效果，然后情况下他只需要添加一个阴影。 但是我们如果给一个有背景模糊的元素添加阴影时，他的中间部分也会很模糊，因为阴影在整个物体的下面，所以我们不要这样做。我们把影子藏起来，制作一个看起来更自然更自由的阴影。 在下方用深色填充，点击效果，添加图层，模糊数值为四十， 然后调整到合适的想要的效果。要把颜色改为稍微蓝色一点， 因为蓝色实际上是在阴影中反射的，所以颜色要稍微调深一点。现在让我们开始在左上角添加一些文本，步入银行的名称， 信用卡号码等等。 如果下方的白色字体与背景之间没有足够的对比度，可能需要稍微修改一下背景的 颜色，让他更暗一些。再复制字体向上移动，创建卡片的过期日期等信息， 做一些快速对齐的操作之后，可以更加精确的来对齐。 为了让这些白色刺激更加突出一点，给他们添加一个深蓝色的阴影， 接下来我们来创建发卡机构的标识， 注意在画圆的时候，确保从底部到右边的距离和对角线的距离要差不多，这样看起来会比较和谐。 好，让我们来看下效果。下面的白色的字体看起来还不错，但是上面的黑色似乎不适合这个风格， 所以银行名称这里我们从背景中选择一些颜色，看他比背景更暗一些， 所以可见度会增加。对于卡号，我们创建一种从上到下的信心，渐变，从深蓝色到另外一种颜 送。 另外我们把字体改的稍微瘦一些。 好了，现在看起来还不错，但是为了让磨砂玻璃的效果更突出，我们需要在他的前面后面多画一些形状，让他更加突出了有一些那像这样，在这里创建一个圆圈， 选择线性渐变，然后选择两种漂亮的颜色。注意确保深色是在纹理的底部，因为这样会让球看起来更加自然。可以有一点对角线。 接下去的诀窍呢，就是复制这些球变大变小，然后放在合适的位置上。也许需要花一段时间来把他们 都放在合适的位置，但这是值得的。现在为了让这一切看起来更像一个三 d 的图像，我们需要在卡片的前面再放一个这样的球，要把它放在右边这里让他变大一点， 并使用一种重叠的方式。同使用有磨砂玻璃和彩色渐变的效果。再制作一个这个球投射到卡片上的阴影，如果他有点突出的话，我们就把它移到球的下面。 我在左边创建了一些形状，沿着左边的边缘把颜色改成红色，我用这个方法来快速的对齐。 当背景中创建了这些新的元素之后，我们再来修改一下卡片的背景 模糊效果，调整它的数值，看看会是什么样子的。我们可以把它调的更高或者更低，然后可以用更低的透明度来复制阴影。 创建卡片投射到球上面的阴影的效果。不要把它做的太强，否则会显得奇怪。 这样我们已经差不多完成了整体的效果。当然你也可以再做一些多一点的细微的调整，而使效果更加完美。现在我们已经创造了一个非常漂亮的整体，非常柔和的氛围。 在做这样一个教程练习的时候呢，你也可以使用自己的颜色，形状和图案。好了，今天的分享就到这里啦，感谢您的收看， 如果本期视频对你有所帮助，记得三联支持哦！更多关于交互设计、艺术、留学作品及相关的知识和内容记得关注啊！不足哦，持续输出干货，为你答疑解难！

figama nasa 神仙插件一 anynix 众所周知 figama 的插件种类分布，今天介绍一款制作动效的插件 anynix 如果要制作作品集，用这个插件是非常高效的。运行插件后会弹出一个大有时间轴的窗口，并且自带默认设置的各种常见动效，直接用就可以啦， 这方便程度简直不要太赞！不用重新导出导入文件动效还不用自己设置，只需要选中图层，然后在右侧选择效果就可以了。 像这样普通常见的一个页面动向，分分钟就制作好 好了。 制作好后支持导出 mp 四快 bom jiplocktpmg 格式，免费用户支持在线上传一个链接，虽然是款设备插件，但十分好用，免费用户也是可以制作三个文件的。这里我们将文件导出为 mp 四格式， 渲染完后就可以得到文件了。今天就到这里，快去试试吧！

piga 入门教程十一地图滚动毛点定位今天我们来继续扩展一下滚动毛点的应用，需要在点击时将固定的点滚动到画框中央。首先制作好素材，散布四个点， 然后我们绘制一个举行做空对象，布置四份，改一下命名方便。后面做交互链接。 把空对象放置到相应的图标上， 再复制保留一份，后面做参考线， 切换到圆形面板，添加交互统一添加。单击滚动到相应空对象动画缓动 阅览可以看到点击相应的图标，最硬的空对象均出现在左上角的位置了，我们只需要设置一下偏移量就可以完成了。 将预留的参考放置到画框中央，去一下 xy 的距离分别为三百零六和八十五。 回到圆形面板，设置一下偏一亮，向下向右均为负数， 这样片一亮就设定好了。来看一下效果， 对应的毛点均出现在中间位置了。最后把空对象的透明度调整为零就制作好了。 今天就到这里，原文件在标记式社区，你学会了吗？