Since the launch of variable modes in Figma, it’s been common to see tutorials and showcases for theme switching like light & dark mode, and responsive design, although I’ve never seen an intuitive variable setup that allows switching between native device components.
Whilst working with a client that required native designs for both Android & iOS, I noticed that the time spent creating and managing components and live designs was inefficient.
The idea was that if we could create a new adaptive design system, built to utilise the local variable and mode switching, we could efficiently create a single component (and therefore a single design screen), that can automatically swap between platform guidelines.
The first step was collecting together all of the current component variants between platforms, as well as the native components utilised within the designs too - such as native dialog boxes, segmented controls, status bars, etc.
By simply building a component with the same structure - using Android’s styling as default - but creating variable collections detailing the difference in padding, sizing, colours, etc, you can effectively create a singular component that can switch between platform stylings.
The result from applying this process to all components offers a unique, non-destructive, efficient way to view designs using variable modes. A single can easily be viewed in the style of an iOS or Android device, simply through the use of variables on a component level.
My hope is that through proving the concept of a multi-platform design system, you will be able to utilise this workflow and apply it to many other situations.
