gh-xtone-ai-development-tools-frontend-nextjs-development/skills/figma-design-analyzer/references/typography-extraction-guide.md

Typography Extraction Guide

This guide provides methods for extracting and translating typography properties from Figma to React + Tailwind CSS.

Typography Properties

1. Font Family

Figma Location:

• Text properties panel → Font family dropdown

Extraction:

• Note the exact font family name
• Check if it's a system font, web font, or custom font

Tailwind Mapping:

// Default Tailwind fonts
font-sans → font-family: ui-sans-serif, system-ui, sans-serif...
font-serif → font-family: ui-serif, Georgia, serif...
font-mono → font-family: ui-monospace, monospace...

// Custom fonts (defined in tailwind.config.js)
font-custom → font-family: 'CustomFont', sans-serif

Important: Check the project's tailwind.config.js for custom font definitions:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'custom': ['CustomFont', 'sans-serif'],
      }
    }
  }
}

2. Font Size

Figma Location:

• Text properties panel → Font size value (px)

Extraction:

• Read the pixel value directly

Tailwind Mapping:

Figma (px)	Tailwind Class	rem	Notes
12px	text-xs	0.75rem	Extra small
14px	text-sm	0.875rem	Small
16px	text-base	1rem	Base size
18px	text-lg	1.125rem	Large
20px	text-xl	1.25rem	Extra large
24px	text-2xl	1.5rem	2x large
30px	text-3xl	1.875rem	3x large
36px	text-4xl	2.25rem	4x large
48px	text-5xl	3rem	5x large
60px	text-6xl	3.75rem	6x large
72px	text-7xl	4.5rem	7x large
96px	text-8xl	6rem	8x large
128px	text-9xl	8rem	9x large

Custom sizes:

// If exact match not available
fontSize: 22px → className="text-[22px]"

3. Font Weight

Figma Location:

• Text properties panel → Font weight dropdown (Thin, Light, Regular, Medium, Bold, etc.)

Extraction:

• Note the weight name or numeric value

Tailwind Mapping:

Figma Weight	Numeric	Tailwind Class
Thin	100	font-thin
Extra Light	200	font-extralight
Light	300	font-light
Regular/Normal	400	font-normal
Medium	500	font-medium
Semi Bold	600	font-semibold
Bold	700	font-bold
Extra Bold	800	font-extrabold
Black	900	font-black

4. Line Height (Leading)

Figma Location:

• Text properties panel → Line height value

Types:

• Auto: Figma calculates automatically
• Pixel value: Fixed line height (e.g., 24px)
• Percentage: Relative to font size (e.g., 150%)

Extraction:

1. Note the line height type
2. For pixel values: Read directly
3. For percentage: Calculate pixel value = font-size × percentage

Tailwind Mapping:

Line Height	Tailwind Class	Value
Tight	leading-tight	1.25
Snug	leading-snug	1.375
Normal	leading-normal	1.5
Relaxed	leading-relaxed	1.625
Loose	leading-loose	2
No line height	leading-none	1

Pixel-specific values:

// Fixed pixel line height
lineHeight: 24px → className="leading-[24px]"

Relative values:

// When line height is 1.5x font size
className="leading-normal"

// Custom relative value
lineHeight: 1.75 → className="leading-[1.75]"

5. Letter Spacing (Tracking)

Figma Location:

• Text properties panel → Letter spacing value

Types:

• Pixel value: Fixed spacing (e.g., 0.5px)
• Percentage: Relative to font size (e.g., 5%)

Extraction:

1. Note the value and type
2. For percentage: Convert to em units (5% = 0.05em)

Tailwind Mapping:

Letter Spacing	Tailwind Class	Value
Very tight	tracking-tighter	-0.05em
Tight	tracking-tight	-0.025em
Normal	tracking-normal	0
Wide	tracking-wide	0.025em
Wider	tracking-wider	0.05em
Widest	tracking-widest	0.1em

Custom values:

// Pixel value
letterSpacing: 0.5px → className="tracking-[0.5px]"

// Em value
letterSpacing: 0.03em → className="tracking-[0.03em]"

6. Text Alignment

Figma Location:

• Text properties panel → Alignment buttons (left, center, right, justified)

Tailwind Mapping:

// Horizontal alignment
Left → className="text-left"
Center → className="text-center"
Right → className="text-right"
Justified → className="text-justify"

7. Text Color

Figma Location:

• Text properties panel → Fill color

Extraction:

1. Get the color value (hex, RGB, or variable)
2. Check if it's a Figma variable (design token)
3. Note opacity if present

Tailwind Mapping:

Using Tailwind colors:

// Named colors
#000000 → className="text-black"
#FFFFFF → className="text-white"
#EF4444 → className="text-red-500"
#3B82F6 → className="text-blue-500"

Using arbitrary colors:

// Hex color
#1A202C → className="text-[#1A202C]"

// RGB color
rgb(26, 32, 44) → className="text-[rgb(26,32,44)]"

Using design tokens (Figma variables):

// If Figma variable: "text/primary"
// Should map to CSS variable or Tailwind custom color
className="text-primary"

With opacity:

// 50% opacity
className="text-black/50"
className="text-blue-500/50"

