大家好，这是 12 月的第 2 波设计干货合集！这次的合集当中有大家正需要的圣诞节设计素材合集，有专门处理假 PNG 文件的工具，还有素质颇为不错的免费图标和免费波纹素材生成工具，此外，还有人工智能 LOGO 和视频生成工具，可能是你之前完全没用过的好东西！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第...

大家好，这是 12 月的第 2 波设计 干货合集 ！这次的合集当中有大家正需要的圣诞节设计素材合集，有专门处理假 PNG 文件的工具，还有素质颇为不错的免费图标和免费波纹素材生成工具，此外，还有人工智能 LOGO 和视频生成工具，可能是你之前完全没用过的好东西！

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年12月精选实用设计干货合集 大家好，这是 12 月的第 1 波设计干货合集！

阅读文章 >

下面我们具体看看这一期的干货：

1、圣诞设计素材大合集 https://iconscout.com/pages/christmas-design-assets

看来 IconScout 逢年过节都要出一波针对性的素材，眼瞅着圣诞节就快来了，它又推出了圣诞特辑。这次的合集当中，包括超过 65000 款图标、矢量插画、3D插图、 Lottie 动画素材，这当中相当一部分是免费的，正在愁圣诞节促销页面缺素材的同学一定要看看。

2、文本转视频内容人工智能平台 https://elai.io/

从根本上来来说，Elai 所提供的功能并不复杂，它可以将你所准备好的文本转化为为带有真人念白的视频内容，而背景当中还能像制作 PPT 一样同期生成文本和其他类型的内容。Elai 会事先采集不同的角色形象和他们的声音，借助人工智能将他们合成到你的视频里。目前这项服务是收费的，不过提供免费试用，有需求的同学可以试试。

3、人工智能高素质 LOGO 生成工具 https://makelogoai.com/

最终还是走到了这一步： 使用人工智能来生成 LOGO。这个名为 Make Logo Ai 的服务，可以根据你的需求来生成素质颇为不错的 LOGO，你需要描述你的公司或者产品的名称，然后人工智能会根据你所提供的这些特质，生成对应的 LOGO。这项服务同样提供免费试用。

4、假透明 PNG 文件消除工具 https://unfakepng.com/

你是不是也曾碰到过这样的情况：在网上下载一个看起来半透明效果的 PNG 文件，结果发现背景并不是透明，而是伪装成「半透明效果」的马赛克效果。别担心，用 unfake.png 可以帮你去除掉这些马赛克，将图片变成真正意义上的透明 png，真的是业界良心啊！

5、高素质无缝纹理图案生成插件 https://www.figma.com/community/plugin/1138854718618193875/Noise-%26-Texture

生成无缝的纹理素材对于绝大多数的用户而言可能都是非常有用的，如果你正好是 Figma 用户，那么这个视觉设计的时候经常会用到的插件可能对你会非常有用——你只需要选中涂层，选择生成纹理或者渐变，然后调整即可，你不需要纠结于肌理无法拼接完美的问题。

6、免费高素质图标合集 Futicons https://futicons.com/

非常简单直给的一套免费图标合集，素质过硬，品类丰富，但是最重要的是， 整体的风格非常的未来主义，涵盖了虚拟现实、星际旅行、人工智能等各种新潮科幻时尚的图标，某种意义上它可以作为我们已有的很多图标的补充。此外，他们还接受定制服务，你所需要做的，就是点击 Get Custom Icons 按钮，发送邮件给他们官方即可。

7、抽象波纹背景素材生成工具 https://fffuel.co/aaabstract/

依然是在线素材生成平台 fffuel 出品的新功能，aaabstract 能够在线生成漂亮的波纹背景效果。当你打开它的时候，你会看到不断变化的波纹，你可以控制其中波纹的复杂度、失真度和混色的效果，有深色和浅色两种选择，确定了大概效果之后，就可以一键保存了！

Halo，这里是设计夹，今天为大家分享的是「动效格式」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。作为用户体验领域不可缺少的一部分，动效随处可见。

Halo，这里是设计夹，今天为大家分享的是「 动效格式 」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。

作为用户体验领域不可缺少的一部分，动效随处可见。日常工作中，我们可能只用 1-2 种动效格式，对其他格式的了解有所欠缺。

这次介绍 5 种动效输出格式和教程，包括 PS 输出和 AE 输出，建议收藏保存下来随时查看，帮助大家更快更好地完成落地！

更多动效基础知识：

设计师必学的73个基础动效设计！附全面系统的免费入门教程 大家好，我是和你们聊设计的花生 ~ 昨天看到一个小伙伴在群里分享了一个网站——动效周期表（Motion Periodic Table），里面以“元素周期表”的形式罗列出Ae常用的73种基础动效设计，非常有意思。

阅读文章 >

一、PNG 序列帧方式 PNG 序列帧就是把一张一张的 PNG 图片按照顺序播放，跟 GIF 相比不会产生边缘锯齿的效果，也比 GIF 支持的色彩范围大。

优点：制作方便简单，还原度高，颜色偏差损失基本没有（PNG 图片压缩可能会有颜色偏差），动效效果还原度高（因为就是一张一张图片播放的，像 AE 做的一些雨水，火焰都可以显示出来，开发人员可调节播放速度）。

缺点：需要加载全部图片，文件占用内存大，内存一大就容易造成打开页面的时候卡顿，大的文件用户体验感很差。

1. PNG 序列帧-PS 输出方式

2. PNG 序列帧-AE 输出方式

3. SVGA 方式

Svga 背景： jianshu.com/p/dfa16d9d67cd

官方网站： https://svga.io/index.html

官方插件： https://svga.io/designer.html

官方文章： https://svga.io/article.html

优点：SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。SVGA 的转换器和播放器都开源。

使用设计师工具，可以轻松的将 Aep 或 Fla 格式的动画文件导出成 SVGA 格式资源文件。动画设计师通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。

动画文件体积小，播放资源占用优，动画还原效果好，使用方法简便，大大提高了工作效率。

缺点：有损压缩，不支持图层渐变和插件特效，有的平台并不支持 Svga。

4. SVGA 动效输出流程

5. SVGA 动效输出方式

二、Lottie 方式 Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS,Android 和 ReactNative 版本。

Lottie 通过 AE 设计好的动画效果，通过 Bodymovin 插件直接导出 json 文件，并允许开发人员直接调用它们。Lottie 库使开发人员能够实现动画效果，提升了工作效率，减少了码代码的时间。

优点：前端可以方便地调用动画和控制动画，以减少前端码代码的时间。json 文件的小，性能表现也很好。

缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，图层命名需要英文。

1. Lottie 动效输出流程

2. Lottie 动效输出方式

三、GIF 方式 一种无损压缩的 8 位图像文件。大多用于网络传输上，速度要比传输其他格式的图像文件快，但不能用于存储真彩的图像文件。

优点：兼容性好，可以多平台支持。

缺点：GIF 格式仅支持 256 种不同的颜色，文件占用空间大，会有色彩失真效果。

1. GIF-PS 输出方式

2. GIF-AE 输出方式

四、MP4 方式 常用的视频格式，通常用在网站的展示背景还有宣传的 MG 动画什么的。

优点：兼容性非常好。

缺点：适合背景展示或者其他展示方面，其他方面很少使用。

1. MP4-AE 输出方式

五、交互动效输出文档 动效参数文档是一种把动效参数量化的文档，它是 动效设计 师和前端开发人员沟通的重要工具。

以前动效标注文档还要一个一个图层标注(位置，旋转，透明图，动画曲线)。现在直接用脚本直接就可以一键出来了。

