设计の诗

依据本人岩鸣杨子在气象行业中多年的设计经验，在此和大家浅聊一下作为UI设计师，需要如何在TOB/TOG行业中如何做好UI设计。

用2023年6月22日更新的Figma最新功能，实现按钮控制图层显隐的交互

根据JSON文件，在Figma中生成色标图例

官方文档创建新仓库时，使用create-plasmic-app，将会自动设置所有内容。要创建项目，在命令行工具中运行如下代码：npx create-plasmic-app大约一分半钟，提示安装成功。接着可以根据提示设置项目名称、代码语言、react 框架、集成方案、项目链接。

不少人都遇到过Figma嵌套组件样式不能继承的问题，我自己在设计过程中也经常会遇到，所以写了一个在做嵌套组件过程中需要注意的问题，提醒自己，也希望对有过同样问题的小伙伴有帮助。

本文内容来源于 Plasmic 官网教程文件，结合个人理解整理，不完全按照原文翻译。如有表述不当，敬请指正。加粗文字为个人注解，或与 Figma 操作不同之处。黄底背景色文字为官方说明，主要指在前端开发中的注意事项。阅读本文时，请搭配官方教程文件一边学习一边上手实践。官方教程文件在登录后的项目列表页面上方即可获取。欢迎按PageUp/PageDown或Fn+↑/Fn+↓可快速切换页面Cmd+Z 撤销登录状态下，文件会自动保存+ / - 可以缩放画板基础1 编辑文字样式

Palettte Generator，可以任意增减色条数目，并通过调整HSV曲线来调整颜色。当选中一个色条时，右侧会自动分析出此颜色在深浅两种模式下的可访问性。

在GIS中，除了底图配色外，往往还要考虑不同要素在底图上的显示效果。一些要素有公认的配色规范，如降水量、雷达等。上图来自国家气象信息中心而大多数要素都没有标准，各家气象平台的配色也各不相同。配色原则色斑图的配色原则是根据各类天气要素（如降水量、气温等）按照一定的量级通过不同的颜色来划分，方便对整体区域天气变化情况的掌握。在实际应用中应注意色标所代表的意义。上图来自杭州气象网配色方式分段配色在一个节点到另一个节点之间这一段区域上只有一种颜色，我们需要设定的是各段区域的颜色。这种配色方式一般

色斑图GIS中可以使用色斑图来展示的数据，通常有格点数据（如降水、气温等），雷达数据（如反射率、回波顶高、液态水含量等），还有卫星云图、数值预报等。使用色斑图进行展示时，通常会在某个角落显示色标图例。​​​以上图片来自中央气象台等值线在气象图中，常见的用等值线的方式来表示的要素有：等高面上的气压、等压面上的位势高度、温度等。​​​以上图片来自Windy填值填值包括站点填值和格点填值。站点填值是基于各固定位置的气象站点，在精确的坐标上显示出某种或多种气象要素的数值。数值可以根据不同的要素

在做一个项目时，要根据气象预警的类型在地图上显示图标。所以需要先收集所有现有的气象预警的图标。在这个过程中，我发现一个重大的问题——全国气象预警信号的凌乱简直不忍直视！！！气象预警信号除了国家制定的基本的14类，还有各个地方自行设置的，加起来总共有48种。下图是我根据中国天气网的预警列表（左），按类型将所有预警列了出来（右）。可以看到，同一大类里面有很多相近的预警，比如寒潮预警、严寒预警、寒冷预警、低温预警、降温预警……或许是因为各地省市由于地理位置和气候条件的不同，国家的标准不适用于某些地方

一些工作中收集的优秀的气象产品配色案例，供参考。

Hal Lee：从开发的角度说两句，绝大部分设计师自己的工作都做不到位，然后怪开发还原不行。不要上来就有敌意，多问多了解开发实现方式，把自己的工作做到极致再说。要知道，你输出的设计也是你做的产品的一部分，而它们的用户是开发，如果你都抛弃了这部分用户体验，可想而知你的设计对外部用户体验更糟糕。Shunz：同感，由于大部分设计师不了解开发实现界面的原理，不知道自己的设计作品是如何被开发同学还原实现成最终 App/Web 界面的。只有真正尝试用 code 方式实现过任何一个 Web 界面，才能明白原来这个过

来看看lemonoO大佬的解决方法lemonoO：……不过话说回来，这么小的区域不适合放图例。看区域比例，这个图表也没那么重要。非要集满数据，并没有什么意义。说个不恰当比较极端的例子，非要在iWatch上放一个4个指标的趋势图，还要把图例都放上去，还要让用户一眼就能看清楚，这本身就是一个钻牛角尖的想法。解决问题的思路有很多，最不应该考虑的就是头痛医头脚痛医脚，在现有条件下挤破脑袋抠那几像素的问题。尝试疏导，正常人都是讲道理的。这是前几天产品给的一个原型页面的部分截图，在一个固定布局的区域内，希

在Scripter插件或浏览器控制台里输入以下代码：let af = figma.currentPage.findAll(n => { return n.type === "FRAME"})af.forEach(n => { let p = figma.createPage() p.appendChild(n)})以上代码来自@Mr. Biscuit

