Unlocking the power of tokens

Learn about the benefits of a utility-first system and how design tokens can play a role in Webflow development from Timothy Ricks.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@timothyricks]

Thank you, Webflow Team, for letting me share at conf! It’s so exciting to have variables natively now!

[@Webflow]

Thank YOU Timothy - you've inspired so many people, so excited to see what you continue to unlock with these new features 👀

[@waysearcher]

Thank you, Timothy. I've heard about your system and it's very interesting, but I wanted to try it on the next project. But the introduction of variables in WebFlow stopped me. I am not very immersed in your system, will it change much due to the introduction of variables?

[@timothyricks]

@@waysearcherThank you! I’m updating the Lumos Framework to use native Webflow variables and make it easier for designers to use

[@aaezekiel]

Here for Tim

[@G33kyAli]

Thought about you as soon as I learned about Variables. I was like that's what you were building! So glad they brought you to the conference rather than sherlocking your idea

[@Theoderic]

Actually I don't like presentations, but Timothy's teaching level is next level. The quality of assets, the synch between speech and board are extremely helpful to understand this topic. Huge shoutout to him!

[@timothyricks]

Thank you so much for the kind words! Really glad this helps!

[@davidkathrein9644]

Always love seeing timothy ricks! Great dude :)

[@DenisLeskovets]

Thanks Timothy, great content. Working on implementing tokens in my designs and waiting for finsweet to update their docs with tokens.

[@DANNFIGDESIGNS]

I try not to be star struck! Thank you!

[@ionelCristianLupu_]

@timothyricks did you create some sort of a TailwindCSS clone there at the end of the video?

[@timothyricks]

Yes, it’s a framework inspired by Tailwind but built around the uniqueness of Webflow. I’ve made several videos about Lumos if you’re interested 🙂

[@pilot341]

Hi. I understand.

[@D4sxysrb]

can we sync to a repo? 🙌

[@sergiod1618]

it seems is not possible...I am trying it paste tokens in custom code, but not works

[@D4sxysrb]

@@sergiod1618 bummer, it’s one of the benefits of tokens

[@sergiod1618]

@@D4sxysrb The easiest way to import tokens is through the Figma to Webflow plugin, which has an option to import Figma variables.

This defeats Webflow's own mission statement "Build with the power of code - without writing any"

[@timothyricks]

Variables can be used without writing code now 🙂

I Know@@timothyricks and your work is impressive but as a designer, it seems your content leans more towards developers rather than designers. In many of your videos, code is the primary focus.

[@SamBroomby]

@ that's because he's usually extending Webflow from its core functionality. A lot of his content is unachievable 100% in Webflow.

[@taunado]

@ The code used in Webflow is fairly simple to learn. In terms of web dev, it's basic and probably worth investing time in, as opposed to hacking and clicking for days in Webflow.