最后 以上是 5 种常见的动效输出格式和输出教程，强烈建议收藏保存下来，已备随时查看，也希望这些内容能让大家对动效格式有更多了解和使用～

欢迎关注作者微信公众号：「Clip设计夹」

大家好，这是 12 月的第 2 波设计干货合集！这次的合集当中有大家正需要的圣诞节设计素材合集，有专门处理假 PNG 文件的工具，还有素质颇为不错的免费图标和免费波纹素材生成工具，此外，还有人工智能 LOGO 和视频生成工具，可能是你之前完全没用过的好东西！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第...

大家好，这是 12 月的第 2 波设计 干货合集 ！这次的合集当中有大家正需要的圣诞节设计素材合集，有专门处理假 PNG 文件的工具，还有素质颇为不错的免费图标和免费波纹素材生成工具，此外，还有人工智能 LOGO 和视频生成工具，可能是你之前完全没用过的好东西！

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年12月精选实用设计干货合集 大家好，这是 12 月的第 1 波设计干货合集！

阅读文章 >

下面我们具体看看这一期的干货：

1、圣诞设计素材大合集 https://iconscout.com/pages/christmas-design-assets

看来 IconScout 逢年过节都要出一波针对性的素材，眼瞅着圣诞节就快来了，它又推出了圣诞特辑。这次的合集当中，包括超过 65000 款图标、矢量插画、3D插图、 Lottie 动画素材，这当中相当一部分是免费的，正在愁圣诞节促销页面缺素材的同学一定要看看。

2、文本转视频内容人工智能平台 https://elai.io/

从根本上来来说，Elai 所提供的功能并不复杂，它可以将你所准备好的文本转化为为带有真人念白的视频内容，而背景当中还能像制作 PPT 一样同期生成文本和其他类型的内容。Elai 会事先采集不同的角色形象和他们的声音，借助人工智能将他们合成到你的视频里。目前这项服务是收费的，不过提供免费试用，有需求的同学可以试试。

3、人工智能高素质 LOGO 生成工具 https://makelogoai.com/

最终还是走到了这一步： 使用人工智能来生成 LOGO。这个名为 Make Logo Ai 的服务，可以根据你的需求来生成素质颇为不错的 LOGO，你需要描述你的公司或者产品的名称，然后人工智能会根据你所提供的这些特质，生成对应的 LOGO。这项服务同样提供免费试用。

4、假透明 PNG 文件消除工具 https://unfakepng.com/

你是不是也曾碰到过这样的情况：在网上下载一个看起来半透明效果的 PNG 文件，结果发现背景并不是透明，而是伪装成「半透明效果」的马赛克效果。别担心，用 unfake.png 可以帮你去除掉这些马赛克，将图片变成真正意义上的透明 png，真的是业界良心啊！

5、高素质无缝纹理图案生成插件 https://www.figma.com/community/plugin/1138854718618193875/Noise-%26-Texture

生成无缝的纹理素材对于绝大多数的用户而言可能都是非常有用的，如果你正好是 Figma 用户，那么这个视觉设计的时候经常会用到的插件可能对你会非常有用——你只需要选中涂层，选择生成纹理或者渐变，然后调整即可，你不需要纠结于肌理无法拼接完美的问题。

6、免费高素质图标合集 Futicons https://futicons.com/

非常简单直给的一套免费图标合集，素质过硬，品类丰富，但是最重要的是， 整体的风格非常的未来主义，涵盖了虚拟现实、星际旅行、人工智能等各种新潮科幻时尚的图标，某种意义上它可以作为我们已有的很多图标的补充。此外，他们还接受定制服务，你所需要做的，就是点击 Get Custom Icons 按钮，发送邮件给他们官方即可。

7、抽象波纹背景素材生成工具 https://fffuel.co/aaabstract/

依然是在线素材生成平台 fffuel 出品的新功能，aaabstract 能够在线生成漂亮的波纹背景效果。当你打开它的时候，你会看到不断变化的波纹，你可以控制其中波纹的复杂度、失真度和混色的效果，有深色和浅色两种选择，确定了大概效果之后，就可以一键保存了！

随着 3 年疫情影响，全球经济下行，消费者更加关注性价比高的货品，今年京东 11.11 以“给生活多点实在”为主题，以更简单、更大力度的优惠举措，更丰富的趋势新品和爆款好物，更全面、更贴心的服务体验 ，为消费者带来最实在的价格、最实在的商品和实在服务，京东电器也将在此次 11.11，重点围绕价格心智体验，通过设计...

随着 3 年疫情影响，全球经济下行，消费者更加关注性价比高的货品，今年京东 11.11 以“给生活多点实在”为主题，以更简单、更大力度的优惠举措，更丰富的趋势新品和爆款好物，更全面、更贴心的服务体验 ，为消费者带来最实在的价格、最实在的商品和实在服务， 京东电器 也将在此次 11.11，重点围绕价格心智体验，通过设计让用户快速找到实实在在的商品。

往期 京东设计 案例：

大厂案例实战！京东微信购物2022年改版深度解读 今年以来，京东购物小程序围绕“一键发现 万物好店”的产品心智，从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。

阅读文章 >

本篇文章将从项目背景、价格心智设计语言传达、京东电器 11.11 事业部视觉创意、品类视觉创意、京东电器全渠道的线上线下视觉体验一致、总结与心得六个方向去讲述，浏览阅读大概需要 10 分钟

目录：

项目背景：2022 京东电器 11.11，在集团“给生活多点实在”的主题下，整合各事业部，在统一性中彰显各品类差异性，探索更全面、更贴心的服务体验，为消费者带来最实在的价格和商品。 价格心智设计语言传达：3C Design 在设计上探索价格心智的表达新方式，传播“京东电器”品牌符号特征契合“好物，好价，好服务”体验心智。 京东电器 11.11--事业部创意视觉：各级事业部会场 11.11 以“闪电·痕迹”为核心设计理念，统一加入京东电器代言人肖战，创意推导新品类，新趋势，通过创意触达让用户看见并吸引，实现更好的商业转化，提升京东电器品牌声量。 京东电器 11.11 -- 品类视觉风格创意：京东电器 11.11 在品类侧会场中以京东电器 IP 形象 joy 为主体，让创意符号闪电划过展现各种创意场景，以场景维度推出 3C 各品类产品。 京东电器全渠道的线上线下视觉体验一致：对线下业态视觉做统一规范指导，做到线上线下视觉体验一致，更好更有效触达用户体验，全方位传播心智提升品牌声量。 总结与心得：此次 11.11 设计从用户角度出发，想用户所想，让用户快速找到实实在在的商品，满足用户对于购买高性价比货品的需求，建立京东电器为用户购物价格心智的首选平台。 一、项目背景 前言：京东 11.11 主题背景今年京东 11.11 以“给生活多点实在”为主题，将以更简单、更大力度的优惠举措，更丰富的趋势新品和爆款好物，更全面、更贴心的服务体验 ，为消费者带来最实在的价格、最实在的商品和实在服务。1.新消费设计思考基于京东 11.11“给生活多点实在”的主题，同时随着全球经济下行对用户生活方方面面的影响，3C 产品面临着新一轮的消费变化，此次京东电器 11.11 聚焦“人”“货”“场”进行了全新的设计思考。

①：人群：关注消费者对于价格诉求，追求性价比，追求好的商品推荐，追求更多优惠信息的接受；

②：货的设计：建设价格心智设计，让用户快速找到实实在在的商品，把好的商品介绍出去；

