Menu

Post image 1
Post image 2
1 / 2
0

Generating fluid CSS clamps from raw Figma typography tokens

DEV Community·Alexander·about 1 month ago
#vMVdFBFp
Reading 0:00
15s threshold

Your designer hands you a new typography scale. It looks beautiful on their massive studio monitor. You check the mobile designs and the font sizes are completely different. The design file just gives you fixed pixel values for desktop and fixed pixel values for mobile. You now have to write media queries for every single heading level. This is tedious and honestly prone to mistakes. We can fix this by converting those static pixel values into fluid CSS clamps automatically. You feed in the raw JSON from Figma. You run a script. You get perfect fluid typography that scales smoothly between mobile and desktop viewports. This means no more media queries for font sizes. Your type just adapts automatically. Prerequisites You need Node installed on your machine. You also need a basic project folder with a package.json file. We will use Style Dictionary to process our tokens. It is a fantastic tool for transforming raw data into usable code. Create a new folder and initialize your project.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More