Figma tutorial: Variables for typography

Figma April 16, 2024
Video Thumbnail
Figma Logo

Figma

@figma

About

Introducing: Figma Draw, Figma Sites, Figma Buzz, Grid, and Figma Make

Video Description

Figma is free to use. Sign up here: https://bit.ly/3msp0OV Variables and styles support a wide spectrum of design systems by boosting workflows and easing long-term management. We're excited to introduce variables for typography in Figma! In this video, we’ll create variables and incorporate them into an existing typography system. Then, we’ll use modes to power a responsive design. Grab a copy of the community file to follow along: https://www.figma.com/community/file/1298672675597243186/habitz-design-system-with-variables Check out Marcin Wichary's video to learn more fonts and font weight: https://youtu.be/kVD-sjtFoEI If you haven’t already, make sure you’ve caught up with the basics of variables, variable modes, and text styles. Check out the resources below ⬇️ Figma video tutorials: Intro to variables: https://youtu.be/1ONxxlJnvdM Tokens, variables, and styles: https://youtu.be/JyCmacSyDY4 Intro to design systems course playlist: https://www.youtube.com/playlist?list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A Help center articles: Guide to variables: https://bit.ly/3Nh7JaK Overview of variables: https://bit.ly/44bD2dG Create and manage variables: https://bit.ly/447B9im Apply variables to designs: https://bit.ly/3qVsnWo Modes for variables: https://bit.ly/3qS3GKk The difference between variables and styles: https://help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles Video chapters: 00:00 Intro 01:22 Apply variables to font family 05:04 Apply variables to font weight 08:00 Apply variables to font size and line height 10:00 Set up modes for responsive designs 12:20 Outro ____________________________________________________ Find us on ⬇️ X (formerly Twitter): https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

You May Also Like

PC Gaming Essentials

AI-recommended products based on this video

Loading...
HP EliteDesk 805 G9 Business SFF Desktop, AMD Ryzen 5 8500G, 32GB DDR5 RAM, 1TB SSD, HDMI, DisplayPort, RJ-45, Wi-Fi, Windows 11 Pro, Black, Bundle with ADATA UC310 64GB USB Flash Drive

HP EliteDesk 805 G9 Business SFF Desktop, AMD Ryzen 5 8500G, 32GB DDR5 RAM, 1TB SSD, HDMI, DisplayPort, RJ-45, Wi-Fi, Windows 11 Pro, Black, Bundle with ADATA UC310 64GB USB Flash Drive

(3)
669.00
PrimeFREE delivery June 13 - 17.
Loading...
acer Predator Helios Neo 18 Gaming Laptop, Intel i7-14700HX, NVIDIA GeForce RTX 4070, 18" WQXGA 2560 x 1600 165Hz Display, 64GB DDR5, 4TB Gen 4 SSD, Backlit Keyboard, Windows 11 Pro & MS Office Pro

acer Predator Helios Neo 18 Gaming Laptop, Intel i7-14700HX, NVIDIA GeForce RTX 4070, 18" WQXGA 2560 x 1600 165Hz Display, 64GB DDR5, 4TB Gen 4 SSD, Backlit Keyboard, Windows 11 Pro & MS Office Pro

(34)
$2,499.99
FREE delivery Jun 17 - 20
Loading...
Redragon RGPS-850W 80+ Gold 850 Watt ATX 3.0 & PCIe 5.0 Fully Modular Power Supply w/ 80 Plus Gold Certified, Compact 160mm Size, Smart ECO Low Noise RGB Fan, 100% Japanese Capacitors, Full Mod Cables

Redragon RGPS-850W 80+ Gold 850 Watt ATX 3.0 & PCIe 5.0 Fully Modular Power Supply w/ 80 Plus Gold Certified, Compact 160mm Size, Smart ECO Low Noise RGB Fan, 100% Japanese Capacitors, Full Mod Cables

(1,550)
114.99
PrimeFREE delivery Saturday, June 14
200+ bought in past month
Loading...
acer Predator Helios Neo 18 Gaming Laptop, Intel i7-14700HX, NVIDIA GeForce RTX 4070, 18" WQXGA 2560 x 1600 165Hz Display, 64GB DDR5, 4TB Gen 4 SSD, Backlit Keyboard, Windows 11 Pro & MS Office Pro

acer Predator Helios Neo 18 Gaming Laptop, Intel i7-14700HX, NVIDIA GeForce RTX 4070, 18" WQXGA 2560 x 1600 165Hz Display, 64GB DDR5, 4TB Gen 4 SSD, Backlit Keyboard, Windows 11 Pro & MS Office Pro

(34)
$2,499.99
FREE delivery Jun 17 - 20
Loading...
acer Nitro V 15 Gaming Laptop, Intel i9-13900H Up to 5.4GHz, GeForce RTX 4060, 15.6" 144 Hz IPS Display, 64 GB DDR5, 4 TB SSD, Wi-Fi 6, Backlit Keyboard, Windows 11 Pro, Gaming Mouse, 256GB UFD

acer Nitro V 15 Gaming Laptop, Intel i9-13900H Up to 5.4GHz, GeForce RTX 4060, 15.6" 144 Hz IPS Display, 64 GB DDR5, 4 TB SSD, Wi-Fi 6, Backlit Keyboard, Windows 11 Pro, Gaming Mouse, 256GB UFD

(2,753)
$1,899.99
FREE delivery Tomorrow, Jun 12Arrives before Father's Day
Loading...
acer Nitro V16 Gaming Laptop, Microsoft Office 2024 Lifetime License, 16" WUXGA 165Hz, AMD Ryzen 7 8845HS Up to 5.10 GHz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Backlit Keyboard, Win 11 Pro

acer Nitro V16 Gaming Laptop, Microsoft Office 2024 Lifetime License, 16" WUXGA 165Hz, AMD Ryzen 7 8845HS Up to 5.10 GHz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Backlit Keyboard, Win 11 Pro

(0)
$1,769.99
FREE delivery Jun 17 - 20
Loading...
acer Nitro V Gaming Laptop, 15.6" FHD IPS 144 Hz Display, Intel 14-Core i9-13900H, 64 GB DDR5 RAM, 4 TB SSD, GeForce RTX 4060, Wi-Fi 6, Backlit Keyboard, Windows 11 Pro, with Designed Accessories

acer Nitro V Gaming Laptop, 15.6" FHD IPS 144 Hz Display, Intel 14-Core i9-13900H, 64 GB DDR5 RAM, 4 TB SSD, GeForce RTX 4060, Wi-Fi 6, Backlit Keyboard, Windows 11 Pro, with Designed Accessories

(2)
$1,899.99$1,861.99
FREE delivery Fri, Jun 13Arrives before Father's Day
Loading...
LG 32UR500K-B Ultrafine 32-inch 4K UHD (3840x2160) Computer Monitor HDR10 Built-in Speaker x2 OnScreen Control Reader Mode Flicker Safe Borderless Design HDMIx2 DisplayPort Black

LG 32UR500K-B Ultrafine 32-inch 4K UHD (3840x2160) Computer Monitor HDR10 Built-in Speaker x2 OnScreen Control Reader Mode Flicker Safe Borderless Design HDMIx2 DisplayPort Black

(95)
329.99
FREE delivery June 14 - 16
200+ bought in past month