Initial commit
This commit is contained in:
Zhongwei Li
@@ -0,0 +1,456 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user