I am so excited about Figma Tokens
I am a Web Dev, but it all started from UI design and progressed through years of building the front end. Not an unusual path for many Full Stack Developers (I am not a big fan of this job title). My eye is still sensitive to good design, and I still enjoy doing that by myself. Figma is my weapon of choice when it comes to UI work.
I am a Figma beginner. I am shocked whenever I watch some pro designers doing crazy shit with a few clicks. I mainly use this tool to validate ideas, check colour combinations, experiment with some font pairs, etc. I still prefer to “design in the browser” because I am more familiar with Browsers API than the Figma features set and UI for a fully-fledged design.
After I embraced the power of Auto-Layout (pretty much CSS flexbox), it became much easier to express my creative ideas on the Figma frame. Of course, that was a game changer, but I wonder if “designing in the browser” is still more accessible for me after discovering Figma Tokens. These reusable tokens (pretty much CSS custom properties or CSS variables if you will) can hold values for sizing, spacing, colours, borders, fonts etc. Moreover, they can quickly be updated, imported, exported and what else. Furthermore, you can slice and dice them by composing new tokens based on the value of another one! Currently, this functionality is available via the plugin, but it wouldn’t surprise me if the Figma team eventually merge it with an app.
Being inspired by the blogging style of Chris Coyier and Seth Goddin, I wanted to write down a snappy brain dump about the subject currently circulating in my brain. I also wanted to thank Paweł, Filip and Michał from the crew behind the Product Dissign Podcast for introducing me to the Figma Tokens.
Until next time, stay curious 🧠