Automating design token migrations with codemods | Steve Dodier-Lazaro

Summary

In this talk, Steve from Back Market explores the challenges of managing and migrating design tokens in a large-scale system. He discusses the limitations of traditional token updates and introduces Cod Mod engines as a solution for automating the process. Through real-world examples, Steve demonstrates how automated tools can swiftly and accurately update thousands of references in the codebase, ensuring consistency without the need for manual intervention. The talk emphasizes the importance of automation, careful planning, and testing when migrating design systems, helping teams stay adaptable during rebrands and design updates.

Takeaways

• 😀 Design tokens are collections of reusable design values (like colors, typography, spacing) that help maintain UI consistency across platforms.
• 😀 The main promise of design tokens is to allow easy updates to a design system, but rebranding and token migrations often introduce challenges that require thoughtful management.
• 😀 When rebranding, even with design tokens, systems need to be updated across the codebase, which often requires renaming variables or changing values programmatically.
• 😀 Cod moding is a powerful tool that allows for automated migration of design token references in code, reducing the manual work involved in rebranding or system changes.
• 😀 A key issue during token migration is handling conflicts between old and new token values that share names but differ in meaning (e.g., 'spacing 1' changing from 4px to 16px).
• 😀 Renaming tokens or replacing an old token system with a new one requires careful planning and often depends on having a predictable and consistent naming convention.
• 😀 Cod moding allows developers to modify code in an automated, structured way, accessing the abstract syntax tree of a program to safely rename or replace tokens.
• 😀 The use of Cod moding at Back Market saved significant time: transforming over 2,500 files in 15 minutes, a task that would have taken months if done manually.
• 😀 It's important to build a reliable system that can handle edge cases, like adding new token values, while avoiding breaking changes or errors in the existing codebase.
• 😀 Even with automated tools like Cod moding, QA testing (such as visual regression testing) is still essential to ensure that no unintended changes occur during the migration process.
• 😀 The migration process can be complex, but Cod moding can dramatically reduce errors and time required for large-scale design token updates, allowing teams to focus on other priorities.
• 😀 Cod moding tools like the one used by Back Market are tailored to specific tech stacks, meaning companies need to adapt their solutions to their own tech environments for maximum effectiveness.

Q & A

What are design tokens, and why are they important for UI design?

Design tokens are collections of named design values (e.g., colors, typography, spacings) that are used to create consistent user interfaces (UIs). They ensure that the design language is uniform across different platforms and between designers and developers. By abstracting these values into variables, tokens help maintain consistency and facilitate easier updates to design systems.

What is the major challenge with design tokens during a rebranding or system overhaul?

The major challenge with design tokens during a rebranding or system overhaul is that while tokens help maintain consistency, they do not automatically adapt to major changes in brand identity. A rebranding requires updating token values and potentially renaming or replacing tokens, which can lead to conflicts and require significant effort to migrate the codebase.

How does Cod Moding help in the migration of design tokens?

Cod Moding uses a 'Cod Mod Engine' to automatically migrate design tokens in code. It analyzes the Abstract Syntax Tree (AST) of the code to find and replace token references programmatically. This allows for efficient and context-aware updates of tokens across the codebase, reducing manual effort and minimizing errors.

What are the two main problems faced during token migration?

The two main problems during token migration are: 1) Conflicts between old and new token systems, where tokens with the same name may have different values, and 2) Renaming or replacing tokens, where one token may need to be replaced by several, requiring careful handling of references in the code.

What is the key difference between Cod Moding and a linter?

The key difference is that a linter enforces continuous correctness by identifying and fixing patterns that are perpetually 'bad,' whereas Cod Moding is used to handle specific, one-time migrations. Cod Moding allows for more flexible changes to a codebase, including situations where old and new code may coexist temporarily, whereas linters typically cannot handle this type of situation effectively.

How did Back Market handle the issue of old tokens and new tokens with conflicting values?

Back Market addressed the issue of conflicting tokens by using Cod Moding to carefully manage the migration order. They ensured that tokens with conflicting values from the old and new systems were updated in the correct sequence, allowing the migration to proceed smoothly without causing issues in the codebase.

What role did visual regression testing play in the token migration at Back Market?

Visual regression testing played a critical role in ensuring that the migration did not introduce visual errors in the UI. Back Market used a tool called Chromatic to test the changes across thousands of files, ensuring the migration was visually consistent and reliable before deploying it to production.

How long did it take for Back Market to complete the token migration using Cod Moding?

It took about five days for Back Market to build the migration system and prepare the necessary scripts. However, once the migration scripts were ready, they were able to process over 4,000 references to design tokens in about 15 minutes, saving significant time compared to a manual approach.

What was the impact of using Cod Moding on Back Market’s ability to handle future design token changes?

Cod Moding significantly improved Back Market’s ability to handle future design token changes. The automated system allowed for faster migrations, reducing the time required for each update and ensuring that future changes could be applied in under an hour, rather than days or weeks. It also made them more adaptable to further rebranding or design updates.

What challenges did Back Market face during their migration, and how did they address them?

Back Market faced challenges such as conflicts between old and new token values and the complexity of migrating over 2,500 files. They addressed these challenges using Cod Moding to automate most of the migration, ensuring consistency and efficiency. In cases where the tool couldn't handle specific edge cases, they relied on manual fixes, but these were minimal compared to the scale of the migration.