figma设计_设计优化向figma的迁移

figma设计

The reason why I’m writing this is a joke I shared with my fellow designer by the coffee machine: “well, I actually proposed these changes to share them afterwards on Medium”. Of course, that’s not true, I do this because I value my time.

吨他之所以我在写这是一个笑话我与我的设计师在咖啡机共享：“好了，其实我建议这些变化在事后分享他们对中等”。 当然，那是不对的，我这样做是因为我珍惜自己的时间。

When I first took up a designer role at PropellerAds I already had experience working with Figma, so switching to relatively new Sketch was a sort of adventure for me. I said: “Oh, new tool, great, should be interesting”. Then I was introduced to Abstract for version control, I said again “Oh, cool, new tool…” It took some time to dive deep into the components, branches, projects and stuff. Huh, then it was time for a developer hand-off “Oh, cool, Zeplin, I’ve heard of it, not a big deal”. And finally I asked where should we do prototypes. This time InVision came in sight. Well, it’s one more tool … this got me into thinking over the process.

当我第一次在PropellerAds担任设计师职位时，我已经有过与Figma合作的经验，因此切换到相对较新的Sketch对我来说是一种冒险。 我说：“哦，新工具，很棒，应该很有趣”。 然后，我被介绍给Abstract进行版本控制，我再说一遍：“哦，很酷，新工具……”花了一些时间深入研究组件，分支，项目和内容。 呵呵，是时候让开发人员交出“哦，很酷，Zeplin，我听说过，没什么大不了的”。 最后我问我们应该在哪里制作原型。 这次InVision出现了。 好吧，这是另外一个工具……这使我开始思考该过程。

I tried to calculate how many routine actions I commit every day to deliver my designs. The answer was obvious: way too many.

我试图计算出每天为交付设计要执行的例行动作。 答案很明显：太多了。

8原因为什么Figma是❤️ (8 REASONS WHY Figma is ❤️)

Figma is 4 in one. Better than any shampoo. I’ve seen at least 10 articles telling about it but ok, let’s repeat:

Figma是四合一。 比任何洗发水都好。 我已经看过至少10篇关于这方面的文章，但是好的，让我们重复一下：

1. Auto-layout. At the moment we can’t imagine our lives without it. You just have to specify the rules for paddings and spacings inside the components or between them and reuse them happily ever after;
   自动布局。 目前，我们无法想象没有它的生活。 您只需要指定组件内部或组件之间的填充和间距规则，然后就可以愉快地重用它们了；
2. Figma is a built-in-browser app. Your projects are available on any device with wifi connection. The only thing you have to do is to sign it to your Google account using any available browser;
   Figma是内置的浏览器应用程序。 您的项目可在任何具有wifi连接的设备上使用。 您唯一要做的就是使用任何可用的浏览器将其登录到您的Google帐户；
3. Team spirit: you see those moving arrows, you can leave specs and comments there, discuss prototypes or weather. Both product owners and developers can easily access your work anytime. Transparency rules!
   团队合作精神：您会看到那些移动的箭头，可以在此处留下规格和评论，讨论原型或天气。 产品所有者和开发人员都可以随时轻松访问您的工作。 透明规则！
4. The only one source of design truth and the only one tool. No more exports, imports and integrations;
   设计真理的唯一来源和唯一工具。 不再有出口，进口和一体化；
5. Built-in prototyping tool that’s becoming more and more powerful;
   内置的原型制作工具变得越来越强大；
6. For those who use Design Systems: few clicks to connect any external library and you’re ready to use in you projects. Component previews are in the left panel, you just have to drag and drop them to your layout;
   对于使用Design Systems的用户：只需单击几下即可连接任何外部库，您就可以在项目中使用了。 组件预览位于左侧面板中，您只需将它们拖放到布局中即可；
7. Master component legacy, but not too much, you’re still free to change colors on the fly;
   掌握了主要组件的知识，但又不过分，您仍然可以随时更改颜色。
8. Styles (colors, type, shadows etc.) are logically separated from the components. You can switch them on to your projects as you want. You can change them and have multiple palettes for a dark theme 😏
   样式(颜色，类型，阴影等)在逻辑上与组件分离。 您可以根据需要将它们打开到项目中。 您可以更改它们，并为黑暗主题设置多个调色板palette

Nika Galkina Nika Galkina的插图

最难的部分是开始 (The hardest part was to begin)

First came the plan:

首先是计划：

1. Move design system, considering new structure;
   移动设计系统，考虑新结构；
2. Move current Artboards to start designing in Figma (1st month);
   移动当前的Artboards开始在Figma中进行设计(第1个月)；
3. Move the rest as needed (Q1).
   根据需要移动其余部分(Q1)。

We had 6 shared Sketch projects in Abstract, each contained of 50–500 artboards. We’ve started migrating with current files while working on them.

