https://designtools.app[7]，也可以关注我的周刊，我会每周汇总。https://designtools.zhubai.love[8]References[1]

大家好，之前预告的「超级个体」个人发展分享系列第二期，也就是我的访谈，将在2022年11月5日（周六）19:30-21:00

十一月份要参与一个

号准备回去的时候，我这个项目基本就写好了，现在是时候介绍一下了。这是个很简单的小程序，就是给你的头像上添加各种标签或徽标。你可以一键将头像变为赛博朋克风格，或者添加文字、添加状态、添加

插件的人。听起来就很惨，是不是？朋友安慰我说：没关系的，按现在这个房价你还不一定有故居呢。朋友的话让我醍醐灌顶，得赶紧赚钱买“故居”。所以呢，我又鼓捣出一个主题切换的

的视觉和交互设计；•2、和产品团队一起构思创意，提供具备优质产品体验的整体解决方案；•3、主动挖掘视觉/体验问题，提出改进建议，提升产品设计品质。职位要求•1、熟悉互联网产品设计,

https://twitter.com/designedbyclu/status/1524050028091740160?s=20&t=zaHL065mzP0tDR-k6BZGlQ

设计师的世界充满自由而创意的探索，而工程师的世界却必须包含清晰而严谨的逻辑。看起来截然相反的两种角色，却要一起协作，把想法变为现实。Figma

Layout（自动布局）、更优雅的字体选择器、选区多颜色快捷切换、画布内超链接、插件共享、原型权限设置和社区功能，到现在除了字体选择器以外基本都上线了。字体选择器我估计是碍于性能和技术难度，毕竟

https://www.figma.com/community/plugin/739395588962138807/figma-icon-automation[6]

Handoff，虽然帮助挺多人解决了设计标注的交付问题，但是也收到了不少吐槽。这其中最多的，就是说导出很慢，对于需要频繁导出的朋友来说很不友好。时间就是金钱，为了给大家节省金钱，我最近开发了一个

这里需要特别提一下富文本样式的标注。我们在设计时有一些文本图层包含多种样式，为了方便查看这种富文本样式，我将文本进行了分段，开发可以点击对应的文本段来查看不同文字片段的各项属性值。

代码的特性，使得它可以以代码组件的形式存在。如果一套图标库每一个图标都是一份组件代码，那么按需加载就成为了可能，比如我们只用到了三个图标则只需要引入这三个图标组件，不会造成代码冗余。

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/[4]

"Discover"

快捷方式和技巧，帮助你节省时间，让你设计快如闪电（译者注：不是《疯狂动物城[1]》里的闪电）。下面开始欣赏视频吧，看看有没有你不知道的。详细文字版：复制图层要复制图层，只需要选择图层并按住

中，这样就可以用比较短的命名，方便查找。同时，这种命名方式也更加接近实际代码中的命名。比如说，你创建了一个页面并起名为

group：你希望将多个元素组合到一起，但不影响他们的可编辑性你希望将多个元素组合在一起，以便在缩放时保持跟随缩放（例如：由多个形状组成的logo或符号）你希望在操作

最强大的两个特性——组件和共享样式，并通过一系列的实例讲述了什么时候该创建组件，如何合理创建组件，共享样式的使用，以及该如何组织这些共享的库。全文较长，将分两次发布。Figma

等知名设计或办公软件，且大部分只有原价的7折或以下。最近，我在和数码荔枝合作，为大家提供了专属优惠券，大家可以按照下面的列表选取自己想要买的软件，扫码领取即可。

中的模板意味着他们在专注于业务之前需要写很多代码。理想的情况是设计师们需要能够快速开始，使用真实或接近真实的产品数据来构建页面。我们知道这对于很多公司都是一个挑战，希望我们能够找到一个解决办法。

优化了很多设计细节，让你在设计时更多是直觉式的操作，这些细节也能替你节约很多时间。目前来看唯一的缺点是首次打开会有点慢，但也还可以忍受。如果你和我一样有类似的需求，正在寻找一个称手的工具，可以试一下

