Structuring scalable Figma variables for a multi-brand, multi-mode, and responsive layouts

Recently we have researched design tokens and how best to use them when building design system libraries in Figma. My primary goal was to understand how to effectively maintain and organise design tokens – using Figma variables. Without careful management, the volume of tokens can quickly become overwhelming, leading to a confusing, endless list of variables. This can make it incredibly difficult to know what you are editing or what impact your changes might have made across a system.

1024 683 Border Crossing UX

Two Figma Design System Tips and Tricks

We all love Figma. But when it comes to designing large and complex systems it can be difficult to maintain consistency and accessibility. In this post, I will cover three practical tips: using Figma’s nudging capabilities; applying ‘on-colour’ values; and introducing colour ramps to foundations. These methods have significantly streamlined my workflow and improved the consistency and accessibility of my designs.

1024 576 Border Crossing UX

Design checklists – the key for consistency

When creating a design system, you should think about developing and using a design checklist. A design checklist is a group of rules or standards that are tested against. They help ensure any foundation, component, pattern or element meets certain pre-defined criteria. Think of a design checklist as a quality assurance tool – a set of clear standards that all elements in your design system must meet.

1024 576 Border Crossing UX