Figma tutorial: Variables for typography

Figma April 16, 2024
Video Thumbnail

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...
Beelink EQR5 Mini PC, AMD Ryzen 5 5650U(7nm, 6C/12T) up to 4.2GHz, Mini Computer 32GB DDR4 RAM 1TB PCIe3.0x4 SSD, Micro PC 4K@60Hz Dual HDMI Display/WiFi6/BT5.2/Office/Home/HTPC/W-11 Pro

Beelink EQR5 Mini PC, AMD Ryzen 5 5650U(7nm, 6C/12T) up to 4.2GHz, Mini Computer 32GB DDR4 RAM 1TB PCIe3.0x4 SSD, Micro PC 4K@60Hz Dual HDMI Display/WiFi6/BT5.2/Office/Home/HTPC/W-11 Pro

(425)
$419.00
FREE delivery Sun, Aug 10
Loading...
BOSGAME E2 Mini PC AMD Ryzen 5 3550H, 16GB DDR4 RAM 512GB SSD, Mini Desktop Computer Support 4K Dual HDMI Display/WiFi5/BT5/Gigabit Ethernet for Home/Office

BOSGAME E2 Mini PC AMD Ryzen 5 3550H, 16GB DDR4 RAM 512GB SSD, Mini Desktop Computer Support 4K Dual HDMI Display/WiFi5/BT5/Gigabit Ethernet for Home/Office

(79)
$236.00
FREE delivery Sun, Aug 10
Loading...
Beelink SER5 Mini PC, AMD Ryzen 5 5500U(up to 4.0GHz) 6C/12T, Mini Computer 16GB DDR4 RAM 500GB NVMe SSD, Mini Desktop Computer 4K@60Hz Dual Display HDMI&DP WiFi6/BT5.2/WOL/HTPC/W-11 Pro

Beelink SER5 Mini PC, AMD Ryzen 5 5500U(up to 4.0GHz) 6C/12T, Mini Computer 16GB DDR4 RAM 500GB NVMe SSD, Mini Desktop Computer 4K@60Hz Dual Display HDMI&DP WiFi6/BT5.2/WOL/HTPC/W-11 Pro

(346)
$359.00
Prime
Loading...
TRIGKEY S5 Mini PC, AMD Ryzen 5 Mini Computer 5500U (6C/12T, Up to 4.0 GHz) 16GB DDR4 3200MHz + 500GB PCIE3.0 NVME SSD, Small PC 4K Triple Displays, WiFi 6+BT5.2, DP, HDMI, USB3.2

TRIGKEY S5 Mini PC, AMD Ryzen 5 Mini Computer 5500U (6C/12T, Up to 4.0 GHz) 16GB DDR4 3200MHz + 500GB PCIE3.0 NVME SSD, Small PC 4K Triple Displays, WiFi 6+BT5.2, DP, HDMI, USB3.2

(285)
$369.00
FREE delivery Sun, Aug 10
Loading...
GIGABYTE - AORUS Elite 16 Gaming Laptop - 165Hz 2560x1600 WQXGA - NVIDIA GeForce RTX 5070 - Intel Core Ultra 9 275HX - 1TB SSD with 32GB DDR5 RAM - Windows 11 Home AD (AORUS Elite 16 BWHC3USC64SH)

GIGABYTE - AORUS Elite 16 Gaming Laptop - 165Hz 2560x1600 WQXGA - NVIDIA GeForce RTX 5070 - Intel Core Ultra 9 275HX - 1TB SSD with 32GB DDR5 RAM - Windows 11 Home AD (AORUS Elite 16 BWHC3USC64SH)

(0)
$9,050.69
FREE delivery Aug 28 - Sep 8Only 3 left in stock.
Loading...
HP Victus 15.6" 144Hz FHD Gaming Laptop, Intel i5-12450H, 32GB RAM, 1TB PCIe SSD, NVIDIA GeForce RTX 3050, Backlit Keyboard, HD Webcam, Win 11, Blue, 256GB Docking Station Set

HP Victus 15.6" 144Hz FHD Gaming Laptop, Intel i5-12450H, 32GB RAM, 1TB PCIe SSD, NVIDIA GeForce RTX 3050, Backlit Keyboard, HD Webcam, Win 11, Blue, 256GB Docking Station Set

(117)
$1,149.00
FREE delivery Jun 26 - Jul 8
Loading...
Acer Swift X 14" FHD Laptop, AMD Ryzen 7 5825U, NVIDIA GeForce RTX 3050Ti, 16GB RAM, 512GB SSD, Windows 11 Home

Acer Swift X 14" FHD Laptop, AMD Ryzen 7 5825U, NVIDIA GeForce RTX 3050Ti, 16GB RAM, 512GB SSD, Windows 11 Home

(247)
$1,804.11
Loading...
Corsair Vengeance LPX 32GB (2 X 16GB) DDR4 3200 (PC4-25600) C16 1.35V Desktop Memory - Black
Best Seller