都会跟着改变。其余的组件我们也将这么做。接下来绘制其它的组件，比如按钮、输入框、下拉菜单、导航条、卡片、标签、页脚等等。我一般喜欢先绘制具体页面，再提取出一些元素将其转换为组件，在移动到

作为互联网公司的产品经理，我们应该使用一种更加现代化、更加优雅的方式去写产品文档。最近在写产品文档，在此之前我思考了一下该使用什么工具。结合产品文档的性质和我自己的需求点，总结了一下大概需要满足以下几点：高效书写，更专注于内容可以生成便于阅读的形式可在线预览与分享有历史版本记录可多人协作经过几番尝试，最后我决定使用

我们都知道可用性测试能够帮助我们及时发现问题，让我们做出更符合用户需求的产品，也能让自己的方案更有说服力。但你可能也听说过一次完整的可用性测试所需要的成本也是不菲的，我们需要招募用户、撰写测试脚本、制作测试原型，还需要有记录设备、有经验的主持人、用户奖品等。专业完整的可用性测试固然能更好地发现问题，但也会消耗更多的时间和资源。就像《Don’t

插件，让微信编辑器支持全屏写作。实际效果就和上图一样，把无关的信息都隐藏起来，让写作者专注于内容。终于清静了，现在文思如泉涌，谁与我争锋？如何下载那么，这么好的东西哪里能下载呢？最快的方法是直接去

四个月前我还坐在电脑前敲着代码，沉浸在自己构建的世界里，而现在我已经成为了一名用户体验设计师。很多人问我为什么转行，其实想做设计这件事我已经盘算了十年。好像每个设计师小时候都喜欢画画，我也是。那时候每天晚上看《西游记》动画片，我都要拿个小本子照着画。就这样，到了高三我就明确了自己想要去的学校和专业——江南大学的工业设计。为此，我还专门画了一张图贴在寝室墙上。不过，最后发挥不错的高考成绩让我有点膨胀，第一志愿填了更好的一所学校的工业设计专业。不幸的是，我虽然考上了这所学校，却因为工设是这个学校的热门专业而被调剂到计算机专业。我天生随遇而安，本来有转专业的机会却也不怎么上心，就这样学了四年计算机。不过好在大学期间我一直在做和设计相关的事，包括设计海报、网站制作以及文创产品，这些事情让我有了一定的设计基础。大学时做的一些海报，大家不要笑毕业后，我糊里糊涂地去了北京一个创业公司做起了前端开发。公司的氛围比较好，我就偶尔尝试一些设计相关的工作。就这样，写写代码，偶尔做做设计，我觉得做得还挺开心的，想要专职做设计的心思也就淡了。突然有一天，我无意中知道了交互设计这个职位，心想这不正是为我量身定做的嘛，就决定转行，投身到我最喜欢的设计当中。从这以后，我就开始了漫长的转行之路。当时在知乎提的问题想做设计师，我必须先建立一个完整的设计知识体系，再拿出两三个还不错的作品。当时我的设计知识都是零散的，而且除了和设计师一起给公司做的设计规范，我拿不出其它完整的作品。这之后，我就给自己定下了计划，开始丰富自己的设计体系，同时完善作品集。这段时间对我来说非常难熬，白天上班，晚上就去咖啡厅看一些设计相关的在线课程，或者做自己的产品，每天回到家都已经接近十二点。好在之前做过交互设计工具

中管理设计系统资源是很复杂的——容易出错且很耗费时间。而这套工具使用代码来管理设计系统资源，它具有数据源唯一（改动组件代码，所有设计图文件中的组件更新）、可使用真实数据等特点。而这一切，在

在国内仍然是一帮很小众的设计师在用，但大家却没有一个集中交流、互相沉淀的地方。有了这个小社区，大家遇到问题就可以在这里提问，自己有一些经验也可以分享，遇到好的资源也可以在这里发布。这样，与