③：场/业态：建设性价比爆品多端多场景，线上线下同时注重打造价格心智的实体业态环境，打造一致性的体验感知；2.造记忆-京东电器品牌的价格心智我们在去设计价格心智的同时加入对符号，货品氛围，线上线下场景化体验感知一致性的思考，通过对于楼层货品视觉氛围渲染、商卡价格力信息传达、百大品牌共建传播探索等， 给用户传递京东电器是价格购物首选平台的认知。

近期工作思维模型：

Design Think：设计团队近期目标会围绕三个维度去思考与推进执行“京东电器心智打造”：造记忆、造场、造势

二、价格心智设计语言传达 1. 商卡价格心智设计的调研与升级

通过对友商平台商卡信息的调研，建立了商卡价格心智雷达图，并分析得出结论：

友商平台主要通过标签的不同颜色区分活动的规则和促销节点，通过进度条可视化“库存余量”以增加促销紧迫感，商卡中重点突出“直降/补贴/全网低价”等信息； 尝试应用“价格曲线”突出价格； 商卡中较突出“优惠券”样式；京东电器根据自身货品及价格，此次 11.11 在商卡信息传达上，主要以突出“预估到手价”、突出“补贴”以及突出“抢购”三大信息维度作为重点设计方向；

2. 价格心智组件调研分析

此次 11.11，3C design 同时也对友商平台价格心智组件进行了设计调研，探索了“价格心智文案规范”、“架构按钮”、“价格梯度、价格曲线”和“价格信息描述”的信息和设计样式的表达。

① 低价心智文案规范

规则、进度、状态：对各平台“时间轴/倒计时”、“活动状态/进度条”做了收集调研；主要以突出“补贴”、突出“直降”“金额”、突出“券”、突出“秒杀”“限时”“抢购”四个维度为核心信息去传达给消费者对价格的感知；

加购按钮：对各平台商卡上加入购物车的按钮信息做了收集调研；主要以突出“补贴”、突出“直降”“金额”、突出“券”、突出“秒杀”“限时”“抢购”四个维度为核心信息去传达给消费者对价格的感知；

价格梯度、价格曲线：价格梯度主要包含“三阶”和“两阶”、价格曲线以不同维度描述价格：单价到手/预估到手/已省等；

价格信息描述：主要包含“降价金额文案”、“补贴金额文案”和“券后金额文案”三大维度

2. 京东电器价格心智组件应用&提升价格心智商卡设计提升设计升级：

11.11 期间对 3C 全部 20 余个会场进行整体设计升级，具体优化提升补贴价、利益点、折线力度和到手价等信息，用逛会场的体验上提升价格心智；团队共同参与设计了共计 63 种商品卡片样式；24 种价格曲线样式；51 种加购按钮，在优化后单个商卡楼层曝光点击率最高提升 4 个百分点；同时也提升了会场的页面停留时长和转化，在后续大促中仍可沿用；

3. 京东电器价格心智营销新阵地

① 京东电器巨超值项目背景：

京东电器帮我“砍下来”的心智玩法，运用征集用户购物心愿，让利消费者，促销极简，30 天价保，晚 8 开抢的重点策略主动出击，占领心智，提升消费者促销体验。

创意思路：在打造京东电器巨超值品牌 IP 的同时，保持大促氛围感。页面整体框架去繁从简，突出重要促销信息的同时需要做到模块与模块间的合理布局。另外用户对于促销信息非常敏感，利用符合用户认知的图形提高主题的辨识度及营造促销的氛围感。

巨超值货品选择：通过京东强大的议价能力，大单采购，为消费者提供高性价比货品，建设性价比爆品多端多场景的心智。

低价心智设计感：巨超值会场是 11.11 主打价格心智的根据地，整体会场强化补贴价展示，设计增加“补贴 XXX 元”、“预估到手价”和“白菜捡漏价”等低价心智信息，同时设计大转盘会场，增加新用户引流；

② 巨超值视觉创意展示：

4. 未来展望

3C Design 将在未来 12.12 等大促活动中，总结各会场商卡价格信息设计数据转化率，持续优化价格力信息，丰富价格设计样式，进一步强化京东电器价格心智传播。最终会修改并沉淀出属于 3C Design 专属的价格心智标签与文案规范组件库。

三、京东电器 11.11 -- 事业部视觉风格创意 前言：集团 11.11 视觉创意理念背景介绍：

「核心目标」主会场氛围共建，打造集团整体大促氛围，给用户统一的强促销感知。

「主视觉概念」围绕主题“11.11 主题”，拆解设计关键词 —— 体验至简、自然可持续、多元创新、多元包容，提炼出“给生活多点实在”的主视觉概念，以11.11Logo图形作为超级符号应用贯穿此次11.11，并结合京东品牌资产Joy符号，加深平台印记。

1. 11.11 项目创意「痕迹」设计理念：

消费者在 11.11 大促中有过喜悦、惊喜、感动等等，这些都是在记忆中的痕迹；品牌符号“闪电”闪过的痕迹，是京东电器与用户共同的记忆，痕迹上绽放出的画面（产品、服务、情感），都是京东电器 11.11 给用户带来的种种惊喜体验。主视觉各事业部拉通，通过“肖战”的粉丝经济效应，叠加京东电器品牌标志性记忆元素图形“闪电”，组成主视觉元素模型，在闪电的尾部设计了一条记忆“轨迹”，意指每一次购物都是一段美好的记忆，在价格心智的基础上添加一些温度。

2. 一级事业部会场视觉创意规范：

3. 各事业部主会场视觉创意：

创意思路：各事业部统一以京东电器“闪电”符号+痕迹为核心创意设计理念，融入京东电器代言人肖战，强化京东电器品牌心智，将“场”的选景设在室外街道，在街道两侧融入各事业主品，强调各事业部卖点特色，在保证差异化创意的同时，各组视觉色彩调性整合保持一致性，强化京东电器视觉整体统一感，共建电器品牌视觉规范。将“京东电器”品牌符号特征契合“好物，好价，好服务”体验心智，延展出创意十足，个性鲜明的主会场画面演绎；随着 11.11 时期变化，在主 kv 视觉创意上，保持“闪电”符号+痕迹为核心创意设计理念的前提下，高潮期由预热期的正视角拉为仰视角度，强化视觉冲击力 ，将京东电器 11.11 大促氛围推向高点。

① 群主会场项目背景：群会场不同于其他各级事业部承担销售货品的任务，旨在 11.11 期间起到功能分发的作用，为各事业部引流，提高转化，助力销售。

创意思路：将各事业部打造出城的概念，融合各品类标志品牌产品，给予曝光。在页面设计中，旨在达到有效引流效果，重点设计各事业部入口。

设计亮点：在以往大促节点期间，京东电器频道首页主要在头部进行主题氛围的渲染，此次在楼层入口进行组件创新，通过旋转魔方，多面多维度展示各级事业部品类会场及产品，更全面有效到达引流效果。

② 各事业部主会场视觉创意展示

各事业部楼层展示：

从预热期、开门红到高潮期，随时期的推进，各事业部会场的氛围和视角也随之层层递进，在楼层的氛围渲染中，色调由橙红色推进到京东大促红色，促销氛围感愈加浓烈，在楼层条及商卡设计上，也更加强调京东电器价格心智传播，响应今年京东 11.11 以“给生活多点实在”的主题。

技术创新价值：

此次京东电器 11.11 期间，我们也通过数据驱动设计，不断深挖用户对于我们整个京东电器 11.11 大促活动的价值体验。在各事业部及品类会场，3C Design 前端组件共创新复用 60+组件。此次事业部各主会场大量使用 3C 营销设计团队沉淀的优秀组件，其中挽留弹窗，一键领券，浮层 icon，商卡层叠切换等曝光点击率均有不同幅度的增长，与集团研发团队共建的产品 3D 模板，在不断提升曝光点击的同时，实现了用户可以在会场上实时浏览产品的 360 度的样式，加深了用户对于新品，趋势品的关注度。

