For a long time, the design industry has shared many hot takes on whether designers should
长期以来，设计行业已经就设计师是否应该分享许多热门话题。
learn to code or not. To me, this is a pretty silly debate. Should a contractor do electrical and plumbing? Should an athlete play more than one sport? Should musicians play and sing? Should singers sing and dance? Yes? No? Maybe? It depends! 是否学习编码 。 对我来说，这是一个非常愚蠢的辩论。 承包商应该做电气和管道工程吗？ 运动员应该参加多种运动吗？ 音乐家应该演奏和唱歌吗？ 歌手应该唱歌跳舞吗？ 是？ 没有？ 也许？ 这取决于！Okay, those might not have been the best analogies, but here is one: should designers write? Perhaps — if it helps them get a point across.
好的，这些可能不是最好的类比，但是这里有一个：设计师应该写吗？ 也许-如果它可以帮助他们阐明观点。
But I get it. There are a lot of designers out there who have never written any code and wonder if they should learn how. And these articles aim to help them make an educated decision.
但是我明白了。 有很多设计师从未编写过任何代码，不知道他们是否应该学习如何。 这些文章旨在帮助他们做出明智的决定。
Rather than pontificating on whether designers should learn to code or not, I believe a more interesting question is: should our design tools learn to code?
我相信不是更着迷于设计师是否应该学习编码，我认为一个更有趣的问题是：我们的设计工具应该学习编码吗？
As I finish up writing this article I just realized Fabricio Teixeira wrote about this very question back in 2019.
当我写完这篇文章时，我才意识到 Fabricio Teixeira 在2019年就 写过 这个问题 。
代码混合设计是什么意思？ (What do I mean by Code-blended Design?)
I’m still trying to work out exactly what this means, but generally I’m talking about designing with both a GUI and a text or code editor. Further, being able to interact with a file in a design application with all the traditional tools (artboards, frames, shapes, text boxes, pen tool, etc.) and also, optionally interact with the same live file with a code editor. Additionally, adding a layer of logic or scripting would be extremely valuable. But I will touch on that a bit later on.
我仍在努力弄清楚这到底意味着什么，但通常我是在谈论同时使用GUI和文本或代码编辑器进行设计。 此外，能够使用所有传统工具(画板，框架，形状，文本框，钢笔工具等)与设计应用程序中的文件进行交互，并且还可以选择使用代码编辑器与同一实时文件进行交互。 此外，添加逻辑或脚本层将非常有价值。 但是我稍后会谈到。
This idea is far from new. Dreamweaver and GoLive were early WYSIWYG editors released in the mid-nineties. Today, we have applications like Framer X, Origami (not code per say, but has an interesting level of abstraction) and Webflow that, while all very different from each other, successfully blend “code” with traditional design editor interfaces.
这个想法不是什么新鲜事。 Dreamweaver和GoLive是90年代中期发布的所见即所得的早期编辑器。 今天，我们拥有诸如Framer X ， Origami (虽然不是说代码，但是具有有趣的抽象级别)和Webflow之类的应用程序，尽管它们彼此之间非常不同，但它们成功地将“代码”与传统的设计编辑器界面融合在一起。
I’m referring to “code” in the broad sense of articulating design elements and structure through words and syntax.
我指的是广义上的“代码”，它通过单词和语法来表达设计元素和结构。
But these code-blending design applications are not the most popular. According to UXtools.co, the design applications being used by the most designers (UX, UI, product, etc.) are Sketch, Figma and Adobe XD. While these tools offer “developer handoff” features (Sketch’s version is currently in Beta), they are pretty far from blending code and design like the others mentioned.
但是这些代码混合设计应用程序并不是最流行的。 根据UXtools.co ，大多数设计人员(UX，UI，产品等)使用的设计应用程序是Sketch，Figma和Adobe XD。 尽管这些工具提供了“开发人员移交”功能(Sketch的版本目前处于Beta版)，但它们与将代码和设计像其他提到的那样融合在一起还相距甚远。
Now might be a good time to make the distinction between designing with code versus obtaining code output. This article discusses the former and does not attempt to argue for or against design applications that generate production-like code for an end product.
现在可能是区分代码设计与获得代码输出的好时机。 本文讨论了前者，而不是试图支持或反对为最终产品生成类似于生产的代码的设计应用程序。
Also, the ideas in this article are primarily aimed at the big three design tools (Sketch, Figma, and Adobe XD). While these ideas can go beyond the big three, these apps are the most popular and are targeting similar users and use cases. So that’s where my mind is as I write this article.
此外，本文中的想法主要针对三大设计工具(Sketch，Figma和Adobe XD)。 尽管这些想法可以超越三大想法，但这些应用程序是最受欢迎的，并且针对相似的用户和用例。 这就是我撰写本文时的主意。
It’s also worth noting that Apple is tackling this idea but starting from the developer side. Using their new SwiftUI framework inside of Xcode, you can craft a UI by declaring elements in the code editor or by dragging and dropping elements into the live preview. You can even modify attributes with some clever dropdowns and pickers. See: What’s new in Xcode 11?
值得注意的是，苹果公司正在解决这个想法，但从开发人员方面开始。 使用Xcode中新的SwiftUI框架，您可以通过在代码编辑器中声明元素或将元素拖放到实时预览中来制作UI。 您甚至可以使用一些巧妙的下拉菜单和选择器来修改属性。 请参阅： Xcode 11的新增功能 ？
See also:
也可以看看：
Introduction · react-sketchapp
简介·react-sketchapp
Figma — Scripter | Speed up your workflow or experiment with the Figma API through scripts
Figma —脚本撰写者| 通过脚本加快工作流程或尝试使用Figma API
Building a Design Systems Library with Figma & Scripter
使用Figma＆Scripter构建设计系统库
Bret Victor — Inventing on Principle on Vimeo
Bret Victor-Vimeo原理发明
This one is from 2012, but Bret demos some amazing ideas — way ahead of the curve.
这是2012年的作品，但Bret演示了一些惊人的想法-领先一步。
By Zeh Fernandes
泽·费尔南德斯(Zeh Fernandes)
为什么要进行代码混合设计？ (Why Code-blended Design?)
Imagine you are creating a new project in Figma (Sketch or XD — it doesn’t really matter). You decide to spin up a quick design system (it’s often easier to start off using styles than trying to add them later). You start off by defining 11 or so named text styles and 20 named color styles. Oh, and also, you want to duplicate some of these styles for a dark-mode theme.
想象一下，您正在Figma中创建一个新项目(Sketch或XD –并不重要)。 您决定启动一个快速的设计系统(开始使用样式通常比以后添加样式更容易)。 首先定义11种命名的文本样式和20种命名的颜色样式。 哦，而且，您想复制这些样式中的某些样式作为暗模式主题。
Doing all this would require a fair number of mouse clicks, double clicks, typing on the keyboard, back to the mouse, over to the layers panel, back over to the art board, and on and on and on. There are plugins that can help speed up this process, but these design applications are not really optimized to mass produce all of these styles for a design system. And maybe they shouldn’t be.
要执行所有这些操作，将需要相当多的鼠标单击，双击，在键盘上键入，返回到鼠标，移至“图层”面板，移回至美工板，以及不断地进行。 有一些插件可以帮助加快此过程 ，但是并没有真正优化这些设计应用程序，无法为设计系统批量生产所有这些样式。 也许他们不应该这样。
Text and code editors are fast, powerful and extensible (if you haven’t used a code editor much, check out things like Emmet and multi-cursor features). And for certain design-related tasks, like mentioned above, code editors may be a more appropriate tool. Doing a task like this with a powerful code editor could be accomplished very quickly.
文本和代码编辑器是快速，强大和可扩展的(如果您不太使用代码编辑器，请查看 Emmet 和 多光标 功能之类的东西) 。 对于某些与设计有关的任务，如上所述，代码编辑器可能是更合适的工具。 使用功能强大的代码编辑器完成这样的任务可以很快完成。
Well, except that text editors are not really optimized for picking colors or fonts. That’s where the blending of a code editor and a traditional design application really starts to make sense.
好吧，除了文本编辑器并未真正针对选择颜色或字体进行优化。 这就是将代码编辑器和传统设计应用程序融合在一起的真正意义所在。
“Ok, I know I’ll need 6 heading styles. I’ll name them h1 through h6. For now, I’ll just make them all 18 points and change them as I start designing”
“好吧，我知道我需要6种标题样式。 我将它们命名为h1到h6。 现在，我将使它们全部获得18分，并在我开始设计时对其进行更改”
You could quickly create the scaffolding of your design system in code — perhaps using placeholder attributes — and then, use the design application to modify and tweak those attributes in a WYSIWYG or GUI experience.
您可以使用代码快速创建设计系统的脚手架(也许使用占位符属性)，然后使用设计应用程序在所见即所得或GUI体验中修改和调整这些属性。
Sidebar: I just heard on a recent Design Details episode that the iOS app, Play (Beta) starts you off with a default set of these styles that you can then go in and modify. That’s pretty smart. Looking forward to getting beta access!
补充工具栏：我刚刚在最近的“设计详细信息” 集中 听说 ，iOS应用 Play (测试版)以默认的这些样式集开始，您可以随后进行修改。 那很聪明。 期待获得Beta版访问权限！
设计令牌 (Design Tokens)
Now, you may be thinking “if designers take the time to create all this “code” to describe these design attributes, can developers have access and use them in their projects, too?”
现在，您可能会想“如果设计人员花时间创建所有这些“代码”来描述这些设计属性，开发人员也可以在他们的项目中使用它们吗？”
Yes. Enter, design tokens.
是。 输入，设计令牌。
Design tokens are becoming pretty popular in the design systems community so you may have heard of them. Back in 2016 Jina Anne and Jon Levine talked about how they use them at SalesForce.
设计令牌在设计系统社区中变得非常流行，因此您可能听说过它们。 早在2016年， Jina Anne和Jon Levine就在SalesForce 谈论了如何使用它们。
Inside a design system, design tokens are the smallest parts — the sub-atomic particles. Included are things like colors, font size, font weight, border radius, shadows, sizing and so on. (I don’t think it’s just visual values. I can see having design tokens for things like notes, decibels and BPMs in sound design, bevel and emboss sizes in industrial design, etc.)
在设计系统内部，设计令牌是最小的部分— 亚原子粒子 。 其中包括颜色，字体大小，字体粗细，边框半径，阴影，大小等。 (我认为这不仅仅是视觉上的价值。我可以看到在声音设计中为音符，分贝和BPM，工业设计中的斜角和浮雕尺寸等具有设计标记)
Design tokens are designed to be platform agnostic (usually stored in JSON or YAML files) so they can be shared across platforms like the web, iOS and Android. But what about Sketch, Figma and XD?
设计令牌被设计为与平台无关的(通常存储在JSON或YAML文件中)，因此它们可以在Web，iOS和Android等平台之间共享。 但是Sketch，Figma和XD呢？
These modern design applications have their own internal design styles which are sort of like design tokens. But they are trapped inside — often difficult to import, export and maintain. For awhile now, Adobe has had CC Libraries but those only play nice across Adobe apps. They are also not very “sub-atomic”.
这些现代设计应用程序具有自己的内部设计风格，类似于设计标记。 但是它们被困在里面，通常很难进口，出口和维护。 一段时间以来，Adobe拥有CC库，但这些库只能在Adobe应用程序之间很好地运行。 它们也不是很“亚原子”。
For design tokens, I would like to see a universal standard emerge and our modern design applications natively embrace them by reading and, perhaps, even writing to them.
对于设计令牌，我希望看到通用标准的出现，而我们的现代设计应用程序通过阅读甚至可能通过写信来原生地拥抱它们。
And this looks promising. There is a community group on GitHub working on a design token specification. Among others, Sketch, Figma and Adobe are all listed as represented.
这看起来很有希望。 GitHub上有一个社区小组致力于设计令牌规范。 其中，素描，FIGMA和Adobe都被列为代表 。
If this is a likely future, this could also reduce some friction in switching or toggling between design applications. Let’s say another design app offers better prototyping or animation for the type of feature you’d like to test. You could spin up everything you need a lot faster if that app can work with an existing set of design tokens.
如果这是可能的未来，那么这也可以减少设计应用程序之间切换或切换时的一些摩擦。 假设另一个设计应用针对您要测试的功能类型提供了更好的原型设计或动画效果。 如果该应用程序可以使用现有的一组设计令牌，则可以更快地整理所需的一切。
But I digress …
但是我离题了……
See Also:
也可以看看：
Tokens in Design Systems — EightShapes — Medium
设计系统中的代币— ThreeShapes —中
Figgo | Keep your design tokens stay up to date in Figma
菲戈 让您的设计令牌在Figma中保持最新状态
Design tokens with Figma — Prototypr
Figma设计代币— Prototypr
Style Dictionary Demo — YouTube
样式字典演示-YouTube
Open Color Tools · Home Open Color Tools seemed very promising and on this path — but the project seems to have stalled as of late.
Open Color Tools·Home Open Color Tools似乎非常有前途，并且正在走这条路-但该项目似乎已停滞不前。
代码混合设计还有哪些其他用例？ (What are some other use-cases for code-blended design?)
Design tokens are not perfect on their own. Assigning static values for colors and font sizes makes sense at this level. But how do designers arrive at these specific values? How do designers craft thoughtful color palettes and typographic styles?
设计令牌本身并不是完美的。 在此级别上，为颜色和字体大小分配静态值很有意义。 但是设计师如何得出这些特定的价值？ 设计师如何制作周到的调色板和印刷风格？
Well, they can poke around color pickers and dropdowns for fonts, weights and sizes. But is there another way?
好吧，他们可以在颜色选择器和字体，粗细和大小的下拉列表中四处寻找。 但是还有另一种方法吗？
One of the things I love about Sass is its built in color functions. For example, you can very easily take a color and make it 10% lighter or 5% darker. You can also saturate it, desaturate it or shift the hue by 60º. These functions make it possible to generate color systems procedurally. Sass also has math functions. This can be helpful in creating typographic styles based on a modular scale.
我喜欢Sass的一件事是其内置的色彩功能 。 例如，您可以很容易地将一种颜色设为浅10％或深5％。 您也可以对其进行饱和，去饱和或将色相偏移60º。 这些功能使得可以按程序生成颜色系统。 Sass还具有数学功能。 这有助于基于模块化比例尺创建印刷样式。
Powerful functions like this give designers different ways to think about and make decisions regarding styles and design tokens. They can improve the way we calculate appropriate contrast and for legibility and accessibility. They can increase our efficiency and productivity.
如此强大的功能为设计人员提供了不同的方式来思考和做出有关样式和设计标记的决策。 它们可以改善我们计算适当对比度以及可读性和可访问性的方式 。 它们可以提高我们的效率和生产力。
I believe these types of code-blended-design features deserve to be brought into our modern design applications.
我相信这些类型的代码混合设计功能应该被引入我们的现代设计应用程序中。
See also:
也可以看看：
Using Sass to Build Color Palettes — SitePoint
使用Sass构建调色板— SitePoint
Modular Scale Typography with CSS Variables and Sass
具有CSS变量和Sass的模块化比例字体
还要别的吗？ (Anything else?)
There are so many ways to push further on this idea of code-blended design in our design applications. Like adding layers of routing, scripting, and templating to make prototypes more dynamic and more choose-your-own-adventure-y. And taking that further by pulling in microcopy and data in more dynamic ways so we don’t have to just keep duplicating screens to give the appearance of interactivity. And what about prototyping live map experiences, or real video and music players? The list goes on and on.
在我们的设计应用程序中，有很多方法可以进一步推动这种代码混合设计的思想。 就像添加路由，脚本和模板层一样，使原型更具动态性，并且可以自己选择冒险方式。 并通过以更动态的方式获取显微镜和数据来进一步实现这一点，因此我们不必仅重复复制屏幕即可呈现出交互性。 以及如何制作现场地图体验或真实的视频和音乐播放器原型？ 清单不胜枚举。
Again, there are a lot of plugins that aim to solve some of these shortcomings. And maybe plugins are better at addressing some. But I believe native, first-party support can provide a much better experience.
同样，有很多旨在解决这些缺点的插件。 也许插件可以更好地解决一些问题。 但是我相信，第一方的本地支持可以提供更好的体验。
See also
也可以看看
Craft | InVision
Craft.io| 视觉
Figma — Frontitude • Next Gen Text Management
Figma —前沿•下一代文本管理
Figma — Google Sheets Sync | Sync content from Google Sheets directly into your Figma file.
Figma-Google表格同步| 将Google表格中的内容直接同步到您的Figma文件中。
5 Popular Interactive Map Components | Framer
5种流行的交互式地图组件| 成帧器
It’s also really important that these types of code-blending improvements do not sacrifice any of the main reasons these tools are so popular — approachability, ease of use, speed, etc. Similar to other power-user features, like components, states, and smart layout, interacting with these types of code-blended features should be completely optional.
同样重要的是，这些类型的代码混合改进不应该牺牲这些工具如此受欢迎的任何主要原因-可访问性，易用性，速度等。类似于其他高级用户功能，例如组件 ， 状态和与这些类型的代码混合功能进行交互的智能布局应该是完全可选的 。
So that’s all I got for now. Let me know what you think. Do you currently use any code-blending design tools or applications? What are some other ways code-blended design can work for you and your tools?
所以这就是我现在所拥有的。 让我知道你的想法。 您当前是否使用任何代码混合设计工具或应用程序？ 代码混合设计可以为您和您的工具提供哪些其他方式？
Signed,A designer who codes
签名，编码设计师
翻译自: https://uxdesign.cc/code-blended-design-cdfbca54ccc5