的预告片，让我想起了这篇旧文。这篇文章讲的是代码给我们的设计流程带来了怎样的变化，以及在不久的未来我们可以怎样利用这个工具。除了设计工具标配的图形编辑、响应式布局以及快速连线原型，最大的变化是

刚下班回来没多久，小西就给我发微信说到楼下了。小西是我两年前认识的一个朋友，设计师，长得好看性格也不错，但不知道为什么一直单身。她的业余爱好，除了做做设计，就是喜欢尝试各种美食。自从上次去重庆回来之后，她就一直问我带了什么好吃的。我出去玩向来不喜欢带特产，但这次去重庆却带了些火锅底料回来。小西知道后一直说要来找我涮火锅，今晚她就是冲着这火锅来的。不一会她就到了，我一开门她就不客气地冲了进来。“呀，底料煮开了，可以开始涮了啊！”说着她就开始往锅里加菜。“那开涮吧。”我在她旁边坐下，夹了几片牛肉进去。锅里的雾气弥漫开来，夹杂着火锅的浓烈气味，不一会暗红色的汤汁开始涌动起来。（当然，这是我在重庆吃的）“可以吃了！”她抢先夹了一片肉，吹了吹就迫不及待地吃了起来。“唉？你能给我讲讲响应式设计吗？”她抬起头问道，嘴里却还在嚼着。“为什么突然问这个？你们最近要做响应式网站吗？”我反问。“恩，公司有个子站要做成响应式的，我想了解更深一点，好做设计。”说话间她又夹起一块酥肉。我喝了口酒，说：“要想理解响应式设计，你得先理解‘文档流’的概念。你看这火锅，就像是一个网页，里面这些牛羊肉、鸭肠、酥肉、海带就是页面上的元素，这些元素就组成了一个‘文档流’。”“在以前呢，人们很少用手机看网页，网页设计师就只用设计开发一套只在电脑上浏览的网站。”我夹了一块酥肉，继续说道：“但现在不行了，移动端屏幕大了，就得开发两套代码，甚至三套四套去适配不同尺寸的设备。于是呢，有人就想了个办法，让开发者只写一套代码，能够在不同尺寸展现不同的布局。”“一个网页上的所有元素组成‘文档流’，就像瀑布一样，从左至右，从上至下一个个排列开来。我们在开发响应式网站时呢，一般也不会把元素宽度写成固定数字，而是使用百分比。这样当你使用不同尺寸的设备访问时，就可以看到元素之间的比例保持不变，比如侧边栏和右侧内容区域的宽度比永远是

