使用开发模式一年:一位工程经理的10个教训

When Figma announced Dev Mode at Config 2023, I was intrigued but skeptical. On one hand, as an engineering manager at Decathlon, the outdoor and sporting goods retailer, I’m an advocate for trying new tools. On the other I’ve seen many promising tools fall short of truly aligning design and development workflows. However, after a year of hands-on experience, I’ve found Dev Mode to be transformative for our team.

当 Figma 在 Config 2023 上宣布 Dev Mode 时,我感到好奇但持怀疑态度。一方面,作为户外和运动用品零售商 Decathlon 的工程经理,我是尝试新工具的倡导者。另一方面,我见过许多有前途的工具未能真正对齐设计和开发工作流程。然而,在一年的实践经验后,我发现 Dev Mode 对我们的团队具有变革性的作用。

The standout feature has been Code Connect, which has significantly elevated our design system workflow. By linking Figma components directly to our actual component code, Code Connect addresses persistent challenges in property alignment, naming conventions, and state management between design and development. This proves especially valuable when dealing with complex components that may be structured differently in code than in design. Here are the key lessons I’ve learned:

最出色的功能是Code Connect,它显著提升了我们的设计系统工作流程。通过直接将Figma组件链接到我们的实际组件代码,Code Connect解决了设计和开发之间属性对齐、命名约定和状态管理方面的持久性挑战。当处理在代码中与设计不同结构的复杂组件时,这尤其有价值。以下是我学到的关键教训:

A diagram showing the relationship between a color value and a design token. On the left, a label with a pink circle icon displays the value 'F55DAF 100%.' It is connected by a dashed line to the token labeled 'pink/400' on the right. The diagram is set against a grid background with a purple border.

Design tokens are the small, repeatable decisions that define your visual language. Showcasing these tokens properly through the design tool has been a real success in terms of handoff for our developer teams.

设计令牌是定义您的视觉语言的小而可重复的决策。通过设计工具正确展示这些令牌对于我们的开发团队来说是一个真正的成功。

1. Start small, think big

1. 从小处着手,放眼未来

Developers have tried and true workflows, and it can be frustrating to add yet another tool to the mix. Understandably, some team members were hesitant to try Dev Mode in earnest. Rather than trying to overhaul our workflows, we started small and focused on getting some quick wins with design tokens through Figma variables.

开发人员有着经过验证的工作流程,添加另一个工具可能会令人沮丧。可以理解的是,一些团队成员对真正尝试Dev Mode持怀疑态度。我们没有试图彻底改变我们的工作流程,而是从小处着手,专注于通过Figma变量获得一些快速胜利。

Tip: Use Figma’s variable aliasing to establish a clear hierarchy in your design tokens. T...

开通本站会员,查看完整译文。

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-23 02:10
浙ICP备14020137号-1 $访客地图$