2732 x 2048 The 3rd generation iPad Pro (12.9-inch) has a screen resolution of 2732 x 2048 pixels. This translates to 1024 x 1366 points (portrait) or 1366 x 1024 points (landscape). The screen size is 12.9 inches diagonally.

iPad Pro 11-inch (4th Gen): 834 x 1194 pixels (portrait). iPad Pro 12.9-inch (4th Gen): 1024 x 1366 pixels (portrait).

12.9-inch iPad Pro (2nd Generation)

The first-generation iPad Pro had two screen sizes: 9.7-inch and 12.9-inch. The 9.7-inch model had a resolution of 2048 x 1536 pixels. The 12.9-inch model had a resolution of 2732 x 2048 pixels.

12.9-inch iPad Pro (1st Generation): Screen Size: 12.9-inch diagonal Resolution: 2732 x 2048 pixels Pixel Density: 264 ppi

12.9-inch iPad Pro (2nd Generation)

The screen dimensions for the iPad Pro 12.9-inch (2nd generation) are 12.9 inches diagonally, with a resolution of 2732 x 2048 pixels. The pixel density is 264 ppi. For use in a template, you'd use the 2732 x 2048 pixel dimensions.

12.9-inch iPad Pro (3rd generation)

The iPad Pro 12.9-inch (3rd generation) screen dimensions are: 1024 x 1366 points or 2048 x 2732 pixels. For a template, these dimensions are often referred to in pixels, with a resolution of 2732 x 2048. Here's a more detailed breakdown:

Resolution: 2732 x 2048 pixels Points: 1024 x 1366 Screen Size (diagonal): 12.9 inches Height (in inches): 8.46 Width (in inches): 11.04

12.9-inch iPad Pro (4th generation)

The iPad Pro 12.9-inch (4th generation) has a display with a resolution of 2048 x 2732 pixels. When creating templates, it's crucial to use this resolution to ensure that your designs render accurately on the device, and to avoid scaling or distortion.

Additional Information:

The iPad Pro 12.9-inch (4th generation) also has a density of 264 pixels per inch (ppi). When working with images, a resolution of 72ppi or higher is recommended for the best quality. You can also set up your document in inches, and then calculate the optimal image resolution by dividing the iPad Pro's pixel width by your document's inch width.

5th Generation iPad Pro (12.9-inch)

The 5th generation iPad Pro (12.9-inch) has a screen with a resolution of 2732 x 2048 pixels, according to Apple Developer Documentation. In points, this translates to 1366 x 1024 points.

Resolution: 2732 x 2048 pixels Points: 1366 x 1024 points (portrait) Aspect Ratio: 4:3 Screen Size: 12.9 inches diagonal

6th Generation iPad Pro (12.9-inch)

The screen dimensions for the iPad Pro 12.9-inch (6th generation) are 2732 pixels x 2048 pixels. This translates to a diagonal screen size of 12.9 inches.

I'll guide you through setting up professional Figma frames for iPad design with a 4px grid system. Here's a complete step-by-step setup:

Step 1: Create Your iPad Frames

Frame Creation:

