Isometric illustration represents 3D objects in 2D without perspective distortion, creating a clean, technical aesthetic popular in UI design, infographics, gaming, and product visualization. This guide teaches you the fundamentals and step-by-step techniques for both Adobe Illustrator and Figma.
At Boundev, our design team creates isometric illustrations for product interfaces, marketing materials, and technical documentation. This tutorial shares the techniques we use to produce professional isometric artwork.
Core Principles of Isometric Design
Isometric projection follows strict geometric rules:
Horizontal Angle
Between Axes
No Vanishing Point
Parallel Lines Stay Parallel
Understanding Isometric Projection
Unlike traditional perspective drawing where parallel lines converge at vanishing points, isometric projection keeps all parallel lines parallel. This creates a unique aesthetic where objects appear as if viewed from an elevated 30-degree angle.
Left Face
Shear -30°, Rotate -30°
Top Face
Rotate 30°, Shear -30°
Right Face
Shear 30°, Rotate 30°
Isometric Design in Adobe Illustrator
Setting Up an Isometric Grid
Line Segment Method
Draw a vertical line. Duplicate multiple times (Alt + Right Arrow). Group the lines, duplicate the group, and rotate by 60°. Repeat to create -60° lines. Convert to guides (View → Guides → Make Guides).
Rectangular Grid Tool
Alt-click on artboard with Rectangular Grid tool. Set equal width/height (e.g., 350px) with 17 horizontal and vertical dividers. Transform: rotate 45°, then scale vertically to 60%.
Smart Guides Setup
Enable Smart Guides (View → Smart Guides). Go to Preferences → Smart Guides and set Construction Guides to 30-degree angles for automatic snapping alignment.
Transforming Shapes to Isometric
| Face | Step 1: Scale | Step 2: Shear | Step 3: Rotate |
|---|---|---|---|
| Right Face | 100% × 86.062% | 30° | -30° |
| Left Face | 100% × 86.062% | -30° | 30° |
| Top Face | 100% × 86.062% | -30° | -30° (after rotate) |
Pro Tip: Save as Actions
Save transformation steps as Actions (Window → Actions) to automate isometric conversions. Create three actions—Left Face, Right Face, and Top Face—for instant one-click transformations.
Workflow: Draw 2D shape → Select → Run Action → Position on grid
Using 3D Extrude & Bevel
For quicker results, use Illustrator's built-in 3D effects:
Isometric Design in Figma
Setting Up the Grid
Community Templates
Search Figma Community for "Isometric Grid 60°" templates. Duplicate to your drafts and lock the grid layer for consistent alignment.
Manual Creation
Create evenly-spaced lines rotated at 30° and -30°. Set grid layer opacity to 30% in Layer settings for comfortable drawing.
The Figma Isometric Transformation Hack
Figma has a clever technique for creating isometric shapes without complex math:
Draw Your 2D Shape
Create a square or any flat shape you want to transform into isometric perspective.
Rotate 45 Degrees
Select the shape and rotate it 45° to create a diamond orientation.
Group or Frame
Group the rotated shape (Ctrl/Cmd + G). Figma establishes a new origin point for the container.
Scale Height to 57.73%
Resize the group vertically, multiplying height by 0.5773 (57.73%). This creates the exact 30-degree isometric angle.
Create Sides
Ungroup and duplicate. Rotate the duplicate 60° to create side faces, or flip horizontally for the opposite side.
Useful Figma Plugins
Ease Isometric
Automates 2D to isometric conversion with customizable angles and scaling. Supports grouped objects.
Best for: Quick conversionsFast Isometric
One-click isometric transformation with multiple projection options. Lightweight and fast.
Best for: Simple shapesPerspective Toolkit
Put UI mockups or images into perspective with isometric skewing or full 3D perspective. Non-destructive.
Best for: UI mockupsColor and Shading Best Practices
Creating Depth with Shading
Apply different shades to each face to create a convincing 3D effect. Assume a light source from the top-left:
Top Face
Lightest shade (receives most light)
Left Face
Medium shade (partial light)
Right Face
Darkest shade (shadow side)
Common Isometric Design Applications
UI/Product Design
Device mockups, app screens, and product interfaces presented in isometric view for marketing materials.
Architecture & Interiors
Room layouts, building diagrams, and floor plans in isometric projection for clear spatial understanding.
Infographics
Data visualization, process flows, and technical documentation using isometric icons and illustrations.
Gaming & Animation
Game environments, character design, and animated isometric scenes for interactive experiences.
Frequently Asked Questions
What is isometric illustration?
Isometric illustration is a method of representing 3D objects in 2D without perspective distortion. It uses 30-degree angles (120° between axes), keeps parallel lines parallel, and has no vanishing point. This creates a clean, technical aesthetic popular in UI design, infographics, gaming, and product visualization.
What angle is used in isometric design?
Isometric design uses a 30-degree angle from the horizontal plane. The angle between any two of the three axes is exactly 120 degrees. Vertical lines remain vertical while horizontal lines are drawn at 30-degree angles, creating the characteristic isometric look.
How do I create isometric shapes in Illustrator?
In Adobe Illustrator, transform 2D shapes to isometric using: Scale (100% × 86.062%), Shear (±30°), and Rotate (±30°). For the right face: shear 30°, rotate -30°. For left face: shear -30°, rotate 30°. Alternatively, use Effect → 3D → Extrude & Bevel and select an isometric position preset.
How do I create isometric shapes in Figma?
In Figma, rotate your 2D shape 45°, group it, then scale the group height to 57.73% (multiply by 0.5773). This creates an exact 30-degree isometric angle. Alternatively, use plugins like Ease Isometric or Fast Isometric for one-click conversions.
How do I add depth to isometric illustrations?
Add depth through consistent shading: apply the lightest shade to the top face (receiving most light), medium shade to the left face, and darkest shade to the right face (shadow side). Use gradients subtly for smoother transitions, and maintain consistent light source direction across all objects.
What are the best plugins for isometric design in Figma?
Top Figma plugins for isometric design include: Ease Isometric (automated conversions with customizable angles), Fast Isometric (quick one-click transformations), and Perspective Toolkit (for putting UI mockups into perspective). Search the Figma Community for free isometric grid templates to speed up your workflow.
Need Professional Isometric Illustrations?
Boundev's design team creates custom isometric illustrations for products, marketing, and technical documentation. Let's bring your vision to life.
Get Design Help