Responsive Typography With Variables | Figma Tutorial

Summary

In this tutorial, the presenter introduces Figma's new feature that enables responsive text through the use of typography variables. They demonstrate how to create and organize local variables for typeface, weight, and font size, and then connect these to text styles for dynamic adjustments. The video also showcases changing typefaces and creating responsive designs for different devices, like desktops and mobiles, by adjusting the variables accordingly. Viewers are guided through the process with practical examples, making it easy to implement these features in their own projects.

Takeaways

• 📝 Figma has introduced a new feature allowing for responsive text through the use of variables for typography.
• 🎨 Users can now connect text style properties to variables, including typeface, weight, font size, line height, letter spacing, and paragraph spacing.
• 🔍 The process begins by creating local variables organized into collections and groups for typeface family, weight, and font size.
• 📚 String variables are used to define typeface names, while number variables are used for defining font sizes.
• 🔑 Variables can be duplicated to create different styles, allowing for the use of multiple typefaces within a project.
• 🔄 Users can modify text styles by changing the values of their connected variables, which updates all associated text layers.
• 📲 The script demonstrates how to create responsive font sizes for different devices, such as desktop, tablet, and mobile.
• 📱 Responsive design is achieved by setting different font sizes for each device mode, which can be easily switched in Figma.
• 🔠 Changing the typeface for different modes or devices is also possible, showcasing the flexibility of the new feature.
• 🛠️ The tutorial provides a step-by-step guide on how to implement these new features, from creating variables to connecting them to text styles.
• 👍 The video encourages viewers to like and subscribe for more design tutorials, highlighting the educational value of the content.

Q & A

What is the main feature of the new Figma update discussed in the video?

The main feature of the new Figma update is the ability to make text responsive using variables for typography.

Why was using text styles not possible with variables before the update?

Before the update, text styles could not be connected to variables, which limited the customization and responsiveness of typography in Figma projects.

What are the different typography properties that can now be connected to variables in Figma?

The different typography properties that can now be connected to variables include typeface, weight, font size, line height, letter spacing, and paragraph spacing.

How does the video demonstrate creating a new collection for typography variables?

The video demonstrates creating a new collection by going to local variables, naming it 'typography', and then creating groups for typeface family, weight, and font size to organize the variables.

What type of variable is created for the typeface family, and why?

A string variable is created for the typeface family because it is used to define the typeface name, which is a textual value.

How does the video guide the process of connecting variables to text styles?

The video guides the process by showing how to edit text styles, and then connect the typeface, weight, and font size to the corresponding variables created in the 'typography' collection.

What is the advantage of using multiple typeface families in variables as shown in the video?

Using multiple typeface families in variables allows for greater flexibility and easier management of different fonts across various text styles within a project.

How can the weight of the text be adjusted using variables in Figma, as per the video?

The weight of the text can be adjusted by creating string variables for different weights like 'regular', 'medium', 'semi bold', and 'bold', and then connecting these variables to the respective text styles.

What does the video suggest for organizing font size variables?

The video suggests creating number variables for different font sizes and organizing them into a group named 'size' for better management.

How can the responsiveness of text be achieved for different devices as shown in the video?

The responsiveness of text can be achieved by creating different modes like 'desktop' and 'mobile' within the size group, and setting different font sizes for each mode to adapt to various device screen sizes.

What is the benefit of being able to change the typeface and weight in different modes as demonstrated in the video?

The benefit is that it allows designers to create a more tailored and optimized user experience for different devices, ensuring that typography is appropriately scaled and styled for each mode.

Outlines

00:00

📝 Introduction to Figma's Responsive Text Update

The video introduces a new update in Figma that allows for responsive text through the use of variables in typography. The host demonstrates how to utilize this feature by creating variables for font size, weight, line height, and other typography properties. They explain the process of creating local variables, organizing them into groups for typeface, weight, and font size, and then connecting these variables to the text styles in a project. The video promises to show how to make text responsive and change typography properties dynamically.

05:02

🔧 Setting Up Typography Variables in Figma

