457 lines
11 KiB
Markdown
457 lines
11 KiB
Markdown
# 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:**
|
||
```tsx
|
||
// 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:
|
||
```js
|
||
// 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:**
|
||
```tsx
|
||
// 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:**
|
||
```tsx
|
||
// Fixed pixel line height
|
||
lineHeight: 24px → className="leading-[24px]"
|
||
```
|
||
|
||
**Relative values:**
|
||
```tsx
|
||
// 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:**
|
||
```tsx
|
||
// 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:**
|
||
```tsx
|
||
// 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:**
|
||
```tsx
|
||
// Named colors
|
||
#000000 → className="text-black"
|
||
#FFFFFF → className="text-white"
|
||
#EF4444 → className="text-red-500"
|
||
#3B82F6 → className="text-blue-500"
|
||
```
|
||
|
||
**Using arbitrary colors:**
|
||
```tsx
|
||
// Hex color
|
||
#1A202C → className="text-[#1A202C]"
|
||
|
||
// RGB color
|
||
rgb(26, 32, 44) → className="text-[rgb(26,32,44)]"
|
||
```
|
||
|
||
**Using design tokens (Figma variables):**
|
||
```tsx
|
||
// If Figma variable: "text/primary"
|
||
// Should map to CSS variable or Tailwind custom color
|
||
className="text-primary"
|
||
```
|
||
|
||
**With opacity:**
|
||
```tsx
|
||
// 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:**
|
||
```tsx
|
||
Underline → className="underline"
|
||
Strikethrough → className="line-through"
|
||
None → className="no-underline"
|
||
```
|
||
|
||
### 9. Text Transform
|
||
|
||
**Figma Location:**
|
||
- Text properties panel → Text case dropdown
|
||
|
||
**Tailwind Mapping:**
|
||
```tsx
|
||
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:**
|
||
```tsx
|
||
// 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:
|
||
|
||
```tsx
|
||
// 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
|
||
|
||
```tsx
|
||
// 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
|
||
|
||
```tsx
|
||
// 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
|
||
|
||
```tsx
|
||
// 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
|
||
|
||
```tsx
|
||
// 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:
|
||
|
||
```tsx
|
||
{/* 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:**
|
||
```tsx
|
||
// 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
|