Member-only story
Isometric Views in SwiftUI
SwiftUI tutorial on converting 2D Views and Images into isometric views using custom View Modifiers.
The other day I started messing around with converting 2D designs into isometric views in Figma. I thought it might be neat to create a ViewModifier in SwiftUI that does the same thing. After posting a screenshot of my work on twitter, I decided to write this tutorial.
Overview
I’ve broken the tutorial into two parts (both below):
- Applying an Isometric Transformation to a View
- Extruding an Isometric View
Before getting started, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
Throughout this tutorial, you’re going to see my best 2D square drawing of a watermelon slice. Yes…I apologize in advance, but there’s one sitting in front of me as I write this tutorial, so that’s the image you’re going to get… 😊
Converting 2D Views to Isometric Views
One of the simplest ways to transform a 2D view is to rotate it 45° and then scale its height by a factor of 0.5. Simply rotate and shrink!
