I build my ideas from Jordan Singer

Share this post

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

ibuildmyideas.substack.com

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

macOS on iOS, sharing code, SwiftUI for designers

Jordan Singer
Jul 6, 2020
5
1
Share
Share this post

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

ibuildmyideas.substack.com

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.

Twitter avatar for @jsngr
Jordan Singer @jsngr
macOS Big Sur on iPad built in SwiftUI 🤯
Image
12:09 AM ∙ Jul 2, 2020
884Likes80Retweets

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.

Twitter avatar for @jsngr
Jordan Singer @jsngr
now we’re talking
Image
Twitter avatar for @jsngr
Jordan Singer @jsngr
macOS Big Sur on iPad built in SwiftUI 🤯 https://t.co/OWhDGvGQEN
1:31 AM ∙ Jul 2, 2020
1,138Likes145Retweets

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.

Twitter avatar for @jsngr
Jordan Singer @jsngr
it's *unreal* to me how quick this is to throw together for macOS in SwiftUI
Image
10:59 PM ∙ Jun 27, 2020
1,179Likes50Retweets

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.

Twitter avatar for @jsngr
Jordan Singer @jsngr
multiplatform shouldn't be this easy. Messages built in SwiftUI for macOS, iOS, and iPadOS. one codebase.
Image
Image
Image
3:00 PM ∙ Jun 29, 2020
1,607Likes131Retweets

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.

Twitter avatar for @jsngr
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…
Image
Image
4:23 PM ∙ Jun 29, 2020
324Likes30Retweets

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.

Twitter avatar for @jnelly2
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
4:29 PM ∙ Jun 29, 2020

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

Cash App is hiring designers!

Ask me anything

5
1
Share
Share this post

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

ibuildmyideas.substack.com
1 Comment
Avery Carter
Writes Learning new things
Jul 19, 2020Liked by Jordan Singer

Super cool work. Love this newsletter you got!

Expand full comment
Reply
Top
New
Community

No posts

Ready for more?

© 2023 Jordan Singer
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing