Neumorphic Design in SwiftUI

Mohammad Azam
The Startup
Published in
3 min readMay 27, 2020

--

Neumorphic Design is a new take on Skeomorphic design, which was used when iPhone first came out. In Skeomorphic design elements were styled to resemble real world objects. Neumorphic design allows the elements to blend into the background.

Neumorphic design always reminds me of Terminator 2 villain. He was able to walk through objects and blends in with other objects like he was made of thick liquid (Mercury).

https://lh3.googleusercontent.com/proxy/1s8N1S-qg4LZecWtCUgL_FmsiXrq7KoXmVI-cjJGdywnthFFFX6Fr_5ejpRkbBrawjuwjmBfMos3396S9vE9kLQU1xsQzydhLjhvvRwvXizzG0BzFyUD9qJh_hQcGBPgnesmPQu5qMevkUmjfFKAQCTvSZQC4bS7XlpF

Creating the Neumorphic Button

We will start our journey by implementing the look and feel of the Neumorphic Button. Add a brand new file called “NeumorphicImageButton” which conforms to the View protocol. In order to create NeumorphicImageButton, you must pass in the systemName for the image and the onTap closure. The onTap closure will be fired when the user taps on the button.

Next, we create a Button view inside the NeumorphicImageButton implementation. An…

--

--

Mohammad Azam
The Startup

Lead instructor at a coding bootcamp. Top iOS mobile instructor on Udemy. Author of multiple books and international speaker. azamsharp.school