我们有6个摘要共享的Sketch项目，每个项目包含50–500个画板。 在处理当前文件时，我们已经开始迁移它们。

Unfortunately, you can’t export Sketch files to Figma smoothly. You have to suffer.

不幸的是，您无法将Sketch文件顺利导出到Figma。 你要受苦

The process:

过程：

• Set up color palette, established typography rules and created “Icons” file, connected them to our projects as “Styles”;
  设置调色板，建立印刷规则并创建“图标”文件，将它们作为“样式”连接到我们的项目；
• Build components library in “Design system” file;
  在“设计系统”文件中建立组件库；
• Moved all the layouts to Figma projects;
  将所有布局移至Figma项目；
• Back-up Sketch files to store for approx. a year more.
  备份草图文件以存储大约。 一年多。

Abandon all hope and manage to re-create each and every component again. You know how great is switching to a new product: feeling like a mole trying to find a right way. I have good news for you: Figma is easy, the hardest thing is to push the team to migrate. We gave ourselves couple of weeks to move our staff to Figma. It can be annoying, start with the essentials, then try to assemble your first layout there. And here’s where the magic can possibly happen: you start seeing the design system with fresh eyes and you notice it looks like sh**.

放弃所有希望，并设法重新创建每个组件。 您知道切换到新产品有多伟大：感觉就像是试图寻找正确方法的痣。 我有个好消息：Figma很简单，最困难的是推动团队迁移。 我们花了几周的时间将我们的员工调到Figma。 可能很烦人，从基本要素开始，然后尝试在那里组装您的第一个布局。 这就是魔术可能发生的地方：您开始以崭新的眼光看到设计系统，并且发现它看起来像sh **。

转换如何为设计系统带来了很多新想法 (How the switch brought a bunch of new ideas to the design system)

We all know the design system is a continuing work, there’s always something to improve. We stepped out of our comfort zone and planned some bold changes. Some of them are:

我们都知道设计系统是一项持续的工作，总有一些需要改进的地方。 我们走出了舒适区，并计划了一些大胆的改变。 他们之中有一些是：

• borders: from 1 to 2px (rebels);
  边框：从1像素到2像素(反叛)；
• grays: from just grays to blue grays (anarchy);
  灰色：从纯灰色到蓝灰色(无政府状态)；
• input-height: from 32 to 36px (no comments);
  输入高度：从32到36像素(无评论)；
• and yes, dark theme (insane).
  是的，黑暗主题(疯狂)。

Nika Galkina Nika Galkina的插图

We also questioned the usefulness of some components, they are in trash now. We reconsidered the structure of the library: we used to have 10 separate Sketch files, now we have one.

我们还质疑了某些组件的用途，这些组件现在已被丢弃。 我们重新考虑了库的结构：我们曾经有10个独立的Sketch文件，现在只有1个。

还有什么值得怀疑的 (What is still questionable)

Every user with the link can see all the layouts, that’s not always necessary. Moreover it’s not needed. Guys can get lost there or see something they should not.

知道链接的每个用户都可以看到所有的布局，这并非总是必要的。 此外，它不是必需的。 伙计们可能在那里迷路或看到他们不应该看到的东西。

Nika Galkina Nika Galkina的插图

Figma has a lot of plugins, however half of them doesn’t work properly, it is sometimes frustrating. The plugin section is definitely not a priority for Figma design team.

Figma有很多插件，但是其中一半不能正常工作，有时令人沮丧。 插件部分绝对不是Figma设计团队的优先事项。

开发人员方报价 (Developers side quote)

Generally, our developers joined Figma with no trouble. Some feedback:

通常，我们的开发人员毫无困难地加入了Figma。 一些反馈：

• No HSL color export, well, there is no other format except HEX;
  没有HSL颜色导出，好吧，除了HEX，没有其他格式；
• Position: absolute for every object. Useless, why show it then?
  位置：每个对象的绝对位置。 没用，那为什么要显示呢？
• Figma doesn’t show the border radius if it’s different on the different angles;
  如果在不同角度上不同，则Figma不会显示边界半径。
• Developer can’t export icons or images, we had it in Zeplin so it’s a bit annoying — not to have it here;
  开发人员无法导出图标或图像，我们在Zeplin中拥有它，所以有点烦人-不在这里；
• Text copying is not convenient, you have to target more precise to the interface (Zeplin had a big “Copy” button instead).
  文本复制并不方便，您必须针对界面进行更精确的定位(Zeplin拥有一个大的“复制”按钮)。

Now my Dock looks much better, showing one and only design tool that I use, no more export/import from tool to tool.

现在我的Dock看起来好多了，它显示了我使用的唯一的设计工具，不再需要工具间的导出/导入。

Nika Galkina Nika Galkina的插图

Change is always a good idea!

改变永远是一个好主意！

翻译自: https://uxdesign.cc/design-optimize-migration-to-figma-296d61128cd7

figma设计