Rotation Slider component made using @antigravity (https://x.com/antigravity)

Rotation Slider component made using @antigravity (https://x.com/antigravity)Rotation Slider component made using @antigravity (https://x.com/antigravity)

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Manish Patel

• Mar 1

Rotation Slider component made using @antigravity

uidesign

Raja Sheryar

pro

• 1d

If your Figma file has seventeen font sizes, your website will too.

Before any page design, I set up a type scale as text styles, named by role:

• Display: 56 / 64

• Heading 1: 40 / 48

• Heading 2: 28 / 36

• Body: 17 / 28

• Caption: 13 / 20

Size and line height together, never one without the other. Role names (Heading 2, Body) instead of sizes (28px), so the scale can change without renaming anything.

Font size can also bind to number variables now, which helps when desktop and mobile need different values.

Publish the styles to the team library and every file uses the same scale. On the build side it becomes a handful of CSS classes or variables.

How many text styles does your current project have?

Save this for your next redesign, and follow for the next build.

Follow for more videos: instagram.com/sellwrightstudio · youtube.com/@sellwrightstudio

Figma typography uidesign

Dim Pixidimworld

• 1d

This is really nice

Chris Nijhof

max

• 2d

Our latest project for Nági by Isaac is live now! 🚀

A full 3D blender built website together with Higgsfield Scroll Environments is live now on Framer! We've put a crazy amount of work into this project, feel free to check it out here <3

Check it out