{"id":1720,"date":"2022-01-04T09:03:21","date_gmt":"2022-01-04T08:03:21","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1720"},"modified":"2022-01-04T15:59:26","modified_gmt":"2022-01-04T14:59:26","slug":"introducing-prototype-for-sketch-and-lunacy","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/introducing-prototype-for-sketch-and-lunacy\/","title":{"rendered":"Introducing {prototype} for Sketch and Lunacy"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

Sometimes to go forward, you need to take a step back. That is precisely what we are doing with our new {prototype} component <\/strong>for Sketch2React Beta<\/a>.<\/p>\r\n

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.<\/p>\r\n

\"\"<\/a>
Using our new prototype component is super easy and straight forward<\/figcaption><\/figure>\r\n
<\/div>\r\n

How it works<\/h1>\r\n

The workflow goes like this:<\/p>\r\n

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

    You can use this very simple .sketch file<\/a> to try this out, should work splendid in latest Lunacy also.<\/p>\r\n<\/blockquote>\r\n

    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 \ud83c\udf89<\/p>\r\n

    https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/auto-positions.mp4<\/a><\/video><\/div>\r\n

    The superpowers of our new {prototype} component<\/h2>\r\n