This paragraph details the process of setting up typography variables within Figma. The host guides viewers through creating a 'typography' collection with groups for typeface family, weight, and font size. For each group, string variables for typeface names and weight, as well as number variables for font sizes, are created. The explanation includes how to duplicate variables for different weights and font sizes, ensuring that they are named correctly to match the text styles they will be connected to. The host also shows how to connect these newly created variables to the text styles' properties, enabling dynamic changes to typography across the project.

10:04

📱 Making Text Responsive for Different Devices

The host explains how to make text responsive for various devices by creating different modes within the 'size' group of local variables. They demonstrate changing font sizes for desktop and mobile views, showing how the text scales down when switching to a mobile frame in Figma. The video also touches on the ability to change typefaces for different modes, such as using one typeface for desktop and another for mobile. The host emphasizes the ease and speed of making these adjustments, highlighting the flexibility and efficiency of Figma's new responsive text feature.

🎉 Conclusion and Call to Action

In the concluding paragraph, the host wraps up the tutorial by summarizing the key points covered in the video. They invite viewers to apply the techniques learned to their own projects and encourage them to like and subscribe for more design tutorials. The host expresses gratitude for watching and looks forward to connecting with the audience in future videos, emphasizing the value of the new responsive text feature in enhancing design workflows within Figma.

Keywords

💡Responsive Text

Responsive text in design means that text adjusts dynamically to different screen sizes and devices. In the video, the update allows text to adapt its size, weight, and other properties for better readability and aesthetics across various devices, like desktops and mobile phones.

💡Variables

Variables in Figma are placeholders that store values which can be reused and changed globally. The video explains how Figma's new feature lets users create variables for typography, allowing for consistent and easily adjustable text styles across a project.

💡Typography

Typography refers to the style, arrangement, and appearance of text. The video focuses on new Figma features that enhance typography by allowing variables for font family, weight, size, and other properties, making text styles more flexible and responsive.

💡Text Styles

Text styles in Figma are predefined styles for text that can be reused throughout a project. The video shows how users can now link these styles to variables, making it easier to manage and update text properties consistently across different elements.

💡Font Family

Font family refers to a set of fonts that share a common design but vary in attributes like weight and style. The video demonstrates how to create variables for different font families (e.g., display and text) and apply them to text styles to streamline font management.

💡Weight

Weight in typography describes the thickness of the characters in a font, such as regular, bold, or semi-bold. The video explains how to create string variables for different weights and apply them to text styles, allowing for easy adjustments and consistency.

💡Font Size

Font size is the size of the characters in a text, typically measured in points. The video shows how to create number variables for different font sizes and link them to text styles, enabling responsive adjustments across various devices.

💡Local Variables

Local variables in Figma are specific to a project and can be used to store values for properties like font size, weight, and family. The video guides users on creating and organizing local variables for typography to make text management more efficient.

💡Modes

Modes in Figma allow different sets of variable values for different contexts, such as desktop and mobile views. The video illustrates how to create and switch between modes to ensure text styles are responsive and appropriate for various devices.

💡Collection

A collection in Figma is a group of related variables organized together. The video describes creating a typography collection to group variables for font family, weight, and size, making it easier to manage and apply these settings across a project.

Highlights

Figma has released an update enabling responsive text through the use of typography variables.

The update allows connection of variables to typeface, weight, font size, line height, letter spacing, and paragraph spacing.

A demonstration of creating local variables for typography is provided, including organizing them into groups.

Creating string variables for typeface families and defining names such as 'Plus Jakarta Sans'.

The ability to use multiple typefaces by creating additional variables.

Creating weight variables using string variables with aliases like 'regular', 'medium', 'semi bold', and 'bold'.

Creating font size variables as number variables with different sizes like 'SM', 'MD', 'LG', 'XL', '2XL', and '3XL'.

Connecting the created variables to text style properties in Figma.

Demonstration of changing font size dynamically by adjusting the value in local variables.

Introduction to creating responsive font sizes for different devices such as desktop, tablet, and mobile.

