I build my ideas #6 - 07/05/20

macOS on iOS, sharing code, SwiftUI for designers

macOS on iOS

It all started with a Tweet. It took on a life of its own. At the time, I was starting to think about more SwiftUI examples worth sharing. I thought to myself: “what if I recreated the macOS window experience on iPad” so I jumped into a Swift Playground.

Jordan Singer @jsngr

macOS Big Sur on iPad built in SwiftUI 🤯

As complex as it may appear, it’s entirely SwiftUI. The window (shadows and dragging support) and stoplights are just SwiftUI views. I started with Finder to get a recognizable Mac experience working.

The macOS stoplights component in SwiftUI

I decided to take it a step further and use recent SwiftUI examples I had put together by porting Control Center and System Preferences with little to no changes inside of the SwiftUI window component. I thought the cherry on top would be a web browser, so I ported the lil browser code over (almost line for line) to bring the concept to life.

Jordan Singer @jsngr

now we’re talking

Jordan Singer @jsngr

macOS Big Sur on iPad built in SwiftUI 🤯 https://t.co/OWhDGvGQEN

I put this together as an experiment to show just how powerful SwiftUI can be. It’s fun to experiment by imagining “what could be.” I encourage those who check out the code to add and extend to it!

---

Sharing code

I started sharing a lot more of the code I’ve been experimenting with. I figured the code would otherwise be sitting on my computer, and these are just experiments & me having fun. What do I have to lose? I know when I was watching the WWDC videos about iOS 14 and macOS Big Sur I was hoping that someone had posted examples online so I could give the new API’s a try without having to learn everything there is to know myself first.

It started with Mail for macOS, where my curiosity lied in finding out how to create the new sidebar in macOS Big Sur.

Jordan Singer @jsngr

it's *unreal* to me how quick this is to throw together for macOS in SwiftUI

That lead to me giving the new multi-platform SwiftUI stuff a try. A shared SwiftUI codebase to support macOS, iOS, and iPadOS? Sign me up.

Jordan Singer @jsngr

multiplatform shouldn't be this easy. Messages built in SwiftUI for macOS, iOS, and iPadOS. one codebase.

Here’s a list of all of the recent repositories and Swift Playground snippets of code I’ve shared:

• Mail (macOS)

• Messages (multi-platform)

• System Preferences (macOS)

• Control Center (macOS)

• Slack (macOS)

• Twitter (macOS)

• Wallet app (iOS, Swift Playground)

• Weather app using the lil weather api (iOS, Swift Playground)

• News app using the lil news api (iOS, Swift Playground)

• Apple Pay (iOS, Swift Playground)

• lil widgets (iOS, Swift Playground)

I’m incredibly humbled to see that sharing code has inspired others to give SwiftUI a try and build their own things. Never in my wildest dreams did I imagine this to be the result.

---

SwiftUI for designers

I started a Twitter thread about translating Figma designs over to SwiftUI.

Jordan Singer @jsngr

SwiftUI for designers 👇 This example puts into context how you can translate something you draw on the Figma canvas directly into SwiftUI. Note the layers panel Figma and SwiftUI frames for the structure. Figma: figma.com/file/4aCi2lQqg… Playground code: gist.github.com/jordansinger/1…

I hope that it can help designers visualize how something you might design in Figma can translate directly to SwiftUI so that you can give it a try yourself using Swift Playgrounds. I encourage everyone to check out the thread for some practical real-world examples.

Josh Nelson @jnelly2

@jsngr The simplicity here is remarkable. Thanks for making this probably the easiest way for a designer to visualize transitioning to code

---

Check out the latest Recreate post: Recreate the Messages App (iOS 14) - Part I

Cash App is hiring designers!

Ask me anything