前端这两年火了，尤其是依托于微信传播的H5（这个名字其实很不标准）漫天飞之后。很多非程序员尤其是设计师开始在这个时候对前端产生兴趣。而对于找工作的设计师来说，有一定的编程基础也会更受青睐。前端作为一种比较偏向视觉化的编程技术，对于想学编程的非程序员来说确实是一种比较适合的编程语言。但是在我和很多设计师打交道的过程中，发现大部分人对于学习编程会存在一些误区。比如很多人虽然想学但又认为编程太难有排斥心理；相对地也有一些人用CSS写了一些样式会觉得前端很简单；还有些人不知道从何下手，就开始啃起了枯燥无味的w3school文档（web技术中文文档）。于此我觉得设计师想学会写代码一定要对编程有正确的认知，既要对技术保持一颗敬畏的心，又不能从潜意识里排斥它。我做了两年前端开发，同时也做过许多设计的工作。基于自己的经验，对于设计师学编程这件事我有一些自己的想法和建议想分享给你。术业有专攻可能有些设计师想精通编程，成为一个全栈设计师，但我不太赞成这种想法。毕竟“术业有专攻”，每个人一生的精力有限，根据“一万小时理论”（想要成为某个领域的专家需要持续学习一万小时），要想成为设计大咖已经要花费很多时间了，想同时在技术这一领域有所造诣短时间也是达不到的。但是因为前端经常做一些视觉化的开发，比如写外观样式和交互动画，加之CSS和HTML语法看起来比较简单，常常会给设计师造成一种假象：前端不是很容易学吗。可是，不同于以前网页设计师仅仅做一些视觉还原的工作，现在的前端工程师要做的工作范围极广，写写样式调调动画只是其中一部分。从这个职位属性的变化——从设计师到工程师——就可以看出来，一名合格的前端工程师除了能够还原页面视觉，还要有工程化的思维，对数据结构有深刻的认识，有时候还需要一些计算机网络的知识，对后端也要有一定了解。这几年前端技术发展飞快，各种框架及工具层出不穷，新技术不断出现，想要追上却力不从心。所以说，前端入门容易但想要学深学透却“难于上青天”。说了这么多，其实是想告诉你要明确学习编程的目的。如果你想从设计师转行成为一个前端工程师，那么可能就要心无旁骛地去从计算机科学这门学科的基础知识开始学习了。但我相信大部分设计师的目的是想成为“T”型人才——在设计领域是专家，而对于技术领域也有一定程度的涉猎。所以，学习编程对我们来说就是为了增加自己的附加值。靠兴趣驱动学习明确了学习目的，那我们的学习方式也应该是有别于工程师的学习方式的。我认为设计师学习编程最快也是最有效的方式就是通过兴趣驱动学习——没有什么比看见自己用代码写出一个小demo更让设计师开心了。当然，除了满足感我们还能得到一些切实的好处。我从四点分别讲述，同时推荐一些编程语言或软件。1、了解一定的开发原理，和工程师沟通更顺畅推荐使用交互原型工具Framer进行一些动效设计，它将视觉设计和编程相结合，虽然代码不能直接拿去用，但能够让你和开发工程师沟通起来更加顺畅。2、自己能够编写Ps和Sketch插件，通过代码减少重复性工作Ps和Sketch都支持插件扩展，同时支持多种语言风格书写插件，所以你可以选择自己熟悉的语言编写。当遇到重复性的操作时，你就可以自己写个插件提高工作效率了。3、代码也是一种艺术，编程就是换一个角度进行艺术创作Processing是一款可视化编程软件，很多设计师通过Processing创作出一些很棒的作品。在Processing里，代码就是一支画笔可以让你画出一些意想不到的作品，设计师玩了这个绝对会爱不释手。4、可以按自己的想法做出个人网站能自己独立完成个人网站需要很多知识积累。到这一步的设计师应该已经在代码里摸爬滚打很长时间了，各种需要使用的技术都能懂一些。需要注意的细节最后，说一些细节问题，希望能给你在学习编程的路上一些指引。1、永远不要畏惧代码很多设计师会对代码有一种潜意识的排斥，但其实是被自己的眼睛欺骗了。如果静下心来，“摒弃前嫌”地看一段代码，你会发现好像也可以看懂，它好像也没那么难。2、思维的转变编程的思维和设计的思维肯定是不同的，编程会更加注重抽象能力，很多具象的东西在代码里就抽象成了数据。所以，最好的方式就是在写代码时把自己想象成一台计算机。计算机的特点就是能快速计算，所以代码里所表现的一些过程其实就是很原始的方法，比如计算1到100的平均值，在代码里就是把它们一个个加起来除以100。但是，最后肯定需要人为的地进行一些算法优化。3、注意格式正如在设计中将文字、图案对齐一样，将代码对齐、按规范书写将会是一个好习惯。诚然，一团乱麻的代码没有报错也能正确执行，但是考虑到以后你可能会再次阅读自己的代码，还是把它对齐并按照规范写吧，不然下次读自己的代码时你可能会想杀掉之前的自己。更何况，简洁优雅的代码看起来简直是一件艺术品。4、数据类型及代码结构。编程语言有很多种，但是它们的数据类型和代码结构却大同小异。比如数据类型无非就是数字（number）、字符串（string）、布尔值（boolean）、对象（object）等，而代码结构无非就是条件、循环等。所以，在准备编程之前能够了解一下这些基础知识，将会在以后写代码时减少很多不必要的时间。在Framer官网有一个章节就大概讲了这些内容，推荐你去看一看。地址是：https://framerjs.com/getstarted/programming。以上所述，都来自于个人经验，未免有些错误或疏漏，仅供各位参考，但不可尽信。希望我的这些经验能开启你的编程之路或在你编程时给你一些切实的帮助，如果有任何问题也可以留言探讨。