此次 11.11 我们整理沉淀了各事业部主会场优秀组件样式 TOP10 并总结组件优势和使用推荐，为后续的活动做好了合理可视化的数据支持。

四、京东电器 11.11 -- 品类视觉风格创意 1. 创意符号打造

创意思路：22 年 11.11 主要围绕京东电器品牌曝光、价格心智、视觉创意三个方面，首先在京东电器品牌上使用品牌 LOGO、符号、形象进行统一化的心智触达； 其二是价格心智，在颜色选择、构图、商卡展示信息上重点烘托氛围，突出价格心智；其三突出各个品类特色，保留个性化特征；

设计理念：京东电器 11.11 在品类侧会场中使用“场景版”：闪电划过展现各种创意场景，以场景维度推出 3C 各品类产品。

2. 品类会场视觉创意规范：

3. 各品类创意视觉展示：

预热期：

高潮期：

五、京东电器全渠道的线上线下视觉体验一致 对线下业态视觉做统一规范指导，期间在各超级体验店，旗舰店等资源位上刊，做到线上线下视觉体验一致。并在 11.11 期间联合各大品牌供应商，首次以京东电器自身品牌闪电创意图形进行 1+100 百大品牌创意海报投放，持续传递京东电器“好价，好货，好服务”的品牌心智。

1. 百大品牌

① 项目背景

此次京东电器 11.11 联合百大品牌进行视觉共建，项目从 9 月底开启进行整体的创意视觉的下发与宣讲，中期的审核与反馈，到最终 10 月底配合市场部侧在 11.11 期间做 1+N 整体的创意传播与爆发，此次创意海报也是京东电器首次以自身品牌闪电创意图形联动品牌侧一起在双十一期间共创视觉创意方案。

② 百大品牌视觉创意规范

闪电创意海报一共由闪电创意符号、创意背景、营销标题和信息四个部分组成。画面中各类元素的大小及位置皆与之形成对应关系。

③ 项目亮点

京东电器 1+100 百大品牌闪电创意海报联合投放，以京东电器“闪电”符号为基础图形共建创意海报；11 月 1 日-11 月 11 日期间各品牌侧陆续在各自官微进行投放与爆发，在 11.11 期间一起在京东站内外助力京东电器品牌曝光与声量传播；

④ 优秀海报案例：

⑤ 未来展望

此次 11.11 京东电器和百大厂商品牌合作共创视觉创意，是京东电器和品牌方的合作共赢，在未来，要持续保持和各大品牌供应商的合作共建，助力共同发展进步，共同为消费者提供更优质的服务。

2. 京东电器线下品牌传播

在线下业态方面，以京东电器“闪电”符号为核心加入京东电器代言人肖战，助力品牌传播和吸引用户进店，全套视觉覆盖 5 家超体、40 家门城旗、100+五星双门头门店内；五家超体累计到店几十万多人次，线下业态会场累计曝光上千万多人次；

全渠道 JOY 形象：京东电器全渠道（线下业态）JOY IP 形象在 11.11 期间开始传播，在用户心智上全渠道 JOY 热爱 3C 产品、热爱购物、有潮酷感的形象，同时此信息仅在宣传线下业态中使用，让用户感知“京东电器”服务的同时，也能识别出不同业态。

线下传播 KV&上刊展示：

六、总结与心得 1. 京东电器低价心智

结合 2022 年京东 11.11“给生活多点实在”主题，在一级事业部中加入京东电器代言人肖战，助力京东电器品牌心智提升，同时加入商业化思考，京东电器 2022 11.11 将设计重点放在了对于价格心智的思考，通过对符号，设计组件应用&提升等助力业务提升，让设计更营销，传递京东电器“好价，好货，服务”的品牌心智，提升京东电器品牌声量传播。

2. 商业化的设计

团队会针对用户体验、营销、交互、品牌、研究、前端代码设计等层面服务 3C 事业群。从创意到商业化价值的转化，再从数据理性分析并驱动，最终形成商业设计赋能于业务帮助业务增长。同时团队是个关注设计商业化、设计价值领域的所有项目的创新设计。从探索价格心智的商卡和组件样式，再到多场景价格心智氛围打造，设计表现力有过之而无不及，有效触达用户体验，全面提升京东电器品牌心智声量传播，最终触达 2022 年京东电器 11.11 价格心智表达。设计和商业的有机结合对设计师而言一直都是一个很大的命题，尤其在全球经济下行的今天，更需要 设计师 利用敏锐的观察视角，立足商业本身，持续挖掘设计价值，让商业美而简单。

3C Desgin 优秀设计狮小伙伴们，希望下一个 11.11 更加精彩~

THANKS.

欢迎关注「JellyDesign」的小程序：

“时间戳”即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息，其实它也会对业务带来重要影响。同时时间戳的设计非常灵活，在不同场景和状态下都有差异化设计。

“时间戳”即时间信息的展示方式，它是一个在 UX 设计中经常出现，又容易被忽视的元素。许多人都以为时间戳仅仅向用户传递时间信息，其实它也会对业务带来重要影响。同时时间戳的设计非常灵活，在不同场景和状态下都有差异化设计。那么这其中有什么规律可循呢？本文将结合 58 相关产品的实践向读者阐述时间戳控件的设计方法。

更多时间设计干货：

如何设计「时间显示」更专业？来看大厂总结的方法！ 背景 “时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。

阅读文章 >

一、时间戳类型 时间戳的类型分为绝对时间和相对时间两种，二者覆盖了全部的时间戳场景，其中绝对时间强调“准确性”，而相对时间强调“即时性”。

绝对时间和相对时间的差异

1. 绝对时间

绝对时间是指事件发生的确切时间，目标为用户提供精确的日期和时间，强调事件的准确性。它由“日期（年月日）+时间（时分秒）”的格式组成，既包含时间点也包含时间段，如：“下午 2:00 开会”、“2022 年 11 月 1 日～2022 年 12 月 1 日放假”等。优势是时间信息传达精准，给用户以确定性，强化对时间信息的感知；缺点是会导致文本过长浪费空间。绝对时间的常用的展示方式有以下 4 种：

“2007 年 2 月 6 日” 和 “2007-02-06” 是公历日期标准格式，用“-”分割时个位数需要加“0”。 “2007/02/06” 在不同国家有着不同的展示顺序，在设计时需要谨慎使用。 “2007.02.06” 使用英文句号做分割，容易与英文字段混淆造成误解，建议尽量少用。 我们建议平台使用统一的展示方式，以保证统一性同时提升用户感知。

2. 相对时间

相对时间是指事件发生的时间与现在所处时间的差值，目标是提供相对的模糊时间，向用户强调事件发生的即时性。它大多数由“日期（年月日）/时间（时分秒）+定语”的格式组成，如：“帖子发布于 2 天前”、“会员 30 天后到期”等。使用场景多用于：倒计时、即时性资讯、通知推送等。优势是用户的理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是相较于绝对时间不够精确。

设计时首先要注意单位换算。试想一下随着时间的增加，单位前的数字会不断增长导致字段所占空间越来越大，以至于浪费空间并增加阅读成本。因此时间单位需要随着时间推移而变化，尽可能使用简短的字段描述相对时间，如将“48 小时前”简称为“2 天前”，将“712 天前”简称为“2 年前”。

其次要关注时间取整。由于相对时间只提供及时性的模糊时间，因此为了降低用户理解成本并节省空间，我们可以将相对时间戳做取整处理，如将“1 小时 15 分钟前”取整为“1 小时前”。