8. Text Decoration

Figma Location:

• Text properties panel → Decoration buttons (underline, strikethrough)

Tailwind Mapping:

Underline → className="underline"
Strikethrough → className="line-through"
None → className="no-underline"

9. Text Transform

Figma Location:

• Text properties panel → Text case dropdown

Tailwind Mapping:

Uppercase → className="uppercase"
Lowercase → className="lowercase"
Capitalize → className="capitalize"
None → className="normal-case"

10. Text Overflow

Figma Location:

• Text properties panel → Truncate option (...)

Tailwind Mapping:

// Single line truncate
className="truncate"

// Multi-line clamp (2 lines)
className="line-clamp-2"

// Multi-line clamp (3 lines)
className="line-clamp-3"

Figma Text Styles vs. React Implementation

Extracting Text Styles

Figma allows designers to create reusable "Text Styles." When analyzing text:

1. Check if a Text Style is applied

   • If yes: Note the style name (e.g., "Heading 1", "Body Regular")
   • This indicates a reusable pattern

2. Extract individual properties

   • Even if a style is applied, extract individual properties
   • This helps create consistent React components

Creating Reusable Typography Components

If the same text style is used multiple times, consider creating a reusable component:

// Typography.tsx
export const Heading1 = ({ children, className = '' }: Props) => (
  <h1 className={`text-4xl font-bold leading-tight ${className}`}>
    {children}
  </h1>
);

export const BodyText = ({ children, className = '' }: Props) => (
  <p className={`text-base font-normal leading-normal ${className}`}>
    {children}
  </p>
);

Complete Typography Analysis Workflow

When analyzing text in Figma:

1. Identify the text element

   • Note its semantic meaning (heading, paragraph, label, etc.)

2. Extract font properties

   • Font family
   • Font size
   • Font weight
   • Line height
   • Letter spacing

3. Extract color and decoration

   • Text color
   • Text decoration (underline, strikethrough)
   • Text transform (uppercase, lowercase)

4. Extract alignment and overflow

   • Text alignment
   • Truncation behavior

5. Map to Tailwind classes

   • Use standard Tailwind classes when possible
   • Use arbitrary values [] for custom values

6. Choose appropriate HTML tag

   • h1-h6 for headings
   • p for paragraphs
   • span for inline text
   • label for form labels

Common Typography Patterns

Headings

// Heading 1
<h1 className="text-4xl font-bold leading-tight text-gray-900">
  Main Heading
</h1>

// Heading 2
<h2 className="text-3xl font-semibold leading-snug text-gray-800">
  Section Heading
</h2>

// Heading 3
<h3 className="text-2xl font-medium leading-normal text-gray-700">
  Subsection Heading
</h3>

Body Text

// Regular body text
<p className="text-base font-normal leading-relaxed text-gray-700">
  Lorem ipsum dolor sit amet...
</p>

// Small text
<p className="text-sm font-normal leading-normal text-gray-600">
  Small description text
</p>

// Large text
<p className="text-lg font-normal leading-relaxed text-gray-800">
  Emphasized body text
</p>

Labels and Captions

// Form label
<label className="text-sm font-medium text-gray-700">
  Input Label
</label>

// Caption
<span className="text-xs font-normal text-gray-500">
  Image caption or helper text
</span>

Links

// Default link
<a href="#" className="text-blue-600 underline hover:text-blue-800">
  Link text
</a>

// Link without underline
<a href="#" className="text-blue-600 hover:underline">
  Link text
</a>

Responsive Typography

Consider how typography should adapt to different screen sizes:

{/* Responsive font size */}
<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold">
  Responsive Heading
</h1>

{/* Responsive line height */}
<p className="leading-normal md:leading-relaxed lg:leading-loose">
  Responsive paragraph
</p>

Design Tokens and Figma Variables

If the design uses Figma variables for typography:

1. Extract variable names

   • e.g., "fontSize.heading.large", "color.text.primary"

2. Map to CSS variables or Tailwind config

   • Check tailwind.config.js for custom tokens
   • Use semantic class names

3. Example:

// Figma variable: "text/heading/large"
// Maps to: text-heading-lg (defined in tailwind.config.js)
<h1 className="text-heading-lg font-bold">
  Heading
</h1>

Pitfalls to Avoid

1. Don't hardcode colors: Use design tokens when available
2. Don't use arbitrary values unnecessarily: Prefer Tailwind's scale for consistency
3. Don't forget line height: It affects vertical rhythm significantly
4. Don't ignore font loading: Ensure custom fonts are properly loaded
5. Don't skip semantic HTML: Use h1-h6, p, etc. appropriately for accessibility
6. Don't forget responsive typography: Typography should adapt to screen size

Tips

• Use Figma's Inspect Panel: Hover over text to see all properties at once
• Check for Text Styles: Reusable styles indicate design system patterns
• Verify font availability: Ensure custom fonts are available in the project
• Consider accessibility: Ensure sufficient color contrast (WCAG AA: 4.5:1 for normal text)
• Use semantic HTML: Choose the right tag for the content's meaning, not just appearance
• Document custom values: If using arbitrary values like text-[17px], document why
• Test on real devices: Typography can look different on various screens