想要实现的效果方法一安装Hero-Patterns插件（安装地址：https://www.figma.com/community/plugin/743134103711120154/Hero-Patterns-for-Figma）缺点：生成的是位图，无法再次修改颜色方法二自己画一条斜线，然后用Pattern Hero这个插件生成斜线阵列，再放到蒙版里面方法三用虚线方式手动制作斜线阴影画一条横线，增加宽度设置虚线和间隔绘制一个封闭区域作为蒙版旋转角度...

Spline是一个新出的轻量级3D软件，可以轻松创建和发布3D Web体验。快速构建和迭代，并可直接导出可开发的文件。1. 新建Spline文件打开spline软件，新建一个文件。这时默认会创建一个320✖️320px的白色背景，为了更好得显示，我们将背景放大至800✖️800，然后点左上角的锁定按钮，将白色背景固定住。2. Figma图标的构成从Figma官网上可以看到，Figma图标包含红、浅红、紫、蓝、绿5种颜色，半圆角矩形、圆形、3个圆角一个直角的图形3种类型。如果转换为3D图形，则应该

1. 在Figma中安装Gitlab插件在Figma Community中搜索Gitlab插件，或直接打开插件地址，然后点击右上角的“Install”即可安装。2. 获取Token在用户设置>访问令牌页面，“名称”随意填写一个，“范围”里勾选“API”（如下图），然后点击“创建个人访问令牌”。在Figma中打开需要上传的Figma文件，在菜单中打开插件：Plugins→GitLab→Upload Designs to GitLab输入之前创建的个人访问令牌。3. 上传文件在Gitl

Figma自2012年创办于美国，2015年逐渐被国内设计行业知晓，虽然不如Adobe产品那样历史悠久，但其后来居上，国外和国内部分先进的设计团队，都已逐步将Figma作为主力设计工具。许多年前，人们对UI设计工具的认识还停留在Ps(Adobe Photoshop)的时代。不可否认，Ps确实是目前最牛逼的设计软件，但“牛逼”不代表“适合”。Ps更倾向于处理位图，而它的同胞兄弟Ai（Adobe Illustrator）虽可做矢量图形，但也仅适合做平面设计。对于UI设计来说，视觉层仅仅是表现形式，核心部分.

我们知道，可以打开Resource use显示资源的使用情况，包括整个项目中的图层数量和内存占用率。那么，有没有方法可以查看画板数量，或者说做了个多少张图？通过和群里大神的讨论，总结了以下几种方法。方法一：全选导出按cmd+A，全选中页面中的画板，然后按右下角的导出，即可显示所有画板数量。方法二：开发者工具在开发者工具的Console里输入以下代码：let i = 0figma.root.children.map(page => page.children.map(node

1. 介绍原作：lijxse 视频地址文字版整理：岩鸣杨子2. 快速拖拽调整数值按住option可在数值上拖拽调整，不按option时只能在X/Y/W/H/旋转/圆角等的图标上拖拽调整，不能调整透明度的数值。3. 属性粘贴复制shift+X：互换填充和描边选中图层的某个属性，然后cmd+C，则可复制这个图层特定的属性。选中图层的某个属性，然后cmd+V，则可粘贴到这个图层特定的属性上。4. 列表切换&快速搜索option+1：切换到Layersoption+2：切换到Asse.

在一些科技感强的页面中，往往含有大量的异形元素，比如在设计这类按钮时，按钮大小完全依赖于文字长度。当按钮中的文字数不固定时，萌新们一般会根据文字长度单独调整每个按钮的长度，这样当然是有效的，但按钮特别多的情况下，手动调整就显得不那么专业了。那么更快捷有效的方法是什么呢？1. 创建控件首先我们要把我们设计好的按钮做成一个控件。选中按钮形状及里面的文字，右键→创建控件。创建好的控件会被放...

你知道吗？原来颜色是种四维产物。色彩体系模型我们知道，在描述一个颜色时，往往需要4个变量，其中三个变量代表颜色，最后一个变量代表透明度。以目前应用最广泛的孟塞尔色体为例，横切面展示了色相的变化。色相是指色彩的相貌， 用于区分不同的颜色 。根据光的不同波长，通过物体表面反射表现出红色、黄色或绿色等，这种特性被称之为色相。孟塞尔色立纵剖面图的纵向代表色彩的明度。物体表面反射光的程度不同，色...

在后台管理系统的设计中，往往会遇到多层级的查询与展示。如何能更直观地展示数据，并且让用户体验更佳，是在设计过程中需要仔细考虑的问题。举个例子现有一个管理系统的原型图如下，共有5个层级，选择数据时，需要一层一层选择。可以看出，原型图中的tab层级虽然清晰，但视觉效果欠佳，尤其是前三层，由于都是横向选择标签，没有辨识度。解决方法经过一番思考和对比，确定了一个比较好的展示方式——横纵交错。如第...

一般方法：剪裁双击圆环，在指定位置添加锚点，选择剪刀工具，剪裁掉一部分，即可得到一个环形的进度条。进阶方法：虚线利用边框的虚线属性，将间隔数值设置为圆的周长，虚线数值设置为进度比例。比如，要设置85%的进度环，可先绘制一个圆，半径为187，然后在间隔里填入“187*3.14”，在虚线中填入“187*3.14*0.85”，数值会自动计算出来。由于这样得到的是环形是从底部锚点开始逆时针旋转...