Adding Colour Swatches from Relume in Webflow: A Guide

·

The colour palettes tutorial vid shows the old UI. How do I add colour swatches from Relume in Webflow? Where do they get added to the style guide?

Matt J.
·
Blair you can paste them anywhere on the style guide page you'd like to. I believe the palettes use color styles instead of variables though. I'm not sure if we have any plans at the moment to update this but I'll ask the team.
Blair
·
Is using variables best practice?
Matt J.
·
Blair yeah I would say so. Its just more efficient when you think about it as a system. Having a base color set (Primitive) and an element color set (Semantic) - you can nest the base colors inside of elements, use the same base variable for multiple uses.
Blair
·
Understand. Easiest way to set those vars in Webflow?
Matt J.
·
Blair wish I had that answer for you. I'm still exploring but so far it appears that the Figma to Webflow plugin that Webflow Labs has created seems to be the way so far - you just use their design system sync and not use the component sync because our components are built using a system that Webflow does not use (Client-First) so they won't appear correctly, and likely never will unless Webflow adopts this system (unlikely).
Blair
·
Thanks for all your help Matt. Legend.
Blair
·
I see how to set vars in WF (😡 how do I change the slack keyboard on iPad to the normal one!) Any reason to not just set them there? Again prob comes back to the role of Figma in getting final design built in WF. Any advice?