相对时间戳的设计注意「单位换算」和「时间取整」

二、时间戳颗粒度 绝对时间戳是由“日期+时间”组成的，在不同场景中 设计师 会使用不同的颗粒度来设计时间戳。

「日期＋时间」的组合

1. 粗颗粒度

精确到“日”的时间戳，作为时间维度的 Tips 应用在各种设计组件中，向用户传达最基础的时间信息。

2. 中等颗粒度

精确到“分”的时间戳，常用于精确事件的时间展示，有 2 种展现形式：

动态日期：以“XX 12:00”的格式出现，多用于时效性强的场景，如聊天信息和新闻资讯。根据时间发生的日期和当日距离有差异化：前一天发生，可写作“昨天”；一周内发生可以写周几，如“周二 12:00”；超过一周内发生可以写日月，如“2 月 6 日 12:00”；超过一年内发生可以加上年，如“2022 年 2 月 6 日 12:00”。 固定日期：以“2022 年 2 月 6 日 12:00”的格式出现，应用于关键时间节点的展示场景，相比较上一种方式更正式且传达的确定感更强。

中等颗粒度的格式差异

3. 细颗粒度

精确到“秒”的时间戳，应用于金融交易场景，如交易记录、订单记录等。举例：58 到家 App 的订单模块，用户在查看订单记录时，给他们传达强烈的确定感，从而产生安全感并提升对平台信任。

58到家APP的订单模块

倒计时的设计也会精确到秒，并被广泛应用在各类运营活动上。如下图，58 到家的运营活动，用户看到时间一分一秒地流逝对心理造成压力，从而产生激励作用，增强消费欲望。

限时运营活动的倒计时

三、时间戳应用场景 为了能更好地使用时间戳，我们还需要知道它在不同场景下的作用。

1. 重要内容

在设计中作为重要的内容要素使用，来强调关键的时间节点。如运营活动，该场景下时间戳对于活动内容的传达有重要影响，甚至关系到用户能否顺利完成活动任务，如用户能否在规定时间内完成抽奖获得礼物，或能否按时观看直播。因此在设计中需要增强这部分的优先级和视觉表现力。

运营活动中的时间要素

2. 行为标记

记录用户的关键行为。在用户进行某个动作后打上时间的标记。很多关键操作都存在可追溯性，包括付款、修改内容、创建产出物等。因此设计时间戳为的是让用户能够在查找相关信息时，实现快速定位。以下图的 B 端产品为例，我们在「智慧营销平台」和「云效 2.0」使用了时间戳引导，方便用户以时间维度查看操作行为。

B端场景下标记用户的操作行为

3. Tips 信息

用户在浏览产品内容时，时间戳作为该条内容的附属信息，起到补充说明的作用。该场景下时间戳的优先级较低，需要弱化处理。根据内容的差异性可以选择不同的类型和颗粒度，如下图中的收到消息时间使用绝对时间展示从而强调准确性，而 Feed 流中帖子的时效性更强，可以不提供精确时间，故使用相对时间展示。

时间戳Tips 信息

最后 不难看出时间戳是一个可灵活运用的设计元素，需要设计师选择合适的类型、格式和颗粒度，并与应用场景紧密贴合，保证用户有良好的体验和感知。它不仅承担着传递时间信息的任务，也可以给业务带来价值，像在 B 端场景下利用时间戳帮助用户追溯操作行为，或在 C 端场景下利用倒计时产生紧迫，感刺激用户消费，从而提升订单转化。

时间戳虽然常见，但它的关注度却不高，许多设计师都是凭主观感觉设计，因此我们从一个理性的视角去梳理时间戳的设计方法，希望这篇文章能帮到你。

欢迎关注「58UXD」的微信公众号：

Halo，这里是设计夹，今天为大家分享的是「动效格式」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。作为用户体验领域不可缺少的一部分，动效随处可见。

Halo，这里是设计夹，今天为大家分享的是「 动效格式 」。文章来源于设计师「三长老」对于 UI 动效输出格式的设计研究。

作为用户体验领域不可缺少的一部分，动效随处可见。日常工作中，我们可能只用 1-2 种动效格式，对其他格式的了解有所欠缺。

这次介绍 5 种动效输出格式和教程，包括 PS 输出和 AE 输出，建议收藏保存下来随时查看，帮助大家更快更好地完成落地！

更多动效基础知识：

设计师必学的73个基础动效设计！附全面系统的免费入门教程 大家好，我是和你们聊设计的花生 ~ 昨天看到一个小伙伴在群里分享了一个网站——动效周期表（Motion Periodic Table），里面以“元素周期表”的形式罗列出Ae常用的73种基础动效设计，非常有意思。

阅读文章 >

一、PNG 序列帧方式 PNG 序列帧就是把一张一张的 PNG 图片按照顺序播放，跟 GIF 相比不会产生边缘锯齿的效果，也比 GIF 支持的色彩范围大。

优点：制作方便简单，还原度高，颜色偏差损失基本没有（PNG 图片压缩可能会有颜色偏差），动效效果还原度高（因为就是一张一张图片播放的，像 AE 做的一些雨水，火焰都可以显示出来，开发人员可调节播放速度）。

缺点：需要加载全部图片，文件占用内存大，内存一大就容易造成打开页面的时候卡顿，大的文件用户体验感很差。

1. PNG 序列帧-PS 输出方式

2. PNG 序列帧-AE 输出方式

3. SVGA 方式

Svga 背景： jianshu.com/p/dfa16d9d67cd

官方网站： https://svga.io/index.html

官方插件： https://svga.io/designer.html

官方文章： https://svga.io/article.html

优点：SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。SVGA 的转换器和播放器都开源。

使用设计师工具，可以轻松的将 Aep 或 Fla 格式的动画文件导出成 SVGA 格式资源文件。动画设计师通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。

动画文件体积小，播放资源占用优，动画还原效果好，使用方法简便，大大提高了工作效率。

缺点：有损压缩，不支持图层渐变和插件特效，有的平台并不支持 Svga。

4. SVGA 动效输出流程

5. SVGA 动效输出方式

二、Lottie 方式 Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS,Android 和 ReactNative 版本。

Lottie 通过 AE 设计好的动画效果，通过 Bodymovin 插件直接导出 json 文件，并允许开发人员直接调用它们。Lottie 库使开发人员能够实现动画效果，提升了工作效率，减少了码代码的时间。

优点：前端可以方便地调用动画和控制动画，以减少前端码代码的时间。json 文件的小，性能表现也很好。

缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，图层命名需要英文。

1. Lottie 动效输出流程

2. Lottie 动效输出方式

三、GIF 方式 一种无损压缩的 8 位图像文件。大多用于网络传输上，速度要比传输其他格式的图像文件快，但不能用于存储真彩的图像文件。

优点：兼容性好，可以多平台支持。

缺点：GIF 格式仅支持 256 种不同的颜色，文件占用空间大，会有色彩失真效果。

1. GIF-PS 输出方式

2. GIF-AE 输出方式

四、MP4 方式 常用的视频格式，通常用在网站的展示背景还有宣传的 MG 动画什么的。

优点：兼容性非常好。

缺点：适合背景展示或者其他展示方面，其他方面很少使用。

1. MP4-AE 输出方式

五、交互动效输出文档 动效参数文档是一种把动效参数量化的文档，它是 动效设计 师和前端开发人员沟通的重要工具。

以前动效标注文档还要一个一个图层标注(位置，旋转，透明图，动画曲线)。现在直接用脚本直接就可以一键出来了。

最后 以上是 5 种常见的动效输出格式和输出教程，强烈建议收藏保存下来，已备随时查看，也希望这些内容能让大家对动效格式有更多了解和使用～

