June-August 2023
Jira, Miro, Figma, FigJam
Before diving into the creation and maintenance of Visit London Design System, it’s essential to have a clear plan. The Design System Canvas helps consolidate all crucial information, assess the current state by mapping out existing components and their condition, and plan future developments with realistic timeframes. It also serves as a valuable tool for gaining stakeholder buy-in by detailing key activities, objectives, and target users. This alignment ensures that the Design System supports the organization’s overall objectives, keeping everyone on the same page and working towards a common goal.
As part of this approach, I focused on identifying atoms that define the most basic elements of the user interface and compiled a comprehensive inventory of reusable atoms. At this stage, I chose design tokens to represent primitive values that are still not connected to specific use cases. The names are non-semantic and will not be published in the Visit London Figma library; they will be mainly used by the design team.
During this process, I identified atoms that represent the most foundational elements of the user interface and compiled a comprehensive inventory of reusable atoms. As an initial step, I defined design tokens to represent primitive values that are not yet tied to specific use cases. These tokens, which have non-semantic names, will not be published in the Visit London Figma library; they are intended primarily for use by the design team.
You can find some examples of primitive tokens below:
To bridge the gap between design and engineering, we developed a naming convention for our design tokens that captures sentiment, usage, prominence, and interaction. This approach formalises color usage in our product by capturing its semantic meanings.
Sentiment reflects the emotion or purpose conveyed by the color (e.g., success, warning, danger). Usage specifies where the color is applied (e.g., background, text). Prominence indicates how prominent the color appears, and interaction describes the component’s state (e.g., hover, active).
Atomic Design
The design system’s centralised repository of components, guidelines, and principles has facilitated the creation of interfaces that are consistent in look and feel. This consistency has improved usability and minimised the time and effort spent on resolving design inconsistencies.
© 2024 Myriam Martin Digital. All rights reserved.