Figma tutorial: Variables for typography
Figma
@figmaAbout
Introducing: Figma Draw, Figma Sites, Figma Buzz, Grid, and Figma Make
Latest Posts
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
PC Gaming Essentials
AI-recommended products based on this video

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

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

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

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 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 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 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











![Create the landing page hero: Figma Design for beginners [4 of 13]](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/q3RM7W2PjUs/hqdefault.jpg)



























