Rimessa Design System - Figma
The Rimessa design System is born from one very specific need: the one to create continuity between designs and coding. A Design System without a coding reference is a UI kit (someone says) and one with only coding is just a cheap experience. Coding is meant to make a reality of the vision of a designer, researcher, you name it.
And this is not possible without a language of sort, a vocabulary where for every design element you have a coding translation. To Unable this we want a complete usage of all Figma features meant for it, starting from Variables and Mode. To show you the way I do it I have created a clear reference to this library in the Shopify theme “Kyrmes” available here.
A note: first of all to have a Shopify theme associated to it does not restrict the usage of this design system to that but you sure have a clear base where every design component or variable here have a matching css variable there. The same system can be easily recreated for any other platform, from Adobe Commerce to Wordpress WooCommerce.
And of course by changing designs here you’ll have an export that easily will customise to your need the framework of your choice. This said we have a couple of clear limitations, one is that of Figma: apparently there isn’t still a clear way to translate Mode into coding and still some of some of the design features - specially animation - is impossible to have a code version, and this limitation is even deeper when we want to animate something Figma, the way you prototype an animation is almost never the way that animation will work with css or js. The other is the amount of coding that goes into a - let’s say - Shopify theme, a lot of things will be not touched by these designs and evn though the 4 pixels rule is the one I am building this design system on it is a huge task to have it done exactly the same in coding (there you find something like padding: 5px 3.777px 23px 37px 😂 on a rule on line 8993).
For this and many other reasons this library is kept to a minimum, no reason to go into designing something here unless this will not unlock the freedom for you to modify it at your pleasure.