How to modify the typeface of text across different text styles by changing the value of a single variable.

The process of making text styles responsive by adjusting font sizes for different device modes.

An example of how to switch between different typefaces for desktop and mobile modes.

The ease and speed of adjusting text properties for responsive design in Figma.

A call to action for viewers to like and subscribe for more design tutorials.

Transcripts

figma has finally released a new

exciting update which enables us to make

our text responsive and that is

variables for typography in today's

video I'm going to show you everything

you need to know about this new feature

and you learn how to make your text

responsive using variables let's dive in

all right here is one of my projects and

usually for my projects I use text stle

because up until now I couldn't use

variables for my font sizes but that's

no longer a limitation here as you can

see I have these textiles I have three

display textiles and I have three text

textiles you may use a different naming

convention it doesn't matter what

matters is the process I'm going to show

you so here for this hero section I used

my text Styles as you can see each of

these text layers is connected to one of

my text Styles however if I go ahead and

show you the properties of my text

Styles you can see that they are not

connected to any variables but we are

going to change we are going to create a

few variables that we could connect to

all these properties the new figma

update allows you to connect variables

to your type face here also you could

connect your variables to the weight to

font size which is so exciting I know

you've been waiting for this feature to

line height to letter spacing and

paragraph spacing so basically you can

connect your variables to all of these

typography properties but in this video

I'm just going to show you how you can

connect a variable to your type face to

the weight and to the font size so if

you're ready let's get it started first

of all I'm going to head over to local

variables and I'm going to create a new

collection here and I'm going to name it

typography inside this typography

collection we need to create a few

groups to keep everything organized okay

we need one group for our type face

family we need another group for our

weight and another group for the font

size okay let's start with our type face

family here I'm going to click on create

variable and I'm going to create a

string variable because actually we are

going to Define our type face name here

so here to create our group I'm going to

type type

face

slasham slash display because as I

showed you here I have two font families

here display and text you may name it

heading body Etc it doesn't matter so

here I created this type face group and

inside I have this family group all

right okay for the name I'm going to

leave it as display but here we need to

define the type face name all right for

this project I'm going to use the plus

Jakarta Sans type face so I'm just going

to type plus Jakarta Sans make sure to

double check the spelling it's so

important now I'm going to go to the

family group here and I'm going to right

click here duplicate this variable and

this time I'm going to type text and the

value is going to be the same because

I'm going to use the same type face for

all my text Styles however I created

this additional variable to show you how

you can use multiple type faces when you

are using variables so you'll find out

why I created this one by the end of

this video all right our family

variables are ready now let's move on to

our weight variables okay I'm going to

go to type face and I'm going to create

again a string variable for the weight

property you can either use a string

variable or a number variable what do I

mean by that if I head over to my text

Styles here as you can see I've used

four different weights regular medium

semi bold and bold each of these weights

has a unique number value as well for

example 800 500 200 okay you can either

use those number values or you can use

their aliases like regular medium semi

bold and bold if you don't use many many

different weights in your projects I

highly recommend to stick with these

names it's going to be much easier for

for you to keep everything organized

okay so here I'm going to create a

string variable and I'm going to name it

regular and the value is going to be

regular as well now we need to create

another group so I'm just going to right

click on it hit new group with selection

and I'm just going to call it weight

like that now I'm going to duplicate

this one and I'm going to name it medium

copy it and paste it here again the

spelling matters otherwise figma cannot

connect it to the proper weight of your

type face okay so keep that in mind I'm

going to duplicate it this one is going

to be semi Bold and the last one is

going to be bold all right great our

weight group is also done now it's time

to create our font size variables I'm

going to go to type face and I'm going

to create a number variable and here I'm

going to type SM I'm going to duplicate

it this one is going to be MD let's

duplicate it this one is going to be LG

duplicate this one is going to be X x

large duplicate it this one is going to

be 2x large and finally we need to have

3x large okay I just created six number

variables why because here I have six

different font sizes all right what

about the values for the small one I'm

going to type 14 as you can see the font

size of my text style is 14 the next one