欢迎关注作者微信公众号：「Clip设计夹」

写在前面作为设计师，你一定遇到过这样的情况，自己做的设计稿，被开发出来后却完全换了一个模样。不仅视觉上有问题，交互上也有错误。而要想避免这样的情况，我们就一定要重视还原度走查这个阶段。

写在前面

作为设计师，你一定遇到过这样的情况，自己做的设计稿，被开发出来后却完全换了一个模样。不仅视觉上有问题，交互上也有错误。而要想避免这样的情况，我们就一定要重视还原度走查这个阶段。

更多 设计还原 干货：

如何提升页面还原度？我总结了这4个方法！ 「页面还原度」即开发工程师对设计稿的还原程度，页面还原度的高低，直接决定从产品需求到设计实现的程度是否被准确有效的表达。

阅读文章 >

它是我们产品上线前的必要保障。虽然测试同学会帮助我们验证一些流程上的问题，但更多的还原度细节问题，比如交互和字号间距等，则更多依靠我们设计师的来检查。而在还原度走查的过程中，个人认为主要分为以下几个部分：

一、还原度何时开始 经过对比验证，发现还原度在测试进行第一轮测试后进行，效率和时间能够最大化。 原因如下：

第一轮没结束前，很多功能性 bug 会存在，如果介入过早，很难跑完全部流程，加大还原度介入难度。 一些明显的交互和视觉问题，测试团队在第一轮是能够发现的，也能减少一部分工作量； 如果等 bug 解决得差不多，可能都二轮后了，这时候才开始走查的话，那么留给设计师的时间就会非常少，因为结测的时间已经固定，这可能导致开发可能没有足够的时间修正问题。

二、还原度检查内容 当我们拿到开发提测的版本后，应该针对于哪些内容进行检测呢。本人认为可以整体检查可以分为以下 3 个部分：

1. 整体流程

当我们拿到产品后，第一时间可以看下我们的整体的流程是否有遗漏，整体流程是否能够跑通。

首先需要确保我们的产品没有大的流程问题后，这个时候就可以开始细节的部分。避免某些大的流程被忽略，这往往需要更多的开发量，越早提出来开发就越早介入修改。

虽然这个过程基本都会被测试团队在第一轮的时候查验出来，但为了避免有遗漏，我们最好还是先把全流程跑一遍以避免发生问题。

2. 交互内容

当流程跑完，这个时候我们就可以进入到交互细节的检查。一般来说我们在检查时主要注意以下几个方面：

① 结合交互说明进行逐条验证：

一般我们的交互说明已经非常详尽，包含各类异常状态和细节交互。因此我的建议是在验证的时候可以结合我们之前的交互说明进行对照验证，避免某些部分被遗漏或者忽略。

出现问题有可能是我们的交互阐述的不够清晰或者说研发没有了解设计的逻辑，这些情况都是有可能发生的，因此我们在还原度验证时更需要细心验证和沟通。

② 交互说明未提及的异常状态：

这其实是很多设计师经常遇到的问题。我们在写交互说明的时候不可避免会忽略某些细节点。这个时候如果出现交互说明漏掉的异常状态，就需要和开发团队进行沟通。

如果是重要且影响体验的问题，可能就需要拉着开发团队进行沟通，评估下时间进行修改；

如果是不重要且不影响的体验的问题，就可以等下个迭代或者后续再进行对应修改；同时对问题做好记录，避免下次再出现类似问题。

这同时也反向要求我们在交互说明中尽可能考虑得更加全面，才能避免多次返工。关于这块有个小建议，可以将平时遗漏的交互记录下来，形成关于自己薄弱交互环节的自查表。通过建立专属的交互自查表来强化自己对于各类状态的认知，从而将说明写得更加详尽和完善。

3. 视觉内容

视觉的还原度检查可以说是占据了整体检查的大部分内容。毕竟功能或者交互还有测试团队帮忙验证，但视觉细节只能靠设计师本人来进行走查了。在这里我将其分为以下几块内容：

① 「像素眼」观察法

由于习惯问题，设计师对于字体的大小，元素的对齐有一种天生的敏感，因此对于某些比较明显的还原度问题，设计师是能够通过直接观察发现的，比如某些元素没有左对齐。

但这种只适合很多明显偏差的元素，在大部分时候，设计师还是需要借助辅助工具来协助进行还原度走查。

② 检查元素（F12）协助走查

在很多时候，我们发现某些元素存在问题，但不确定的时候，我们就需要借助检查元素辅助还原度走查。检查元素如何操作呢，可以通过右键-检查或者直接按 F12 来调出，通过鼠标选择元素，即可查看该元素的所有属性，包括字号、颜色、宽度等等都可以直观的看到。

利用这种方法我们可以检查得非常细致，比如某些细微的间距是否准确，都可以检查出来。

那么在这里我们可以简单介绍下前端的盒子模型，也就是你在检查元素中可以看到类似盒子的元素。盒子模型是 CSS 中的概念。所有的 HTML 元素都可以看作一个盒子，是用来设计和布局时使用。它包括我们常见的边距、边框、填充和实际内容。通过了解盒模型有助于我们理解前端是如何进行页面布局的，同时也帮助我们在走查时更直观地看到其中的间距和宽度等。

用一个实战案例，帮你完全掌握 HTML 和 CSS 的实际应用 写了那么多 HTML CSS 的学习，终于，要在这篇迎来具体的案例应用了。

阅读文章 >

其实检查元素还能辅助交互状态走查，这可能是很多设计师忽略的一个点。比如我们设定了 hover 按钮时有灰色底块，此时我们如何验证灰色块的色值和大小是否准确呢。

其实辅助元素也可以帮忙，如下图所示，我们通过勾选 hover 这个状态，界面中就会直接呈现当前元素的 hover 状态：

③ 借助工具辅助走查

目前市面上有两种常用的工具，想必很多设计师也已经知道了。分别是 CSS Peeper 和 Copiexl。

首先推荐的是 CSS Peeper。这款插件其实就是类似于检查元素，只是界面会更简洁，相比于检查元素去掉了很多干扰元素，打开后我们点击页面上的元素就能够直接看到其对应的元素属性和间距等。对于设计师群体来说还是比较友好的。

地址： https://csspeeper.com/

第二款的则是字节出品的 Copiexl。其对比方式会比较简单粗暴，就是将设计稿和开发稿在相同尺寸下进行叠加对比，从而看出来有哪些区域是不一样的，从而快速找出不对的地方。教程官网都有，我这里就不进行详细介绍了。

地址： https://copixel.bytedance.com/

三、还原度如何记录

通过以上几种类型的检查，基本上都可以检查出大部分还原度问题，那么此时如何与进行沟通呢，这个时候避免以下两个做法：

直接当面找到开发，给他说很多还原度问题。因为开发在这个阶段也有很多其他工作，不仅会打断他工作，他也不一定记得这么多细节； 直接将还原度问题在聊天窗口直接发出去。通过聊天记录看还原度，不仅不方便查看，还很容易遗漏掉部分信息。

因此正确的做法是建立一份还原度文档记录表，内容包含：模块，具体问题，问题截图，问题严重程度，解决状态，对应开发。

在这里需要注意的一点就是面对间距问题不正确时，不要直接跟开发说你去找设计文件对照下，而是直观地在还原度截图中告知他这里的正确间距，这样能够节省双方的时间，也避免开发再次看成错误的尺寸。

这样的话不仅能够清晰记录每条还原度，开发还能够根据重要程度有优先级地改掉问题，同时也可以为我们后续做校验提供支撑。