但是，当图片很多时，这种方式不仅会伤害设计师的双手，也会因为大量的资源请求导致网页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。

我有一个做产品经理的朋友叫大东，大东自己有一个公众号叫“不想当设计的产品不是好前端”。我一直没关注大东的公众号，因为他也没关注我的。有一天大东问我：你有没有发现一个痛点？公众号后台编辑器太窄了，干扰信息太多，完全没有沉浸式体验的愉悦感。大东说话总是这样，喜欢拽一些专业词汇，生怕别人不知道他是一个产品经理。我说大东啊，你把网页全屏，每天深夜在南四环租的八平米小房里关着门带着耳机，还不够沉浸么？大东立马发了个截图给我，说：你没有理解我的需求点啊。你看这里左边有个封面图，右边有多媒体内容，下面还有个操作bar，我的Mac

现在我们会进入到这个页面，里面会有你选中的图标。网页底部右侧有一个Download按钮，本来直接点击就可以生成一套字体了，但是我们还要多做一步：点击Download按钮右边的齿轮图标，进行一些设置。

但是点开他的头像，我被他的迷之微笑吸引了。豁出去了，“爱真的需要勇气......”，我不由自主地哼了起来。边唱歌边写，不知不觉竟写了一大段。为了表现出我的诚意，我还特意先夸了他great

李晋老师是民谣歌手中IT技术最好的之前推送过一些Framer教程，但总觉得缺了点什么。今天想想，直接教大家上手做是不对的。对于很多设计师来说编程还是很神秘的东西，我必须要揭下它神秘的面纱。要学习Framer，我们先要消除“编程很难高智商才能玩得溜”的心理障碍。其实，就像写文章一样，编程也是通过一种语言去描述一些东西，你大可以把一段代码看成一篇文章。以中文写作类比，我们使用的语言是中文，那么使用Framer编程我们使用的是CoffeeScript（这些技术宅取名时不是吃的就是喝的），它是前端脚本语言javascript的一种变形。最开始写作文，老师会告诉我们要遵循一些规则，像首行缩进、陈述句以句号结尾、问句以问号结尾等等。在使用Framer编程时我们也要遵循一些规则，比如使用空白缩进来表示代码块、以“#”开头的语句是注释等。这些规则，你在使用的过程中会逐渐了解。现在有这么一段文字“在屏幕上画一个蓝色的圆形，当点击它时，它会逐渐变成绿色，同时会变成一个正方形”，我们要把它翻译成Framer能读懂的语言，要实现的效果如下：在开始之前，我们先了解一些概念和基本语法。Framer和Sketch一样，都是以图层的形式来展现设计。与Sketch不同的是，每个图层除了拥有尺寸、位置、背景色等样式属性以外，还有状态等属性。每个图层可以是其他图层的父图层，也可以是其他图层的子图层，可以看成Sketch的分组。而动效的表现，则是通过不同状态之间的过渡来实现，不同状态间发生变化的属性就会形成一个补间动画。在Framer的代码里面，有这么一些特殊的符号或词语需要注意，我们拿下面这段代码来举例：#

无意中研究了一下别人的代码，发现了一种比较偏的办法——动画。大致原理就是：将所有帧的图像拼合在一起，作为背景图像，通过控制background-position轮流显示每一帧。看图：