Corsair Vengeance LPX 32GB (2 X 16GB) DDR4 3200 (PC4-25600) C16 1.35V Desktop Memory - Black

(16,675)
$112.99$101.69
FREE delivery Sun, Aug 10
500+ bought in past month
Loading...
Samsung 990 EVO Plus - 4TB PCIe Gen4. X4, Gen5. X2 NVMe 2.0 - M.2 Internal SSD, Speed Up to 7,250 MBs, Upgrade Storage for PC-Laptops, HMB Technology and Intelligent Turbowrite (MZ-V9S4T0B/AM)

Samsung 990 EVO Plus - 4TB PCIe Gen4. X4, Gen5. X2 NVMe 2.0 - M.2 Internal SSD, Speed Up to 7,250 MBs, Upgrade Storage for PC-Laptops, HMB Technology and Intelligent Turbowrite (MZ-V9S4T0B/AM)

(1,811)
$359.99$341.99
FREE delivery Tue, Jun 17
100+ bought in past month
Loading...
SAMSUNG EVO Select Micro SD-Memory-Card + Adapter, 128GB microSDXC 160MB/s Full HD & 4K UHD, UHS-I, U3, A2, V30, for Android Smartphones, Tablets, Nintendo-Switch (MB-ME128SA/AM) [Canada Version]

SAMSUNG EVO Select Micro SD-Memory-Card + Adapter, 128GB microSDXC 160MB/s Full HD & 4K UHD, UHS-I, U3, A2, V30, for Android Smartphones, Tablets, Nintendo-Switch (MB-ME128SA/AM) [Canada Version]

(12,472)
$19.99$18.59
FREE delivery Sun, Aug 10 on your first order
400+ bought in past month
Loading...
Samsung EVO Select Micro SD Memory Card + Adapter, 256GB microSDXC 160MB/s Full HD & 4K UHD, UHS-I, U3, A2, V30, for Android Smartphones, Tablets, Nintendo-Switch (MB-ME256SA/AM) [Canada Version]

Samsung EVO Select Micro SD Memory Card + Adapter, 256GB microSDXC 160MB/s Full HD & 4K UHD, UHS-I, U3, A2, V30, for Android Smartphones, Tablets, Nintendo-Switch (MB-ME256SA/AM) [Canada Version]

(11,340)
$34.99
FREE delivery Sat, Jun 14 on your first order
200+ bought in past month
Loading...
AINOPE Phone Holder for Car Vent 2025 Gravity Air Vent Car Phone Holder Mount for iPhone 16 Pro Max with Vent Clip Hand Free Cell Phone Car Mount for iPhone 16 Plus Samsung S25 Ultra Car Accesorries

AINOPE Phone Holder for Car Vent 2025 Gravity Air Vent Car Phone Holder Mount for iPhone 16 Pro Max with Vent Clip Hand Free Cell Phone Car Mount for iPhone 16 Plus Samsung S25 Ultra Car Accesorries

(29,179)
$19.99$18.17
FREE delivery Tue, Jun 17 on your first order
2K+ bought in past month
Loading...
Corsair RM1000e Fully Modular Low-Noise ATX Power Supply - Dual EPS12V Connectors - 105°C-Rated Capacitors - 80 Plus Gold Efficiency - Modern Standby Support - Black

Corsair RM1000e Fully Modular Low-Noise ATX Power Supply - Dual EPS12V Connectors - 105°C-Rated Capacitors - 80 Plus Gold Efficiency - Modern Standby Support - Black

(41)
$219.19$204.66
FREE delivery Oct 15 - 22
Loading...
Corsair RM1200x Shift Fully Modular ATX Power Supply - Modular Side Interface - ATX 3.1 & PCIe 5.1 Compliant - Zero RPM Fan Mode - 105°C-Rated Capacitors - 80 Plus Gold Efficiency - Black, 1200W

Corsair RM1200x Shift Fully Modular ATX Power Supply - Modular Side Interface - ATX 3.1 & PCIe 5.1 Compliant - Zero RPM Fan Mode - 105°C-Rated Capacitors - 80 Plus Gold Efficiency - Black, 1200W

(25)
$254.98$203.98
FREE delivery Wed, Oct 8
50+ bought in past month
Loading...
Corsair CP-9020140-UK HX1200 1200 W 80+ Platinum Fully Modular Power Supply Unit - Black

Corsair CP-9020140-UK HX1200 1200 W 80+ Platinum Fully Modular Power Supply Unit - Black

(179)
$1,240.77
FREE delivery Oct 14 - 21
Loading...
Corsair SF1000 (2024) Fully Modular Low Noise 80 Plus Platinum ATX Power Supply – ATX 3.1 Compliant – PCIe 5.1 Ready – SFX-to-ATX Bracket Included – Black

Corsair SF1000 (2024) Fully Modular Low Noise 80 Plus Platinum ATX Power Supply – ATX 3.1 Compliant – PCIe 5.1 Ready – SFX-to-ATX Bracket Included – Black