四、如何让整体变得更好 通过整体流程的梳理，不难看出还原度验证过程其实也是协作过程。因此想要很高的还原度，我们也需要在以下方面做得更好：

团队内部有严谨的设计规范，避免多设计师协作时同一控件用了不同的表现形式； 注重设计宣讲和重点标注。在进研发时设计宣讲是必要的，能够让研发人员了解我们的整体设计逻辑以及我们关注的重点，同时我们在写交互时也可以将重点字段用不同的颜色进行标记，从而让研发人员在写得时候能够引起重视 注重信息同步。我们所有的改动都需要将其同步给研发和测试人员，同时也可以在我们的设计稿上标记好更新内容，这样整体的协作会变得更加顺畅，也避免信息差导致的更新不及时。 避免频繁修改，不论是谁面对频繁修改都是不太开心的，因此我们对于已经进入迭代的设计稿，因此如果面对必要的修改时要及时同步信息。如果一些不太重要的改动也可以先放一放，后面再改。 写在最后

当我们验证完毕后，记得有一份还原度报告作为最终的检测凭证。因为在大部分的研发迭代中，或多或少都存在一些遗留的问题，还原度报告可以清晰的记录这些问题，也方便在后续版本中进行修复。

当然，即使经过上述的检验，也不可避免有遗漏之处，但没有关系，只需要将其记录下来，一些小的优化点我们可以在后面的排期中安排时间进行对应的修改。

以上就是本次还原度想要说的，希望能够对大家有一些帮助。

欢迎关注作者微信公众号：「阿东的设计体验馆」

序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？设计提速的秘诀就在于 Figma 中功能各异的插件。但当打开 Figma 插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？

序言

咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？设计提速的秘诀就在于 Figma 中功能各异的插件。但当打开 Figma 插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？为此 QQ 设计师在日常工作中反复实验，终于找到了这些宝藏插件，让 UI 设计领域的你成为高效的 设计师 。

更多 Figma插件 推荐：

全是高频神器！B端设计师常用的 7 款 Figma 插件 最近打开 Figma，点击我的插件，发现我已经安装了这么多插件... 我究竟要用哪一个插件？

阅读文章 >

一、Skale-缩放能力增强工具 很多设计师在从 Sketch 转换使用 Figma 的时候，找不到对应 Sketch 里的缩放功能。此时你就需要 Skale，这是一款热门好用的缩放插件，可以设置元素缩放中心，缩放比例或者缩放到特定的宽度、高度（包括该对象的所有属性也会随之缩放）。

下载地址： https://www.figma.com/community/plugin/808289809557716614/skale

二、To Path-路径上创建图形和文字 经常做平面的设计师会遇到的一个问题，Figma 内要如何在创建曲线的文字呢？你不妨可以使用 To Path 插件，它的功能是可以按照指定的路径来变换图形和文字。

下载地址： https://www.figma.com/community/plugin/751576264585242935/To-Path

三、Morph-快速创建特殊效果 Morph 可以在 Figma 内快速创建一些特殊视觉效果，如浮雕，霓虹灯，抖音故障效果，倒影，玻璃等。可以帮助设计师快速进行一些风格化的尝试和探索。

下载地址：  https://www.figma.com/community/plugin/906950256777348534/Morph

四、Mesh Gradient-网格渐变工具 当我们需要多种颜色混合渐变的效果时，Mesh Gradient 的作用是可以在 Figma 内以网格的形式编辑渐变，你可以编辑、拖动、填充这些网格点，做出极光的效果。

下载地址： https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient

五、Webgradients-配色灵感工具 做设计非常常用的一个方法就是多去尝试，当我们在做某个界面的时候不知道配色该如何处理的时候，可以使用 Webgradients 插件内置的多种高级配色，或许你的灵感就此诞生。

下载地址： https://www.figma.com/community/plugin/802147585857776440/Webgradients

六、Auto Layout Styles-自动布局管理 相比 Sketch，Figma 在 Auto layou 方面极大的提升了设计灵活度。而 Auto Layout Styles 插件可以很好的管理或者单独对某几个元素配置 Auto Layout，设计师可以在插件内设置好布局关系并进行命名，然后应用到设计中。还可以对已经设置好的布局样式进行修改，Auto Layout Styles 会同步到所有调用过这个布局样式的元素中。

下载地址： https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles

七、Batch Styler-批量修改文本和颜色样式 大家在工作中经常会需要去修改大量样式，这时候你就可以使用 Batch Styler 插件，它的主要提效点在于可以批量修改颜色属性样式，批量更改排版样式，批量删除、重命名样式。

下载地址： https://www.figma.com/community/plugin/818203235789864127/Batch-Styler

八、Styler-快速创建样式 当需要批量创建样式的时候，手动逐个去创建并不是有效的做法，而 Styler 插件可以快速批量创建样式（包括文本，颜色，效果等），它可以基于图层属性批量创建、修改或更新样式，当设计师在搭建组件库样式的时候，Styler 可以大大提高工作效率。

下载地址： https://www.figma.com/community/plugin/820660579767995949/Styler

九、Design System Organizer-管理设计系统 设计师在 Figma 内搭建组件库时，Design System Organizer 插件可以更方便设计师创建，管理和修改组件库。超级提效实用的功能包含：

1.像文件管理器一般管理组件内容

2.项目在类别树之间拖拽移动

3.文件之前批量转移样式

4.批量重新链接实例和样式。

下载地址： https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

十、Breakpoints-响应式断点插件 在 Figma 内，当需要展示界面因为拉伸拖拽而发生响应变化的效果时，使用口头描述和各种静态界面标注并不是最优解，使用 Breakpoints 插件，可以做一些响应式动态布局的效果，并共享动画原型。即使团队其他设计师没有安装这个插件，也可以在拉伸界面时预览到动态布局。

下载地址： https://www.figma.com/community/plugin/824289601590456356/Breakpoints

十一、Themer-UI 界面主题管理 同时设计深色模式和浅色模式的视觉稿会耗费设计师不必要的精力，Themer 的主要功能包括一键切换样式，主题管理，团队共享主题。能够从团队库中的已发布的组件创建和交换主题。将其作用于颜色、文本和效果样式的替换。设计师使用 Themer 可以一键切换成深色模式和浅色模式的设计稿，避免无效的适配模式工作。

下载地址： https://www.figma.com/community/plugin/731176732337510831/Themer

十二、Motion-关键帧动画 当需要在做界面的动画时，很多设计师会问，Figma 要如何导入 AE？其实未必要导入 AE 才能做动画。Motion 插件的作用是可以直接在 Figma 内完成关键帧动画设计，将大部分图层属性创建成关键帧动画，避免设计师做动画时需要不停切换设计工具，在 Figma 内就可以轻松愉快的完成静态和动态的设计稿。

下载地址： https://www.figma.com/community/plugin/889777319208467032/Motion

十三、LottieFiles-导入和浏览 Lottie 资源 在 Figma 内使用 LottieFiles 可以将自己的 dotLottie（.lottie）和 Lottie JSON（.json）文件导入 Figma 作为 gif 动画或高质量的 svg 图层，且可以访问和预览免费 Lottie 动画库内的资源，意味着有时候设计师甚至不需要使用其他设计软件来配合展示 UI 动画。

下载地址： https://www.figma.com/community/plugin/809860933081065308/LottieFiles

结语 设计工具与设计师是相辅相成的。所有的设计工具本身都有局限，但合理利用插件可以放大工具的价值，为设计提效，让设计师有更多的时间去思考设计方案本身。

你在设计中是否也遇到过一些宝藏插件呢？欢迎在评论区分享给我们，大家一起做最高效的设计师~

