figma设计
When I joined Potluck as a UX Design intern, we were using Sketch, Craft, and Invision for our design-to-development pipeline. I learned how to use this system to build my prototypes. Unfortunately, I found it challenging to collaborate with non-designers who didn’t have the system already set up. My manager, who was also the engineer and the CEO, all wanted to provide feedback.
当我加入Potluck担任UX Design实习生时，我们将Sketch，Craft和Invision用于设计到开发的流程。 我学习了如何使用该系统构建原型。 不幸的是，我发现与尚未建立该系统的非设计师进行协作具有挑战性。 我的经理，同时还是工程师和首席执行官，都希望提供反馈。
So when I was offered the chance to come back and lead design at Potluck, I decided that Figma was probably the best bet. Having gone through both the design system on Sketch and what was coded on the site, it was clear the design system needed some spring cleaning. There were several components on the site that didn’t reflect the design system, and the engineer mentioned having some difficulty with trying to convert the designs to code. I decided to create a development-friendly design system using Figma. Since I am a UX designer, I wanted this endeavor to result in something useful…and delightful, so I followed the design thinking process as I built it.
因此，当我有机会回到Potluck担任设计总监时，我认为Figma可能是最好的选择。 遍历了Sketch上的设计系统和现场编码后，很明显，设计系统需要进行Spring清洗。 该站点上有几个不能反映设计系统的组件，并且工程师提到在尝试将设计转换为代码时遇到一些困难。 我决定使用Figma创建一个易于开发的设计系统。 因为我是UX设计师，所以我希望这种努力能够产生有用的……令人愉快的东西，因此我在构建它时遵循了设计思维过程。
Here is how I went about creating a Design System in Figma for a product that already exists by using the design thinking process.
这就是我如何使用设计思维过程在Figma中为已经存在的产品创建设计系统的方法。
第一步：评估情况(发现) (Step One: Assess the situation (Discovery))
Any good UX project starts with understanding the problem, and that is what I did. To create a new design system, I had to figure out the state of the current one. Figma allows you to import sketch files (thanks, Figma!), and this allowed me to save hours of work. I went through this file and compared components to what existed in production, in case some of the components could be salvaged. I switched a lot between looking at the current Sketch’s design system manager, production, and what I had in Figma to see the current state of affairs.
任何好的UX项目都应从理解问题开始，那就是我所做的。 要创建一个新的设计系统，我必须弄清楚当前系统的状态。 Figma允许您导入草图文件(感谢Figma！)，这使我节省了工作时间。 我仔细阅读了该文件，并将组件与生产中的组件进行了比较，以防某些组件可能被抢救。 在查看当前Sketch的设计系统经理，生产和在Figma中查看当前状态的工作之间，我进行了很多切换。
Next, I assessed my own experience of coming on board and trying to design a new prototype, and I found it very difficult to find or locate the components I needed. The naming convention was hard to follow, and I didn’t know what components were available to me.
接下来，我评估了自己上船并尝试设计新原型的经验，发现很难找到或定位所需的组件。 命名约定很难遵循，我不知道可以使用哪些组件。
Finally, I assessed the experience the engineer had with developing new components. He mentioned the color system being difficult to follow. He would have to look up the color variables a lot. Lots of new colors existed in the designs that weren’t present in production.
最后，我评估了工程师在开发新组件方面的经验。 他提到色彩系统很难遵循。 他将不得不大量查找颜色变量。 设计中存在许多新的颜色，而这些颜色在生产中是不存在的。
第二步：设定目标(定义) (Step Two: Setting Goals (Define))
Once I had a good understanding of the problems, I set some goals for myself to make sure I’m always keeping the user problems in the back of my mind.
一旦对问题有了很好的了解，我便为自己设定了一些目标，以确保始终将用户问题置于脑后。
- Make sure the design system is clear. The naming convention should be simple. 确保设计系统清晰。 命名约定应该很简单。
- New designers should understand how to use the design system. If not, the system should be laid out in such a way that they should be able to find things for themselves. 新设计师应该了解如何使用设计系统。 如果不是，则系统的布局应使他们能够自己找到东西。
- Engineers should be able to develop with ease. Components, colors, and states should be part of the coded design system. 工程师应该能够轻松地进行开发。 组件，颜色和状态应成为编码设计系统的一部分。
- Focus on the essential components for V1 (Buttons, inputs, colors, type scale, etc.) 专注于V1的基本组件(按钮，输入，颜色，类型标尺等)
- Build V1 of the design system by only having the components, no states. Since the design system is already coded, and the component states exist, the engineer didn’t need those states at the moment. So, I decided to break down the process and do it in the next iteration. This leads us to the next goal. 仅包含组件而不包含状态来构建设计系统的V1。 由于设计系统已经编码，并且组件状态存在，因此工程师目前不需要这些状态。 因此，我决定分解该过程，并在下一次迭代中进行。 这将我们引向下一个目标。
- Be kind to yourself. It’s a long process. It’s important not to get overwhelmed with everything that needs to get done. By chunking the work (first basics, then states, then language, etc.), I can work on manageable problems with clear boundaries. 善待自己。 这是一个漫长的过程。 重要的是不要让需要完成的一切不知所措。 通过分块工作(首先是基础知识，然后是状态，然后是语言等)，我可以处理界限清晰的可管理问题。
第三步：原型 (Step Three: Prototype)
Once I had my goals and knew what I needed to do, I started creating the components. Here are the basics of what I did.
一旦有了目标并知道需要做什么，就可以开始创建组件。 这是我所做的基本操作。
了解工具 (Get to know the tool)
I found that Figma has some helpful features that make building and scaling components so much easier. This meant that I wouldn’t have to spend as much time resizing components and focus on actual people problems. Here are two examples of the features I used the most, and what I did with them:
我发现Figma具有一些有用的功能，这些功能使构建和缩放组件变得非常容易。 这意味着我不必花太多时间调整组件的大小并专注于实际的人员问题。 这是我使用最多的功能的两个示例，以及我对它们进行的操作：
1.约束 (1. Constraints)
Constraints let you “stick” an element to a direction upon resizing. I found this to be really helpful for select components in particular.
约束使您可以在调整大小时将元素“粘贴”到某个方向。 我发现这对选择组件特别有用。
2.自动版面 (2. Auto Layout)
I used the auto layout for things I knew would require specific spacing and elements that had lists. Here is an example of it using a button and a menu.
我将自动布局用于需要特定间距和具有列表的元素的事情。 这是使用按钮和菜单的示例。
命名约定 (Naming Convention)
The next step was to build out the information architecture. To make the design system easy to navigate, its structure had to be easy to understand. I read this article by InVision, which provided some excellent insight into naming conventions and standard structure. I learned that when naming, it’s essential to label from broad to specific and separated by a forward slash. One major thing I had to worry about was dark and light mode and figure out where to place the variation in the naming.
下一步是建立信息体系结构。 为了使设计系统易于浏览，其结构必须易于理解。 我阅读了InVision的这篇文章 ，该文章对命名约定和标准结构提供了一些出色的见解。 我了解到，命名时，必须将标签从宽到特定以及用正斜杠分隔开来。 我要担心的一件事是黑暗和明亮模式，并找出将变化形式放在命名中的位置。
Essentially, the structure I followed is this:
本质上，我遵循的结构是这样的：
component / dark or light / type / variation
组件/深色或浅色/类型/变化
色彩 (Colors)
The final step for this version was to sync up the colors. This was a significant pain point for the engineer. The naming of the color did not match what was in the code, and there were many more colors used than what was in the code. For this, I pulled all the names from the code and spent time matching the colors and renaming them. This made sure that when the engineer coded the design, he could copy the variable name and not have to look up the matching. In fact, the engineer mentioned that since this change has been implemented, it has saved him a lot of time in building new components and flows.
此版本的最后一步是同步颜色。 对于工程师来说，这是一个很大的痛点。 颜色的命名与代码中的颜色不匹配，并且使用的颜色比代码中的颜色多得多。 为此，我从代码中提取了所有名称，并花了一些时间来匹配颜色并重命名它们。 这样可以确保在工程师对设计进行编码时，他可以复制变量名称，而不必查找匹配项。 实际上，工程师提到自从实施此更改以来，它为他节省了很多时间来构建新的组件和流程。
With that, I came up with my very first version of the design system in Figma. I’m excited about V2, where I will tackle some bigger components (molecules and organisms). For now, I’m really happy with how this turned out. It has made my life a lot easier, and I find sharing new designs with stakeholders faster and easier.
因此，我在Figma中提出了我的设计系统的第一个版本。 我对V2感到兴奋，我将在其中处理一些更大的组件(分子和生物)。 现在，我对结果如何感到非常满意。 它使我的生活变得轻松得多，而且我发现与利益相关者共享新设计的过程越来越快。
In the future, I think I want to test this out with other designers to see if my goal of making it easy to onboard new people has been achieved. I’d also like to make the system more robust by adding more interactive components.
将来，我认为我想与其他设计师一起进行测试，以查看是否实现了使新手轻松的目标。 我还想通过添加更多交互式组件来使系统更强大。
All in all, this was a great learning experience for me. I’m glad I got the chance to explore the inner workings of a simple design system, and I’m excited to take this to the next level over time.
总而言之，这对我来说是一次很棒的学习经历。 我很高兴有机会探索一个简单设计系统的内部运作，并且很高兴随着时间的推移将其提升到一个新的水平。
figma设计
5593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