(23)
$284.99
FREE delivery Wed, Oct 8
Loading...
Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black
Best Seller

Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black

(17,871)
$27.98$22.38
FREE delivery Tue, Oct 14 on your first order
500+ bought in past month
Loading...
Logitech K250 Bluetooth Keyboard with Numpad, Easy Connectivity, Compact Wireless Keyboard Made with Recycled Plastic, Spill-Resistant, Comfortable Keys - Windows/MacOS - Graphite
Best Seller

Logitech K250 Bluetooth Keyboard with Numpad, Easy Connectivity, Compact Wireless Keyboard Made with Recycled Plastic, Spill-Resistant, Comfortable Keys - Windows/MacOS - Graphite

(49)
$19.99$18.59
FREE delivery Mon, Aug 18 on your first order
Loading...
Logitech G305 LIGHTSPEED Wireless Gaming Mouse, Hero 12K Sensor, 12,000 DPI, Lightweight, 6 Programmable Buttons, 250h Battery Life, On-Board Memory, PC/Mac - Black

Logitech G305 LIGHTSPEED Wireless Gaming Mouse, Hero 12K Sensor, 12,000 DPI, Lightweight, 6 Programmable Buttons, 250h Battery Life, On-Board Memory, PC/Mac - Black

(21,223)
$44.98
FREE delivery Tue, Oct 14
1K+ bought in past month
Loading...
Logitech K400 Plus Wireless Touch TV Keyboard With Easy Media Control and Built-in Touchpad, HTPC Keyboard for PC-connected TV, Windows, Android, Chrome OS, Laptop, Tablet - Black
Best Seller

Logitech K400 Plus Wireless Touch TV Keyboard With Easy Media Control and Built-in Touchpad, HTPC Keyboard for PC-connected TV, Windows, Android, Chrome OS, Laptop, Tablet - Black

(38,516)
$39.98$35.98
FREE delivery Thu, Sep 4
500+ bought in past month
Loading...
Logitech G502 HERO High Performance Wired Gaming Mouse, HERO 25K Sensor, 25,600 DPI, RGB, Adjustable Weights, 11 Programmable Buttons, On-Board Memory, PC / Mac, Black
Best Seller

Logitech G502 HERO High Performance Wired Gaming Mouse, HERO 25K Sensor, 25,600 DPI, RGB, Adjustable Weights, 11 Programmable Buttons, On-Board Memory, PC / Mac, Black

(54,445)
$49.98$44.98
FREE delivery Tue, Oct 14
1K+ bought in past month
Loading...
LG 24U411A-B 23.8" FHD (1920x1080) IPS Display Computer Monitor, 120Hz Refresh Rate, sRGB 99% (Typ.), USB-C, Reader Mode & Flicker Safe, Dynamic Action Sync, Black Stabilizer, Slim Stand Base, Black
Best Seller

LG 24U411A-B 23.8" FHD (1920x1080) IPS Display Computer Monitor, 120Hz Refresh Rate, sRGB 99% (Typ.), USB-C, Reader Mode & Flicker Safe, Dynamic Action Sync, Black Stabilizer, Slim Stand Base, Black

(2,610)
$96.95
FREE delivery Tue, Oct 14
2K+ bought in past month
Loading...
Portable Air Conditioners, wobuzhi Evaporative Air Cooler with LCD Screen, Fan Speed&Spray, 7 RGB Lights,USB Powered,1-8H Timer, Personal Air Conditioners, Portable Air Conditioners for Home Office

Portable Air Conditioners, wobuzhi Evaporative Air Cooler with LCD Screen, Fan Speed&Spray, 7 RGB Lights,USB Powered,1-8H Timer, Personal Air Conditioners, Portable Air Conditioners for Home Office

(32)
$39.99
FREE delivery Sun, Aug 10
200+ bought in past month
Loading...
llano RGB Laptop Cooling Pad with Powerful Turbofan Gaming Cooler Radiator with Infinitely Variable Speed, Touch Control, LCD Screen, 3-Port USB Hub, Seal Foam for Notebook Computer 15-19in

llano RGB Laptop Cooling Pad with Powerful Turbofan Gaming Cooler Radiator with Infinitely Variable Speed, Touch Control, LCD Screen, 3-Port USB Hub, Seal Foam for Notebook Computer 15-19in

(1,404)
$129.99
Prime
200+ bought in past month
Loading...
Neck Fan with Cooling Plate,Portable Neck Fan Rechargeable Battery Powered,Bladeless Personal Air Conditioner Wearable Neck Cooler Fans,USB Electric Quiet Necklace AC Fans for Travel Outdoor Black

Neck Fan with Cooling Plate,Portable Neck Fan Rechargeable Battery Powered,Bladeless Personal Air Conditioner Wearable Neck Cooler Fans,USB Electric Quiet Necklace AC Fans for Travel Outdoor Black

(35)
$39.99
600+ bought in past month