<aside> <img src="/icons/link_red.svg" alt="/icons/link_red.svg" width="40px" /> INFO
Author: Anton Parkhomenko | Product Design (since 2016), Design Systems (since 2019) Company: Shipa (Dubai, UAE) Position: Senior Product Designer / Design Systems
</aside>
In this case study, I will describe my experience at Shipa Delivery on implementing Figma variables into our multi-product, mature, and large Design System called “Cerebro”. The main goals of that update: Implementation of Figma variables and migration of our Design System from static styles to design tokens, also provide flexible and consistent theming of the entire product set. Considering all that, I will primarily focus on the design side within Figma as our primary design tool.
<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> Note! Because we work in the Figma design environment and apply Figma Variables to our Design System on the design side, I will use the term “Variables” instead of the more well-known term “Design Tokens.” Feel free to draw parallels between Figma Variables and Design Tokens. Further, I will describe the transformation of Figma variables into design tokens.
</aside>
<aside> <img src="/icons/list_gray.svg" alt="/icons/list_gray.svg" width="40px" /> TABLE OF CONTENTS
</aside>
One of the core tasks in Q3-4 for the Cerebro DS team at Shipa Delivery was updating our Figma libraries to incorporate the latest feature enhancements introduced by Figma during Config 2023. The most exciting part of that update is the introduction of variables, which allows us to apply design tokens in an optimized and enriched way by staying inside native Figma functionality.