<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=7267665&amp;fmt=gif">
Back to Articles

Design Systems decoded: Building a seamless Design-to-Development workflow with Figma 

Design Systems Webinar June 4th 2024




On June 4th we hosted a webinar on Design Systems.

Bridging the Gap: Design Systems, Figma, and GitLab Integration

Design systems are increasingly essential for modern product development, serving as a bridge between designers and developers. In a recent webinar, Mikołaj Niżnik, a senior product designer, and Marcin Koczorowski, a freelance web developer, demonstrated how integrating Figma with GitLab can enhance workflow efficiency and consistency.

We talked about:

• How to utilise Figma design tokens to transform designs directly into fully functional digital products

• How to benefit from a unique design system that supports extensive customisation and scalability, making it perfect for managing white-label projects and personalising them for different clients or market needs

• Facilitate the deployment of applications across multiple platforms, including web, iOS, and Flutter.

And here is what we presented:


Design Systems Webinar welcome
Our speakers, Mikołaj Niznik and Marcin Koczorowski, introduce the concept of design systems and discuss how they can bridge the gap between design and development.
Design Systems Webinar Agenda
Design Systems Webinar Agenda
Design Systems Webinar UI kit
A UI kit helps you start by providing basic components, whereas a design system enables you to scale by ensuring consistency and efficiency across your projects. It's not only the way to run your product - but it's a product itself.
Design Systems shared language
A design system acts as a shared language between designers and developers, incorporating elements such as design tokens, principles, color palettes, typography scales, and component libraries to ensure cohesive and efficient collaboration.
Design Systems button
Take a look at this button - it's built from various design decisions, including choices about padding, background color, text fill, or border radius.
Design Systems design and development
The process of designing a button involves collaboration between design tools and code. Designers specify visual details and layout, while developers implement these specifications in code, ensuring the button’s appearance and behavior are consistent. In most cases these workflows are really separated from each other.
Design Systems design token
The solution to this are design tokens. Design tokens can store values like padding, gap or border radius and make everything reusable and more convenient. We can say that this values are basically a designer decisions - and in that case, the main goal of this concept is to store key decisions as design tokens.
Design Systems for multi brand
These design tokens (and design system in general), serves as the foundation for multiple products, ensuring consistency across multiple platform. Each product can leverage the base design system to maintain a unified look and feel across different platforms.
Design Systems for multi product
The design system provides a solution that works on any platform. Each application can utilize elements from the design system, such as design tokens, icons, illustrations, and photos. This ensures customers have a consistent user experience across all devices.
Design Systems white label
You can change token values for specific brands or themes, enabling easy white-labeling and publishing under different brands. Despite these changes, the design system remains a single source of truth, while the final look for the end customer can vary significantly based on the theme or brand.
Design Systems button in Figma and CSS
Translating a button into design tokens in both Figma and code involves decisions about values like padding, gap, background color, and border radius. Without a design tokens, designers and developers might spend too much time determining these values instead of focusing on product and business value.
Design Systems button Figma and CSS
We can create variables in Figma to store design decisions, and similarly, use CSS variables in code. To maximize their usefulness, these values need to be synchronized between design and development.
Design Systems button Figma and CSS part2
There are various methods to synchronize design tokens between design tools like Figma and code. To see this process in action, watch the recording from our webinar.
design Systems benefits
Key benefits of design systems include enhanced automation and version control, scalability and customization with design tokens, seamless cross-platform deployment, and improved developer-designer collaboration. For more information, visit our website or GitHub repository.


Repository link: https://github.com/unravel-cc/design-systems-poc


Key Insights from the Webinar

Understanding Design Systems: Design systems go beyond mere component libraries and color palettes. They encompass tools, workflows, documentation, and guidelines, acting as a shared language between design and development teams. This ensures that everyone is on the same page, reducing chaos and improving communication.

The Role of Design Tokens: Design tokens are fundamental to maintaining consistency. They store design decisions such as padding, border radius, and color values, making them reusable across different platforms and technologies. This helps in achieving uniformity in multi-brand and multi-platform environments.

Automation and Control in the Workflow: Marcin showcased how to automate the process of translating design tokens from Figma into deployable code using GitLab. By leveraging GitHub actions, any changes in design tokens can be automatically pushed to the development pipeline, ensuring that updates are consistent and controlled.

Practical Implementation: The webinar included a practical demonstration where a simple change in Figma, such as updating a color, was automatically reflected in a live application. This process involved exporting tokens from Figma, pushing them to GitHub, and then deploying the changes through a controlled pipeline.

Benefits of Integration: Integrating design tools with development pipelines streamlines the workflow, reducing manual errors and ensuring that design updates are quickly and accurately reflected in the product. This integration supports continuous delivery and improves the overall efficiency of the development process.

Additional Information on Design Systems

Scalability and Maintenance: Design systems are crucial for scaling projects. They simplify the design and development process by providing a single source of truth, making it easier to maintain and update the product over time.

Enhancing Collaboration: With a design system in place, teams can collaborate more effectively. Designers can focus on creativity without worrying about inconsistencies, while developers can implement designs with confidence, knowing that the specifications are clear and standardized.

Ensuring Accessibility: A dedicated design system team can also handle accessibility, ensuring that all components meet the required standards. This not only improves the user experience but also ensures compliance with legal requirements.


The webinar highlighted the importance of design systems in modern product development and demonstrated how integrating Figma with GitLab can enhance efficiency and consistency. By adopting such practices, teams can bridge the gap between design and development, ensuring a smoother, more collaborative workflow.

The webinar video recording: 


If you want to learn more about how we approach partnering with external companies in their design systems endeavours, feel free to get in touch!.




You may also like

Envision the future
of your digital product.

Book free consultation