How to create

p

@pixelbybella

2.7K followers · usually 5.9K views a post

Views

40.0K

Likes

1.6K

Comments

8

Shares

117

SoundTikTok sound · THIS IS FOR

Promoted product

Typescale + Styler

Why it worked

The video provides a clear, concise tutorial on a common design problem (managing typography) using specific tools, appealing to designers looking for efficiency and best practices.

Summary

This video demonstrates how to create a scalable typography system in Figma using the Typescale and Styler plugins. It shows how to generate text styles based on a base size and scale type, and then convert these into variables for easy management and editing.

Structure

1Introduce the problem of manual font adjustments
2Showcase the Typescale plugin for generating text styles
3Demonstrate using the Styler plugin to create variables from styles
4Show how to apply the variable typography to text elements
5Conclude that typography is now linked to design tokens for easy management

Original caption

Tired of manually adjusting font sizes in every frame? Here’s how to create a smart, scalable typography system in Figma using Typescale + Styler 💡 #FigmaTips #UIDesign #TypographyDesign #FigmaPlugins #Typescale #StylerPlugin #DesignTokens #VariableTypography #DesignSystems #ProductDesign #UXUI #figmavariables

More from @pixelbybella

Product placement

The video demonstrates the use of two Figma plugins: Typescale and Styler, to create and manage typography variables.

On-screen text

How to create Variable Like this In 1 minute First, open Typescale plugin Plugin 1: Typescale Select a text with the typography (font) that you want Choose a base size (e.g., 16px), a scale type (e.g., Major Third), and number of steps (e.g., 6). Click Generate Text Styles It will create heading styles like H1, H2, H3, etc., based on your scale. Now lets convert the text into variables (library) Plugin 2: Styler Choose "Create Variables from Styles." Now you've created variable typography tokens 🎨 Variables are Ready to use Select any text element Go to the Design panel → Typography → Link to your variable text style. Now your typography is linked to design token, easy to scale, edit, and manage! Save for later!