is going to be 16 the next one is going

to be 20 next one is going to be 30 30

six and finally 60 all right great now

I'm going to hold down the shift key on

my keyboard and select all these

variables right click on one of them and

hit new group with selection and just

name it

size perfect now it's time to go ahead

and connect these variables to the

properties of our text Styles okay so

what I'm going to do here is head over

to my text Styles and from here I'm

going to click on this little icon edit

style and I'm going to start by

connecting my type face to my type face

variable okay so I'm just going to click

here click on this icon and from here

I'm going to choose type face family

display then the weight should be

connected to regular and the font size

should be connected to 3XL just like

that now I'm going to go ahead and

repeat the same thing for every single

one of these text Styles and I'm going

to fast forward this process okay all

right for my text family I'm I'm going

to show you something here we need to

set the type face to text instead of

display okay it's so important because

as I said I'm going to show you how you

can modify that later all right it's

done I've just connected all the

variables we created to my text Styles

properties so now let's say I want to

change the font size of this headline

okay what I can do is go to local

variables I can go to size and I can

just change this one 3XL okay okay I'm

going to change it to let's say 72 for

now and as you can see it's immediately

changed however the interesting part is

yet to come I'm going to show you how

you can create responsive font sizes for

different devices for example for

desktop tablet and mobile okay because

usually for different devices we use

different font sizes as well for example

on mobile devices we may use smaller

titles but before I show you that I'm

going to show you how you can change the

type face of your text here here we used

one type face for all our text Styles

right for the display and text family

but now let's say you decide to change

the type face for your text family okay

for the description for smaller text

layers in that case since we used two

different families for our text Styles

we can simply head over to our text

variable instead of display and simply

change its value okay let's say you want

to use the inter type face instead of

this plus charta sand face so I'm just

going to type enter and just look what

happens when I press enter did you see

that now all these three text styles are

using this inter type face now let's say

you want to change the heading type face

as well I can simply change it to enter

or any other type face there we go it's

interesting isn't it all right now it's

time to actually show you how you can

make these text Styles responsive if I

go to the size group here I can create

another mod

right next to this one and I'm going to

name it mobile and I'm going to name

this one desktop I'm not going to change

these three small font sizes but let's

change these three display font sizes

for example this one could be changed to

40 instead of 60 this one could be

changed to 30 and this one could be

changed to 24 now let me show you how it

works here we have the desktop version

of this project okay I haven't designed

the mobile version of it but I'm going

to to show you how it works if I select

this desktop frame and I head over to

the layer section I'll see this Icon by

default it set to Auto okay I'm going to

set it to desktop and nothing changed

that's fine because we are in the

desktop mode and figma is using all the

values of the desktop mode for this

desktop version now I'm going to hit a

on my keyboard and I'm going to pick one

of these phone frames like this one and

let's say you want to take this

container I'm going to copy it paste it

inside this one and you want to design

the mobile version of this project okay

I'm going to make this container a bit

smaller like this if I select this

headline you can see that it's still

using display XL Bold and the font size

is still 60 but look what happens if I

select this phone frame head over to

layer and just connect it to our mobile

mode like that all these text layers

have been scaled down because now if I

select one of these text layers it's

still using display Excel bold however

since we are in the mobile mode it's

using the smaller value that we just set

here in our local variables okay so

right now it's using 40 for the title

and these are intact because we didn't

change them for the mobile mode now I

can go ahead and adjust all the padding

and just make the container a bit

smaller like this and align everything

like that it's so quick isn't it you can

also change the type face in different

modes although it's not recommended I'm

just going to show you as an example

here if I go to type Bas as you can see

now I have two modes desktop mobile and

let's say for mobile I'm going to use a

different type face okay so here I'm

just going to change the type face to

plus Jakarta sense and just look what

happens now now we are using the inter

type face on the desktop version and the

plus Jakarta Sense on the mobile version

it's so interesting isn't it thank you

so much for for watching this video if

you found it helpful please hit the like

button and subscribe to my channel for

More Design tutorials have a great day

and see you next time