Sometimes to go forward, you need to take a step back. That is precisely what we are doing with our new {prototype} component for Sketch2React Beta.

The perfect way to go out from your static design files in Sketch or Lunacy into a mockup app prototype. Let me explain how it works.

How it works

The workflow goes like this:

1. You have probably already designed something amazing
2. The page in Sketch or Lunacy needs to be named App or Start here
3. Your first artboard needs to be named Start or nothing will show up in Sketch2React Beta 2021
4. Put symbols/components or just anything else on your artboard into a new group that you call {prototype}
5. Group the contents inside your newly created {prototype} and call it something unique like e.g. Card1. Avoid the # character. 
6. Add it to export as a PNG, use @2x resolution for crisper results
7. Need to link it? Just use W for Sketch, H for Lunacy
8. Need to update it? No problemo. Every time you update your symbols, layers, whatever, the exported image asset also gets updated
9. Does it need to be fixed to the top or bottom? Use the check box in Sketch or Lunacy and you are good to go!
10. In Sketch2React Beta, download as HTML or Capacitor.js project
11. Depending on your prototype needs, you can now auto-build a prototype app for iOS, Xcode, Android or just a plain web app.

You can use this very simple .sketch file to try this out, should work splendid in latest Lunacy also.

Need to have an interactive button? Just grab any button from any of our free demo files, style it, link it and this button is now a real code button in our export 🎉

The superpowers of our new {prototype} component

• Makes a 1:1 representation of what you have in Sketch or Lunacy out to mockup code (iOS, Android, HTML etc)
• Automatic HTML linking built-in, link anything to another artboard
• Supports Fix position when scrolling property in Sketch or Lunacy
• Use {prototype} together with our other components

What to think about

What you actually get is a bunch of images that automatically stacks themselves 1:1 on how things look in your design application. That’s it. There is no dark magic converting this into real code. You get mockup code, actually still way better than just sharing the prototype from Sketch Cloud aka Workspace or Lunacy Cloud.

You still can export this as a Capacitor.js project which adds the dimension of actually building a very high (low) definition app for Xcode or Android Studio. 

• You work in 1:1 which in reality means that you will need to create a new mockup for each size you want to export e.g. one for iPhone 11, one for iPad, one for Android etc
• As soon as you put anything into {prototype} you break our otherwise 100% responsive framework

First look video

Just one more thing…

We also included a very early alpha version of our code editor plugin for Sketch in the latest Beta download. Just look inside a folder named Experimental. If you’re curious what you can do with it, read our article about it.

For now our code editor plugin comes with zero documentation, it’s an early build, a bit wonky but a really cool addition to Sketch2React. Works with stable and beta versions by the way.

That’s it, have a happy week and God Fortsättning as we say in Sweden.