Let’s imagine for a moment you have a new project, an exciting challenge from an industry you enjoy with all the right tools at your hand and great teammates by your side, but it requires you to continue working on a design that someone else already established long ago, which is not a bad thing since the design is amazing, so it’ll be a blast.
L等我们想象一下你有一个新的项目，从你在你的手都合适的工具，并在你身边伟大的队友享受一个行业一个令人兴奋的挑战的时刻，但它需要你继续，别人已经建立了设计工作很久以前，这并不是一件坏事，因为设计令人惊叹，因此将是一个爆炸。
The first few days are all about learning how things are going to work, a quick onboarding from the previous designer because he’s already working on another project and getting inspired to create new features.
前几天都是关于学习如何工作的信息，这是前一位设计师的快速入门，因为他已经在从事另一个项目，并受到启发去创建新功能。
So what do you do right after the onboarding?
那么，入职后您立即做什么？
Of course, open up the design file.
当然，打开设计文件。
But you’re not prepared for this.
但是您对此并不准备。
The screens are all over the place, dozens of them, with multiple pages of the different stages of approval, using a screen resolution that doesn’t seem familiar, all the colors are different and the style guide you were hoping for, is nowhere to be seen.
屏幕无处不在，数十个屏幕上有多个页面处于不同的审批阶段，使用的屏幕分辨率似乎并不熟悉，所有的颜色都不相同，您想要的样式指南也无处不在可见。
You’re just one week away from the first presentation with the stakeholders, so there’s a limited amount of time to learn how to use the file, gather assets for any new screen and start putting your ideas in place, but deep down you feel filthy just by looking at it.
您与利益相关者的第一次演讲距离您只有一个星期的时间，因此只有有限的时间来学习如何使用文件，为任何新屏幕收集资产并开始采用您的想法，但是从深处您会觉得自己很肮脏只是看着它。
The design file is a mess, but could that have been prevented? If so, how? You’ve come to the right place! Today we’ll learn five key components that will prevent your file from becoming the mayhem no one wants to use.
设计文件是一团糟，但是可以避免吗？ 如果是这样，怎么办？ 您来对地方了！ 今天，我们将学习五个关键组件，这些组件将防止您的文件成为没人想使用的混乱局面。
1.整体风格 (1. Global styles)
What’s the very first thing I do on a design file? It is not a wireframe, nor the grid or even choosing a frame resolution. I set up global color and text styles. Why? because those are the elements less likely to change as the project moves forward.
我在设计文件上要做的第一件事是什么？ 它不是线框，也不是网格，甚至不是帧分辨率。 我设置了全局颜色和文本样式。 为什么？ 因为这些是随着项目的进展而不太可能更改的元素。
Establishing styles as soon as possible will allow you to use them whenever is needed, and make any adjustment in the future an easy task, rather than going over every screen and component using them and manually change it.
尽快建立样式将使您可以在需要时使用它们，并且将来进行任何调整都是一项轻松的任务，而不是遍历使用它们的每个屏幕和组件并手动进行更改。
专家提示： (Pro tip:)
Create a type scale with only the styles you’ll truly need, and try not to turn your color palette into Fifty Shades of Grey. Take the pros as an example: Airbnb has just seven text styles, and Slack went from having 136 colors to only sixteen. Less is more.
创建仅具有您真正需要的样式的字体比例，并尽量不要将调色板变成“灰色五十度”。 以专业人士为例：Airbnb只有7种文字样式，而Slack从136种颜色变成了16种。 少即是多。
2.内容结构 (2. Content structure)
Think of it as a map. If you can find your way around, how will you have a pleasant trip? The same logic applies here.
将其视为地图。 如果您能找到自己的出路，您将如何度过一个愉快的旅程？ 同样的逻辑在这里适用。
Set up your pages and content in a way that makes it easy for any guest user to find exactly the screen or component they’re looking for, just like designing navigation for the users to reach their desired content, even if it’s their first time in there.
设置页面和内容的方式使任何来宾用户都可以轻松地准确找到他们想要的屏幕或组件，就像为用户设计导航以达到他们想要的内容一样，即使这是他们第一次来那里。
专家提示： (Pro tip:)
Define your file pages depending on the content each type of user will require: Do you have stakeholders that only look for designs pending to be approved? Use a “Work in progress” page. Does the QA look for component states that are not visible on the final mockups? Add a style guide only page.
根据每种用户类型所需的内容来定义文件页面：您是否拥有仅寻找待批准设计的涉众？ 使用“进行中”页面。 质量检查是否会寻找最终模型中不可见的组件状态？ 添加仅样式指南页面。
If they can find everything they need on a single page then go for it, there’s no need for them to hunt information when they can easily find it all in one place. Just be careful about turning your file into a whole book with the number of pages it can contain.
如果他们可以在单个页面上找到所需的所有内容，然后继续进行下去，那么当他们可以在一个地方轻松找到所有信息时，他们就无需搜寻信息。 只需小心地将您的文件转换成一整本书，其中可以包含页数。
3.层次结构 (3. Layer hierarchy)
Ever since the age of Photoshop, there’s a stereotype about design layers being poorly organized. I mean, as long as the content is inside the frame or artboard it should be enough, right? Sorry to break it to you, but no.
自Photoshop时代以来，就一直存在关于设计层组织不良的刻板印象。 我的意思是，只要内容在框架或画板内就足够了，对吗？ 很抱歉把它给你，但没有。
First of all, arrange the frames on the layer panel in the same order you expect the user to read the screen frames on the canvas: From top to bottom and left to right, just like a book and its index. As you dive deeper into the design file you’ll discover that it is useful to find the layers grouped and nested consistently, depending on the hierarchy of the content visible on the screen, with the foreground components at the top of the list and the background content groups at the very bottom.
首先，按照您希望用户阅读画布上的屏幕框架的顺序排列图层面板上的框架：从上到下，从左到右，就像一本书及其索引一样。 当您深入设计文件时，您会发现查找一致分组和嵌套的图层很有用，这取决于屏幕上可见内容的层次结构，其中前景组件位于列表的顶部，而背景则位于背景内容组位于最底部。
专家提示： (Pro tip:)
Add a prefix to each screen frame depending on the module or section it belongs to, and match this with a text label on the canvas. It won’t matter if the user is more visual-oriented or prefers an index, they’ll find their way to the screens very easily.
根据其所属的模块或部分，在每个屏幕框架上添加一个前缀，并将其与画布上的文本标签匹配。 用户是更注重视觉还是喜欢索引并不重要，他们会很容易地找到进入屏幕的方式。
4.可重复使用的组件/符号 (4. Reusable components/symbols)
Let’s go back to the horror story for a minute. The stakeholder asks for an icon change on the bottom navigation bar, which is used in fifty or so screens. But upon close inspection, you realize those components are not linked in any way, they were just copy+pasted from the original screen where it was created, so you’ll have to change the icon one by one.
让我们回顾一下恐怖故事。 涉众要求在底部导航栏上更改图标，该图标用于五十个左右的屏幕。 但是，仔细检查后，您会发现这些组件没有以任何方式链接，它们只是从创建它的原始屏幕复制并粘贴的，因此您必须一个一个地更改图标。
Yes, you heard me right: One. By. ONE.
是的，你没听错我的话：一个。 通过。 之一。
That doesn’t spark joy, does it?
那不会激发喜悦，对吗？
Having reusable components allows you to create things only once and next time you need a change it’ll automagically update the rest of your file, without having to painstakingly change things manually and therefore save you a lot of time, just like global styles.
拥有可重复使用的组件后，您只能创建一次内容，而下次需要进行更改时，它将自动更新文件的其余部分，而不必费心手动更改内容，从而像全局样式一样节省了很多时间。
专家提示： (Pro tip:)
Figma allows you to create nested components, placing one or more instances of other components to create a new one, like building with legos, and then update them individually to affect only the components using those instances.
Figma允许您创建嵌套的组件，放置其他组件的一个或多个实例以创建新组件，例如使用legos进行构建，然后分别进行更新以仅使用这些实例影响组件。
You can read more about nested components with this nifty Figma guide:https://www.figma.com/best-practices/component-architecture/
您可以通过此漂亮的Figma指南了解有关嵌套组件的更多信息： https : //www.figma.com/best-practices/component-architecture/
5.命名约定 (5. Naming conventions)
And last, but surely not least: Name your layers and components properly. Without this, developers and designers will have to click several times until they find that “Rectangle 1” is the background of the card, “Rectangle 10” is the header image and “Rectangle 24” is an unused shape that got hidden at some point.
最后，但同样重要的是：正确命名您的图层和组件。 否则，开发人员和设计人员将不得不单击几次，直到他们发现“矩形1”是卡的背景，“矩形10”是标头图像，“矩形24”是未使用的形状在某个点被隐藏了。 。
A naming convention is essentially a naming pattern that describes the content of a certain object, in a general-to-specific order. A standard sequence would be something like this:
命名约定本质上是一种以通用到特定顺序描述某个对象的内容的命名模式。 标准顺序如下所示：
Why is it useful? Because not only it gives you a context of the content, it also serves as a template for development variables, and in turn, create a shared language.
为什么有用？ 因为它不仅为您提供了内容的上下文，而且还用作开发变量的模板，并进而创建了共享语言。
专家提示： (Pro tip:)
Use nested frames to keep your instances named in the same way their master component does and enable an easy instance switching, while also giving your developers the right naming convention for their variables: button/primary/hover instance inside the btn_primary_hover frame.
使用嵌套框架以与您的主组件相同的方式来命名您的实例，并实现轻松的实例切换，同时还为开发人员为其变量提供正确的命名约定： btn_primary_hover框架内的button / primary / hover实例。
Next time you’re building a new file think about your future users: fellow designers, developers, solution architects, QAs, PMs, and stakeholders. The easier they understand how to read your file, the faster your designs will get approved and developed, so remember to be empathetic and look for improvements whenever possible.
下次您要构建新文件时，请考虑一下您的未来用户：设计师，开发人员，解决方案架构师，质量保证，项目经理和利益相关者。 他们越容易理解如何读取文件，设计就会越快被批准和开发，因此请记住要富有同情心，并在可能的情况下寻求改进。
In a collaborative environment, you’re not creating a design file for yourself, it is for everyone else on your team.
在协作环境中，您不是为自己创建设计文件，而是为团队中的其他每个人创建设计文件。
You’ll thank me later, because your teammates will thank you first.
稍后您会感谢我，因为您的队友会首先感谢您。
翻译自: https://uxdesign.cc/houston-we-have-a-problem-my-design-file-is-a-mess-76348911cfb5
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
