{"id":1778,"date":"2022-02-25T08:00:54","date_gmt":"2022-02-25T07:00:54","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1778"},"modified":"2023-09-21T08:01:10","modified_gmt":"2023-09-21T06:01:10","slug":"turn-design-into-ios-android-apps","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/turn-design-into-ios-android-apps\/","title":{"rendered":"Turn design into iOS & Android apps"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n
\r\n

With Sketch2React we moved designers closer to React. With Stratos Tokens we gave you advanced design token & theming creation.
Now we are moving designers towards iOS & Android. All of this straight from your design app. Using easy markup, no coding skills required.<\/p>\r\n<\/blockquote>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n
\r\n
\r\n
\"\"<\/a>
Say hello to Marcode, yummy!<\/figcaption><\/figure>\r\n

Article summary (TLDR)<\/h2>\r\n

We just released a brand new companion app for Sketch<\/a> and Icons8 Lunacy<\/a> called Marcode<\/strong>.<\/a> We also have a new premium Sketch plugin, Writer<\/a>, that lets you add custom CSS code directly onto artboards and symbol masters in Sketch.<\/p>\r\n

For designers<\/h3>\r\n

Have you ever dreamt about being able to create really life-like app prototypes for iOS (Xcode<\/a>) and Android (Android Studio<\/a>)? With Marcode you can.<\/p>\r\n

For developers<\/h3>\r\n

Wouldn\u2019t it be really great to have a prototype that is already in the very same environment you are building your own apps? Not only that, many of the graphical assets are already in place?<\/p>\r\n

 <\/p>\r\n

Prototyping galore folks<\/h1>\r\n

We in Team Sketch2React are very proud to introduce the latest app in our design to code arsenal, Marcode <\/strong><\/a>for Sketch and Icons8 Lunacy. After many months of hard work, bombarding our Twitter<\/a> with previews and teasers, fine-tuning everything \u2013 we\u2019re finally there. Launch day. What a weird, wonderful feeling.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n
\r\n
\r\n
\r\n
\"\"<\/a>
Extra layer of UI love has been applied\u2026 Yes\u2026<\/figcaption><\/figure>\r\n

Hands up, all of you that actually can take a prototype out of your design app, ship it to Xcode or Android Studio and build a very life-like iOS or Android OS prototype app for your team?<\/p>\r\n

That can also be handed over to your app developers, as a kind of over the top app concept delivery? A prototype that is already in the same developing environment?<\/p>\r\n

Oh, by the way, building a PWA (Progressive Web App)? You can do that too.<\/p>\r\n

https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/02\/iterate-in-code.mp4<\/a><\/video><\/div>\r\n

These are actual iOS simulators<\/strong> running in real-time from the Xcode build exported out of Marcode, via our unique Ionic Capacitor<\/a> functionality.<\/p>\r\n

I don\u2019t see that many hands up in the air, do you?<\/strong> If you are anything like me, you should be very excited.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

\r\n
\r\n
\r\n
https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2022\/02\/HowFarMarcode.mp4<\/a><\/video><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n

What this actually means for you is that you can use something like TestFlight<\/a> to distribute your app prototypes. Huzzah!<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n
\r\n
\r\n

On-device prototyping<\/h3>\r\n

We see a massive opportunity here. In that odd grey zone between design and engineering<\/strong> where on-device prototypes are not a thing yet, but should be.<\/p>\r\n

Where designers yet haven\u2019t fully grasped how easy it actually can be. Uninformed, you will settle with whatever prototype tool you are using now.<\/p>\r\n

\r\n

Enter the new age of on-device prototyping for everyone.<\/p>\r\n<\/blockquote>\r\n

See, you don\u2019t need to be some kind of designer slash developer<\/a> slash unicorn evil wizard to pull this off anymore.<\/p>\r\n

One word. Hybrid<\/strong>.<\/p>\r\n

The power of iteration<\/h1>\r\n
\"\"<\/a>
We first introduced the Explorer view in Stratos Tokens<\/figcaption><\/figure>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
\r\n
\r\n

We took a step back and asked ourselves this simple question:<\/h3>\r\n