保姆级教程！最容易上手的 Figma 操作指南！ 如果你是从零开始了解Figma，或是从平面切换到UI，或者（像我一样）从Sketch切换，那不妨一起来学习！

阅读文章 >

第一波！我希望能早点知道的 11 个 Figma 技巧 编者按：这篇文章来自资深 UI设计师 Danny Sapio，他总结了日常设计过程中，使用 Figma 的一些非常快速的设计技巧，希望能帮到大家： Figma 这款设计工具进步真的超级快，在 Sketch 当中很多进阶的、复杂的功能，在 Figma 当中实现起来像呼吸一样简单。

阅读文章 >

欢迎关注作者微信公众号：「腾讯设计族」

序言咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？设计提速的秘诀就在于 Figma 中功能各异的插件。但当打开 Figma 插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？

序言

咦，同样是用 Figma，为什么同桌小花早早下班，隔壁二狗岁月静好，而你却在 Figma 中焦头烂额？设计提速的秘诀就在于 Figma 中功能各异的插件。但当打开 Figma 插件库，海量插件让人头晕眼花，究竟哪一款才是最适合你的呢？为此 QQ 设计师在日常工作中反复实验，终于找到了这些宝藏插件，让 UI 设计领域的你成为高效的 设计师 。

更多 Figma插件 推荐：

全是高频神器！B端设计师常用的 7 款 Figma 插件 最近打开 Figma，点击我的插件，发现我已经安装了这么多插件... 我究竟要用哪一个插件？

阅读文章 >

一、Skale-缩放能力增强工具 很多设计师在从 Sketch 转换使用 Figma 的时候，找不到对应 Sketch 里的缩放功能。此时你就需要 Skale，这是一款热门好用的缩放插件，可以设置元素缩放中心，缩放比例或者缩放到特定的宽度、高度（包括该对象的所有属性也会随之缩放）。

下载地址： https://www.figma.com/community/plugin/808289809557716614/skale

二、To Path-路径上创建图形和文字 经常做平面的设计师会遇到的一个问题，Figma 内要如何在创建曲线的文字呢？你不妨可以使用 To Path 插件，它的功能是可以按照指定的路径来变换图形和文字。

下载地址： https://www.figma.com/community/plugin/751576264585242935/To-Path

三、Morph-快速创建特殊效果 Morph 可以在 Figma 内快速创建一些特殊视觉效果，如浮雕，霓虹灯，抖音故障效果，倒影，玻璃等。可以帮助设计师快速进行一些风格化的尝试和探索。

下载地址：  https://www.figma.com/community/plugin/906950256777348534/Morph

四、Mesh Gradient-网格渐变工具 当我们需要多种颜色混合渐变的效果时，Mesh Gradient 的作用是可以在 Figma 内以网格的形式编辑渐变，你可以编辑、拖动、填充这些网格点，做出极光的效果。

下载地址： https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient

五、Webgradients-配色灵感工具 做设计非常常用的一个方法就是多去尝试，当我们在做某个界面的时候不知道配色该如何处理的时候，可以使用 Webgradients 插件内置的多种高级配色，或许你的灵感就此诞生。

下载地址： https://www.figma.com/community/plugin/802147585857776440/Webgradients

六、Auto Layout Styles-自动布局管理 相比 Sketch，Figma 在 Auto layou 方面极大的提升了设计灵活度。而 Auto Layout Styles 插件可以很好的管理或者单独对某几个元素配置 Auto Layout，设计师可以在插件内设置好布局关系并进行命名，然后应用到设计中。还可以对已经设置好的布局样式进行修改，Auto Layout Styles 会同步到所有调用过这个布局样式的元素中。

下载地址： https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles

七、Batch Styler-批量修改文本和颜色样式 大家在工作中经常会需要去修改大量样式，这时候你就可以使用 Batch Styler 插件，它的主要提效点在于可以批量修改颜色属性样式，批量更改排版样式，批量删除、重命名样式。

下载地址： https://www.figma.com/community/plugin/818203235789864127/Batch-Styler

八、Styler-快速创建样式 当需要批量创建样式的时候，手动逐个去创建并不是有效的做法，而 Styler 插件可以快速批量创建样式（包括文本，颜色，效果等），它可以基于图层属性批量创建、修改或更新样式，当设计师在搭建组件库样式的时候，Styler 可以大大提高工作效率。

下载地址： https://www.figma.com/community/plugin/820660579767995949/Styler

九、Design System Organizer-管理设计系统 设计师在 Figma 内搭建组件库时，Design System Organizer 插件可以更方便设计师创建，管理和修改组件库。超级提效实用的功能包含：

1.像文件管理器一般管理组件内容

2.项目在类别树之间拖拽移动

3.文件之前批量转移样式

4.批量重新链接实例和样式。

下载地址： https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

十、Breakpoints-响应式断点插件 在 Figma 内，当需要展示界面因为拉伸拖拽而发生响应变化的效果时，使用口头描述和各种静态界面标注并不是最优解，使用 Breakpoints 插件，可以做一些响应式动态布局的效果，并共享动画原型。即使团队其他设计师没有安装这个插件，也可以在拉伸界面时预览到动态布局。

下载地址： https://www.figma.com/community/plugin/824289601590456356/Breakpoints

十一、Themer-UI 界面主题管理 同时设计深色模式和浅色模式的视觉稿会耗费设计师不必要的精力，Themer 的主要功能包括一键切换样式，主题管理，团队共享主题。能够从团队库中的已发布的组件创建和交换主题。将其作用于颜色、文本和效果样式的替换。设计师使用 Themer 可以一键切换成深色模式和浅色模式的设计稿，避免无效的适配模式工作。

下载地址： https://www.figma.com/community/plugin/731176732337510831/Themer

十二、Motion-关键帧动画 当需要在做界面的动画时，很多设计师会问，Figma 要如何导入 AE？其实未必要导入 AE 才能做动画。Motion 插件的作用是可以直接在 Figma 内完成关键帧动画设计，将大部分图层属性创建成关键帧动画，避免设计师做动画时需要不停切换设计工具，在 Figma 内就可以轻松愉快的完成静态和动态的设计稿。

下载地址： https://www.figma.com/community/plugin/889777319208467032/Motion

十三、LottieFiles-导入和浏览 Lottie 资源 在 Figma 内使用 LottieFiles 可以将自己的 dotLottie（.lottie）和 Lottie JSON（.json）文件导入 Figma 作为 gif 动画或高质量的 svg 图层，且可以访问和预览免费 Lottie 动画库内的资源，意味着有时候设计师甚至不需要使用其他设计软件来配合展示 UI 动画。

下载地址： https://www.figma.com/community/plugin/809860933081065308/LottieFiles

结语 设计工具与设计师是相辅相成的。所有的设计工具本身都有局限，但合理利用插件可以放大工具的价值，为设计提效，让设计师有更多的时间去思考设计方案本身。

你在设计中是否也遇到过一些宝藏插件呢？欢迎在评论区分享给我们，大家一起做最高效的设计师~

保姆级教程！最容易上手的 Figma 操作指南！ 如果你是从零开始了解Figma，或是从平面切换到UI，或者（像我一样）从Sketch切换，那不妨一起来学习！

阅读文章 >

第一波！我希望能早点知道的 11 个 Figma 技巧 编者按：这篇文章来自资深 UI设计师 Danny Sapio，他总结了日常设计过程中，使用 Figma 的一些非常快速的设计技巧，希望能帮到大家： Figma 这款设计工具进步真的超级快，在 Sketch 当中很多进阶的、复杂的功能，在 Figma 当中实现起来像呼吸一样简单。

阅读文章 >

欢迎关注作者微信公众号：「腾讯设计族」