Open Figma and create a new design file
Press F (Frame tool) or click the Frame icon in the toolbar
Create these frames manually (don't use the device presets):

12.9-inch iPad Frames:

Portrait: 2048 × 2732 (name it "iPad 12.9 - Portrait")
Landscape: 2732 × 2048 (name it "iPad 12.9 - Landscape")

13-inch iPad Frames:

Portrait: 2064 × 2752 (name it "iPad 13 - Portrait")
Landscape: 2752 × 2064 (name it "iPad 13 - Landscape")

How to set exact dimensions:

After creating a frame, look at the Properties panel (right side)
In the Frame section, manually type the width and height values
Press Enter to apply

Step 2: Set Up Your 4px Base Grid

Grid Setup (for each frame):

Select your frame
In the Properties panel, scroll down to "Layout grid"
Click the "+" icon to add a grid
Configure these settings:
- Type: Grid
- Size: 4 (this creates your 4px grid)
- Color: Choose a subtle color (I recommend light blue at 10% opacity)
- Opacity: 10% (so it's visible but not distracting)

Why 4px works with 8px:

All your measurements will be multiples of 4px
When you need 8px spacing, use 2 grid squares (4×2=8)
For 16px spacing, use 4 grid squares (4×4=16)
This creates perfect harmony between fine details (4px) and major spacing (8px, 16px, 24px, 32px)

Step 3: Add Column Grids

Column Grid Setup:

With your frame still selected, click the "+" again in Layout grid
Add a second grid with these settings:
- Type: Columns
- Count: 12 (gives you maximum flexibility)
- Margin: 64 (32px on each side for breathing room)
- Gutter: 24 (space between columns)
- Color: Different color from your base grid (try light purple)
- Opacity: 8%

Column Widths (automatically calculated):

12.9" Portrait: ~152px per column
12.9" Landscape: ~201px per column
13" Portrait: ~153px per column
13" Landscape: ~204px per column

Step 4: Set Up Baseline Grid (Typography)

Baseline Grid for Text:

Add a third grid to the same frame
Configure these settings:
- Type: Rows
- Size: 24 (perfect for 24px line height)
- Color: Light green or gray
- Opacity: 6% (very subtle)

Typography Scale (based on your 4px grid):

Headings: 32px, 28px, 24px, 20px (all divisible by 4)
Body text: 16px, 14px (divisible by 4)
Small text: 12px (divisible by 4)
Line heights: 24px, 20px, 16px (following your baseline grid)

Step 5: Create a Master Template

Template Setup:

Group all your frames (select all, press Cmd+G on Mac, Ctrl+G on PC)
Name the group: "iPad Design System - 4px Grid"
Duplicate this group for each new project
Create a separate page called "Grid Templates" to store these

Pro Tips for Figma Beginners:

Essential Shortcuts:

F: Frame tool
R: Rectangle tool
T: Text tool
V: Move tool (selection)
Cmd/Ctrl + D: Duplicate
Cmd/Ctrl + G: Group
Cmd/Ctrl + [: Send backward
Cmd/Ctrl + ]: Bring forward

Grid Usage Tips:

Toggle grids on/off: Ctrl+G (or Cmd+G on Mac)
Snap to grid: Hold Cmd/Ctrl while dragging objects
Use the grid for spacing: Count grid squares for consistent spacing
Align to columns: Use the column guides for content width

Step 6: Design Principles with Your Grid

Spacing System (using your 4px grid):

4px  = 1 grid square (fine adjustments)
8px  = 2 grid squares (small spacing)
12px = 3 grid squares (medium spacing)
16px = 4 grid squares (large spacing)
24px = 6 grid squares (section spacing)
32px = 8 grid squares (major spacing)
48px = 12 grid squares (huge spacing)
64px = 16 grid squares (page margins)

Component Sizing Guidelines:

Buttons: Min height 44px (11 grid squares) for touch targets
Cards: Padding of 16-24px (4-6 grid squares)
Icons: 16px, 20px, 24px sizes (all grid-aligned)
Input fields: 48px height (12 grid squares)

Layout Examples Using Your Column Grid:

Two-column layout: 6 columns each
Three-column cards: 4 columns each
Sidebar + content: 3 columns sidebar + 9 columns content
Hero section: Full 12 columns

Quick Setup Checklist:

✅ Frames created with exact iPad dimensions ✅ 4px base grid added (10% opacity) ✅ 12-column layout grid added (8% opacity) ✅ 24px baseline grid added (6% opacity) ✅ Frames named clearly ✅ Template saved for reuse

This setup gives you a professional foundation that's pixel-perfect for iPad development and ensures your designs will translate beautifully to code using Tailwind CSS. The 4px grid system provides fine control while maintaining harmony with the 8px spacing system commonly used in development.

I'll help you create flexible Tailwind CSS templates and Figma frame setups for the 12.9-inch and 13-inch iPad variations. Let me provide both the technical specifications and practical templates.

Figma Frame Setup

12.9-inch iPad (2732 x 2048px):

Portrait: 2048 × 2732px
Landscape: 2732 × 2048px

13-inch iPad (2752 x 2064px):

Portrait: 2064 × 2752px
Landscape: 2752 × 2064px

Figma Best Practices:

Use 8px grid system for consistent spacing
Set up auto-layout frames for responsive components
Create component variants for both orientations
Use constraints (left/right/center/scale) for adaptive layouts

Now, let me create flexible Tailwind CSS templates that work beautifully on these iPad sizes:## Key Guidelines for iPad-Optimized Development

Tailwind Breakpoint Strategy:

/* Custom Tailwind Config for iPads */
screens: {
  'ipad-9': '768px',      // 9.7-inch iPad
  'ipad-11': '834px',     // 11-inch iPad (1668px ÷ 2 = 834px)
  'ipad-12': '1024px',    // 12.9-inch iPad (2048px ÷ 2 = 1024px)
  'ipad-13': '1032px',    // 13-inch iPad (2064px ÷ 2 = 1032px)
}

Responsive Design Patterns for iPads:

Two-Column Layouts: Perfect for 12.9" and 13" in landscape
Card Grids: 2-3 columns work beautifully on these screens
Sidebar Navigation: 280-320px sidebars are ideal for tablet UX
Touch-Friendly Elements: 44px minimum tap targets
Generous Spacing: Use space-y-6 and space-x-6 for breathing room

Figma Setup Best Practices:

Frame Dimensions:

12.9-inch Portrait: 2048 × 2732px
12.9-inch Landscape: 2732 × 2048px
13-inch Portrait: 2064 × 2752px
13-inch Landscape: 2752 × 2064px

Grid Systems:

8px base grid for consistent spacing
12-column layout for flexible content arrangement
24px gutters between columns
64px margins on larger screens

Component Library Recommendations:

Essential Components for iPad:

Navigation: Sidebar + top header combination
Cards: Rounded corners (12-16px), subtle shadows
Modals: Use slide-over panels instead of center modals
Tables: Optimized for touch with generous row height
Forms: Larger input fields with better spacing

Performance Considerations:

Use CSS Grid for complex layouts
Implement proper image optimization for Retina displays
Consider gesture navigation (swipe, pinch, etc.)
Test with real devices when possible

These templates provide flexible foundations that automatically adapt between the 12.9-inch and 13-inch resolutions while maintaining excellent usability across both portrait and landscape orientations. The key is using responsive grid systems and generous spacing that scales beautifully on these premium tablet displays.

Here's a table summarizing the unique iPad resolution variations from your data:

Resolution	Screen Size(s)	First Introduced	Used in Generations	Notes
2048 x 1536	9.7-inch	1st Gen (2015)	1st only	Original smaller model
2224 x 1668	10.5-inch	2nd Gen (2017)	2nd only	Mid-size model
2388 x 1668	11-inch	3rd Gen (2018)	3rd, 4th, 6th	Standard 11-inch resolution
2420 x 1668	11-inch	7th Gen (2024)	7th only	Updated 11-inch resolution
2732 x 2048	12.9-inch	1st Gen (2015)	1st, 2nd, 3rd, 4th, 6th	Standard large model resolution
2752 x 2064	13-inch	7th Gen (2024)	7th only	New larger model
1194 x 834*	11-inch	5th Gen (2021)	5th only	*Logical resolution, 264 ppi
1366 x 1024*	12.9-inch	5th Gen (2021)	5th only	*Logical resolution, 264 ppi

Key observations:

Most consistent: 2732 x 2048 was used across 5 generations for 12.9-inch models
5th Generation anomaly: Used logical resolution instead of pixel resolution
7th Generation changes: Introduced slightly higher resolutions and moved from 12.9" to 13" for the larger model
Total unique resolutions: 8 distinct resolution specifications across 7 generations