A great conversation which quickly moved more into specific problems with design systems in Figma and code based on questions from the audience.

I was joined in this panel by Tiago Almeida and our goal was to:

• Explore how plugins and tools can speed up design system workflows across various stages, including coordination, documentation, design system inventory, and integration with tools like Figma and Storybook.

• Understand where design system processes can be optimized through accelerators, focusing on design systems for different platforms, component management, and more.

• Discuss strategies for incorporating tools that improve efficiency and scalability in design system management.

Content overview:

1. Managing design token systems within an organization, getting buy in and convincing stakeholders

2. Best practices for creating design token systems that work for your company and are easy to use for your colleagues

3. Implementing complex design token strategies using Figma variables and styles

4. Bringing design tokens from Figma to code so that developers at your company can use them

Great design system panel together with Laura Fehre, Patrycja Radaczyńska, Francesco Cutolo, and Dilara Cumhur Neutze.

We discussed our two years of experience collaborating async outlining some issues and benefits, as well as which communication methods are great for async and when to use them.

At this round table we talked about using Figma DevMode and code connect to make handover of design system components and design tokens better.

Related article: Design Systems vs. AI: will the robots take over?

I was very happy to be invited to the Complementary podcast to discuss color in UI/Product design.

Using design systems and design tokens to optimize your design decisions.

Digital products are getting bigger and spread across evermore platforms from web to mobile and tv.

Design systems & design tokens help keep your products consistent, assure accessibility and allow you to create high quality products with automatic dark mode. You can even use one design system for multiple brands. With design systems you dramatically reduce costs and effort while improving the user experience of your products.

1. What is accessible design?

2. End-users requirements (Color, Typography, Icons, etc.)

3. System users requirements (Naming, usability of the system, documentation)

The session will explore the future of Design Systems in light of ML/AI, pattern-based automation, and general advancements in computation, bringing new efficiencies to the product development process

A conversational talk about design tokens, covering the following points:

• What are design tokens?

• Using design tokens as a designer

• Dark mode with
design tokens

• Introduction to design tokens

• Benefits

• Types of design tokens

• How to use design tokens

• Design token workflow (Code <-> Figma)

• Related article: Building better products with the design token pipeline

Introduction to A/VR, benefits and possibilities to apply it for business use. Also showing some experiments using Unity.

Explaining the concept iterative shipping, how to do it right and what benefits it can bring to the product development workflow.

Two separate talks in this series explaining to folks all about readability & legibility. What it is, how to make sure you master it and how it can help people from designers to business developers.

Style Dictionary Utils is a collection of parsers, filters, transformers and formats for Style Dictionary that make working with w3c design tokens a lot easier.

# PROBLEM
If you are building a modern design system in Figma you probably use design tokens. External design token solutions add complexity as they don’t sync well with Figma. Using an external tool & Figma to specify tokens means you have two sources of truth — not the idea behind design tokens.

# SOLUTION
To solve this, I developed the Figma Design Tokens plugin. It allows you to export styles and specific token elements as a json file. You can transform the file for any platform (mobile, web, etc.) using amazon style dictionary. To further improve your workflow the plugin can directly publish the tokens to a github. It comes with a template that automatically transforms tokens using github action.

Read more about this approach in my article on building a better design token pipeline.

How Primer’s updated light and dark theme color contrast strategy resolved hundreds of color-contrast-related accessibility issues over one thousand use cases.

Shaping the future of Scale, the telekom design system.
Responsibilities:

• Leading the product strategy of the design system

• Driving capabilities and features like design tokens, dark mode or mobile components

• Promoting & advocating design system

• Training and educating about design system

• User research

• Hands-on design of features and components

• Collaborating with developers to implement features

• Managing stakeholders

Building the future digital media platform with a focus on personalized relevance.

Responsibilities:

• Strongly involved in building the design team

• DesignOps

• Implementing a company wide design systems incl. design tokens & processes

• Establishing design team culture

• Implementing new workflows for faster results and better cooperation between teams e.g. dev or business

• Evaluating and implementing new tools for the design team

• Mentoring & training designers

• Lead design / Defining the design direction & user experience

• Research incl. user interviews, market research, competitor analysis

• Stakeholder management

• Co-defining product strategy

• Working in cross-functional teams to deliver high-end products

• Hands-on design from start to finish in close cooperation with in-house dev team

• Conducting usability tests / user tests

• Leading & organising workshops

• Design sprints

• Speaking at meetups & conferences

• Active in open source community (e.g. figma plugins & packages)

Building out major innovation topics for the future of mobility for Daimler AG.

Responsibilities:

• Strongly involved in building the design team

• DesignOps

• Implementing & scaling design systems

• Establishing design team culture

• Implementing formats like “show & tell” to share & help design team grow

• Implementing new workflows for faster results and better cooperation between teams e.g. dev or business

• Evaluating and implementing new tools for the design team

• Implementing formats like “design presentations” to spread knowledge throughout company

• Mentoring & training designers

• Lead design / Defining the design direction on multiple projects

• Defining the user experience for the products I worked on

• Research incl. user interviews, market research, competitor analysis

• Stakeholder management

• Co-defining product strategy

• Working in cross-functional teams to deliver high-end products

• Projects: ideation, incubation & commercialization stage incl. app store and web releases

• Hands-on design from start to finish in close cooperation with in-house dev team

• Conducting usability tests / user tests

• Leading & organizing workshops

• Design sprints

• Speaking at meetups & events

• Active in open source community (e.g. sketch plugins or packages)

Freelancer Relationship Management
Co-founded with 3 partners to build the first SaaS freelancer management tool for agencies & companies. Freelancers gain visibility and qualified request, agencies get rid of excel.

Design Lead / Defining the user experience & design for the best eBike system on the market, the Nyon (Bosch eBike). Redesign & development of the ecosystem (Nyon eBike Computer, iOS & Android Apps & Web Portal).