PTC Themer
To re-center software around accessibility, PTC's design system team created new visual guidelines for product teams to adopt.
We also began rolling out semantic design tokens to improve scalability and consistency across products.
However, while preparing teams for migration to the new theme, we ran into obstacles with updating files in Figma, the design software PTC designers use.
I built a tool to circumvent these difficulties and facilitate the migration process.
Role
Interaction design, wireframing, visual design, development
Time
March 2022 – May 2022
Category
Design tooling
Discovery and Definition
The biggest hurdle in migrating old design files to our new design system theme was preserving content overrides in Figma components.
As our old Figma components and our new Figma components had different constructions, Figma’s native Library Swap feature could not preserve changes like text content or toggled icon visibility.
The buttons on the left are a reference for what the buttons on the right should look like upon migration. Figma's native library swap instead applies default styling to the latter and does not perfectly preserve icon and text layer overrides.
Following conversations with teams frustrated with the transition process, I knew our users' foremost need was a solution that could
- migrate our Figma components to our design system's new styling and
- preserve all text, layer, and nested component overrides of these components
At the same time, I was in the midst of researching design token strategy for our product teams. After encountering confusion on how design tokens were relevant to designers, I realized that integrating design token education into the tool our designers use the most——that is, Figma——would further facilitate adoption of our new theme while building parity between design and development.
With my research in mind, I began designing and developing a solution. Figma's Plugin API allows users to create tools for customizing workflows in Figma's software. For that reason, I chose to address our users' needs through creating a Figma plugin.
I cloned a component-swapping function from Daniel Destefanis' Auto Theme plugin, then modified it for our needs by writing custom recursive functions in TypeScript and React. I wireframed the user flow and user interface in Figma, leveraging components from Thomas Lowry's Figma Plugin Design System.
Initial Release
Content Preservation
PTC Themer saves all text, layer, and nested component overrides implemented on PTC design system components in Figma like buttons and links. With just one click, designers can migrate their selected UI elements to the new design system library without worrying over incorrect labels and missing icons.
The buttons on the left are a reference for what the buttons on the right should look like upon migration. PTC Themer applies the correct styling to the latter and preserves its content overrides.
Token Metadata
Through filtering through design tokens and clicking their respective Info icon buttons, PTC designers can better understand the role of each token and read them in the same language that their developers use.
Validation
Teams at PTC are already adopting the beta release and responding with praise for how the plugin has quickened their design file migration process.
While there is still work to be done and additional feedback to be obtained, I am encouraged by our pilot users' responses.
