Creating typography system in Figma

preview_player
Показать описание
Good typography is good design. Most websites and apps are 90% text; that's why typography plays such an important role in UI design. In this video, I will show how to create and improve the typography system in Figma using four popular plugins: Fontpair, Typescales, Fonts Changer, and Font Fascia.

Fontpair (pairing fonts):

Typescales (creating font scale):

Font Changer (changing fonts in selected layers):

Font Fascia (finds what fonts used in design):

#figma #figmatips #figmaplugins #figmatutorial #typography
  1. Nick Babich
  2. figma
  3. figma typography
  4. figma font
  5. figma fonts
  6. fonts in ui
Рекомендации по теме
Creating typography system 0:05:25

Creating typography system in Figma

Fastest way to 0:03:37

Fastest way to create text styles in Figma

Figma Tutorial: Create 0:11:06

Figma Tutorial: Create the Perfect Typography Scale for UI & Web Projects (IN 10 MINUTES) - Part...

Typography - Ultimate 0:12:52

Typography - Ultimate Design System Breakdown (Font Sizes, Text Style Naming, Responsive Scaling)

Perfect Typography Scale 0:10:05

Perfect Typography Scale for UI Design (Exact Blueprint) | Figma Tutorial

Figma tutorial: Variables 0:12:58

Figma tutorial: Variables for typography

Creating a Design 0:09:42

Creating a Design System - Typography Basics

Figma Typography System 0:16:43

Figma Typography System & Styles: A Beginner's Tutorial to Fonts and Design Systems

Figma Design System 0:09:41

Figma Design System - Typography System (Using Styles) | Part 2 | Figma Tutorial Step-by-Step

Figma Tutorial: Create 0:10:23

Figma Tutorial: Create a RESPONSIVE Typography Scale for Mobile & Tablet - Part 2

Creating a Figma 0:21:55

Creating a Figma Design System: Typography, Spacing, and Sizing

Figma Tutorial: Responsive 0:06:05

Figma Tutorial: Responsive Typography Scale

Prepare for Figma 0:16:37

Prepare for Figma Text Variables: Start Building Your Type Scales Correctly

Typography Design System 0:06:57

Typography Design System in Figma - Beginner Guide

Variables for Typography 0:33:23

Variables for Typography in Figma - The Ultimate Guide

Text Styles in 0:03:03

Text Styles in Figma

Figma Design System: 0:10:50

Figma Design System: 04 Typography

Design System in 0:21:12

Design System in Figma: Typography Styles

Create a Figma 0:08:42

Create a Figma Design System - Type Styles Tutorial (Part 3)

How to Create 0:07:36

How to Create a Typography System for a Design System in Figma: Step-by-Step Guide

Figma Beginners Tutorial: 0:28:48

Figma Beginners Tutorial: Add Typography Scale to your Design System

Master Typography in 0:00:17

Master Typography in Figma: Quick Tips & Tricks

Figma Web and 0:25:33

Figma Web and App Design Type Styles & UI Typography Systems on Figma | UX Design System Tutoria...

Spacing - Analyzing 0:13:03

Spacing - Analyzing The Top Design Systems (Figma Spacing Variables)

Комментарии
Автор

Nick the tutorial was extremely easy to understand and to the point. Thanks for the knowledge sharing.

yugantsonawale
Автор

Nick, you're amazing. So many questions answered in 5 minutes!

xFlar
Автор

Nice one Sir! Was really straight to the point and yet detailed!

eucharia-zdch
Автор

#legend master course on a coffee break ❤

randomtopology
Автор

I want to ask something regarding this topic. Is the heading better be a different font style in contrast with the text? Is size differences not enough to make it easier for the user to read? thanks

osiris
Автор

How did you get the background in that light grey? For me the ugly dark background stays even in bright mode.

thevikingsock