Want to Prototype in Sketch? Well now you can

Username

•

7 years ago

Published on | Prototyping: From UX to Front End — Medium Marc Andrew

It’s arrived on the Sketch shores courtesy of InVision and their fabulous Craft plugin.

<img class="rounded" src="https://cdn-images-1.medium.com/max/1200/1*HKXVPueX9VuPLtskhQnGLQ.jpeg"/></a><div class="py-6"><a class="underline text-gray-600 font-semibold" href="http://ift.tt/2rwq87T" target="_blank">Read more</a></div></div></div></div><div class="col-span-full mb-6 lg:mb-0 lg:col-span-3 order-last lg:order-last lg:block"><div class="sm:hidden block lg:block"><div class="bg-white border-gray-300 p-5 rounded-lg flex flex-row sm:flex-col"><a href="https://open.prototypr.io"><div class="relative rounded mb-2 w-full" style="height:148px"><img data-gumlet="false" alt="https://prototypr-media.sfo2.digitaloceanspaces.com/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg" loading="lazy" decoding="async" data-nimg="fill" class="md:w-auto flex-shrink-0 sm:w-full rounded-lg mr-4 object-contain" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;color:transparent" sizes="100vw" srcSet="https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=640&q=75&format=avif&compress=true&dpr=1 640w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=750&q=75&format=avif&compress=true&dpr=1 750w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=828&q=75&format=avif&compress=true&dpr=1 828w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=1080&q=75&format=avif&compress=true&dpr=1 1080w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=1200&q=75&format=avif&compress=true&dpr=1 1200w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=1920&q=75&format=avif&compress=true&dpr=1 1920w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=2048&q=75&format=avif&compress=true&dpr=1 2048w, https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=3840&q=75&format=avif&compress=true&dpr=1 3840w" src="https://prototyprio.gumlet.io/wp-content/uploads/2022/03/d0aace79-b8e3-4ea1-bfc1-6c40a21990a7.jpeg?w=3840&q=75&format=avif&compress=true&dpr=1"/></div></a><div class="flex-col sm:px-0 px-4"><a href="https://open.prototypr.io" class="block sm:mt-1"><div class="text-sm cursor-pointer leading-5 font-medium text-gray-800"><p>We're an Open Source, Web Monetized project. Learn how to build your own Web Monetized website.</p> </div></a></div></div></div><div class="hidden md:block bg-white rounded-lg mt-6 p-6 lg:mb-16"><h1 class="text-sm font-semibold mb-3">Top Stories</h1></div></div></div></div></main></div><footer><div class="max-w-[1320px] z-30 relative mx-auto px-3 md:px-3"><div class="w-full max-w-screen-xl relative mx-auto py-16"><div class="flex flex-wrap"><div class="w-full md:w-6/12"><p class="text-xl tracking-tight font-semibold">Get Prototypr Weekly</p><input class="hidden" value="hello@prototypr.io"/><p class="text-base mt-0 text-gray-700">Top articles and tools every week  💌</p><div class="rounded-md lg:mb-0"><div><div class="flex flex-col"><form class="sm:flex w-11/12 mt-5 mb-6"><div class="sm:flex-1 sm:max-w-xs w-full"><label for="Email" class="sr-only ">Enter your email</label><input id="Email" style="font-size:.875rem" type="text" placeholder="Enter your email" name="emailRequired" class="border-transparent border-solid border-2 border-gradient-br-blue-darkblue-gray-50 hover:border-gradient-tl-blue-darkblue-gray-50 gradient-border-3 w-full h-full p-3 text-gray-800 bg-white rounded-full"/></div><div class="hidden email-octopus-form-row-hp" aria-hidden="true"><input type="text" name="hp1cc5fdf6-63b5-11ea-a3d0-06b4694bee2a" tabindex="-1" autoComplete="nope"/></div><div class="flex flex-col md:ml-2"><button aria-label="Sign up for newsletter" style="height:47px" class="c-gSzqAS c-gSzqAS-gZwbYS-variant-confirm px-5 md:ml-2 mt-3 md:mt-0 rounded-full" type="">Subscribe</button></div></form></div><div class="px-1 w-10/12 mx-auto"></div></div></div><p class="text-sm text-gray-700 font-semibold mt-2"> © 2024 Prototypr, All rights reserved.</p></div><div class="w-full md:w-6/12"><div class="flex flex-wrap items-top mb-6"><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 md:px-4 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2 tracking-wide">Good Stuff</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://help.prototypr.io" target="_blank">Help</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://github.com/Prototypr" target="_blank">Open Source</a></li><li><a href="https://open.prototypr.io" target="_blank" class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base">Prototypr Open</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://twitter.com/prototypr" target="_blank">Twitter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://instagram.com/prototyprio" target="_blank">Instagram</a></li></ul></div><div class="w-full md:w-6/12 xl:w-4/12 pt-6 md:pt-0 ml-auto"><span class="block uppercase text-gray-900 text-sm font-semibold mb-2 tracking-wide">Other Resources</span><ul class="list-unstyled"><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://adobe.com/products/xd/adobe-fund.html" target="_blank">Adobe Fund for Design</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://grantfortheweb.org" target="_blank">Grant for the Web</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://interledger.org/" target="_blank">Web Monetization</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://letter.so" target="_blank">Mail by Letter</a></li><li><a class="text-gray-700 hover:text-gray-900 font-base block py-3 text-base" rel="noreferrer" href="https://prototypr.io/privacy-policy/" target="_blank">Privacy Policy</a></li></ul></div></div></div></div></div></div></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"preview":null,"post":{"id":"6414","attributes":{"title":"Want to Prototype in Sketch? Well now you can","slug":"want-to-prototype-in-sketch-well-now-you-can","content":"\u003cp\u003ePublished on \u003ca href=\"http://ift.tt/2rwq87T\"\u003e| Prototyping: From UX to Front End \u0026mdash; Medium\u003c/a\u003e Marc Andrew \u003cimg alt=\"\" src=\"http://ift.tt/2qBGYmp\"\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eIt’s arrived on the Sketch shores courtesy of InVision and their fabulous Craft plugin.\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003ciframe src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F217893619\u0026amp;url=https%3A%2F%2Fvimeo.com%2F217893619\u0026#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F635225324_1280.jpg\u0026amp;key=d04bfffea46d4aeda930ec88cc64b87c\u0026amp;type=text%2Fhtml\u0026amp;schema=vimeo\" width=\"1920\" height=\"1080\" frameborder=\"0\"\u003e\u003ca href=\"http://ift.tt/2pQ5va9\"\u003ehttp://ift.tt/2pQ5va9\u003c/a\u003e\u003c/iframe\u003e\u003c/p\u003e\n\u003cp\u003eBig props have to go out to my good friends \u003ca href=\"https://twitter.com/abynim\"\u003eAby\u003c/a\u003e and \u003ca href=\"https://twitter.com/turbobabr\"\u003eAndrey\u003c/a\u003e who started out with this little plugin called \u003cem\u003eSilver Flows\u003c/em\u003e that blew peoples minds at the time. So good in fact that InVision acquired them, so they could integrate it into their Craft plugin suite.\u003c/p\u003e\n\u003cp\u003eI was impressed with the product Aby and Andrey had brought to us then, and I’m equally as impressed in the final product that has been unleashed on those salivating Sketch users.\u003c/p\u003e\n\u003cp\u003eI feel it bridges the gap between, well, not Prototyping, and using a Prototyping tool such as \u003cem\u003eFlinto\u003c/em\u003e,\u003cem\u003e Principle\u003c/em\u003e or \u003cem\u003eFramer\u003c/em\u003e, where yes, they have a lot more features than the aforementioned plugin, but whose learning curve, to a beginner, can feel that bit steeper to them.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eAgain, well done to all involved, they’ve created a great plugin that sits confidently in the Sketch eco-system.\u003c/em\u003e\u003c/p\u003e\n\u003cblockquote\u003e\u003cp\u003e\u003cem\u003eWhen your designs are right at your fingertips, you can make faster, smarter decisions about the next phase — your prototype. Today, we’re thrilled to share a powerful new tool to make your workflow more continuous and contextual, keeping you in the zone and empowering you and your team to create better products, faster.\u003c/em\u003e\u003c/p\u003e\u003c/blockquote\u003e\n\u003cp\u003e\u003cem\u003eThanks for reading the article,\u003c/em\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eMarc\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eRead the original article \u003c/em\u003e\u003ca href=\"http://ift.tt/2pYZdjU\"\u003e\u003cem\u003ehere\u003c/em\u003e\u003c/a\u003e\u003cem\u003e.\u003c/em\u003e\u003c/p\u003e\n\u003ch3\u003eIf you’re a UI/UX Designer you really need to check out my new project…\u003c/h3\u003e\n\u003cp\u003e\u003ca href=\"https://kissmyui.com/\"\u003e\u003cimg alt=\"\" src=\"http://ift.tt/2pFrP2g\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch4\u003eYour UI/UX needs, all in one place.\u003c/h4\u003e\n\u003cp\u003eCheck it out, and join my Mailing List to receive a \u003cstrong\u003e\u003cem\u003eFree\u003c/em\u003e\u003c/strong\u003e copy of my guide to improving your UI skills with \u003cstrong\u003eSketch\u003c/strong\u003e…\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://kissmyui.com/\"\u003ewww.kissmyui.com\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"http://ift.tt/2pQrldK\" width=\"1\" height=\"1\" alt=\"stat?event=post.clientViewed\u0026amp;referrerSou\"\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e\u003ca href=\"http://ift.tt/2qBDQXD\"\u003eWant to Prototype in Sketch? Well now you can\u003c/a\u003e was originally published in \u003ca href=\"http://ift.tt/2cAqCpx\"\u003ePrototyping: From UX to Front End\u003c/a\u003e on Medium, where people are continuing the conversation by highlighting and responding to this story.\u003c/p\u003e\n","excerpt":"\u003cp\u003ePublished on | Prototyping: From UX to Front End \u0026mdash; Medium Marc Andrew It’s arrived on the Sketch shores courtesy of InVision and their fabulous Craft plugin. http://ift.tt/2pQ5va9 Big props have to go out to my good friends Aby and Andrey who started out with this little plugin called Silver Flows that blew peoples minds at [\u0026hellip;]\u003c/p\u003e\n","likeCount":{"total":0,"like":0,"fire":0,"unicorn":0},"likes":{"data":[]},"seo":{"metaDesc":"","canonical":"https://prototypr.io/blog/want-to-prototype-in-sketch-well-now-you-can/","opengraphModifiedTime":null,"opengraphPublishedTime":null,"opengraphTitle":"Want to Prototype in Sketch? Well now you can - Prototypr | Prototyping","opengraphDescription":"Published on | Prototyping: From UX to Front End \u0026mdash; Medium Marc Andrew It’s arrived on the Sketch shores courtesy of InVision and their fabulous Craft plugin. http://ift.tt/2pQ5va9 Big props have to go out to my good friends Aby and Andrey who started out with this little plugin called Silver Flows that blew peoples minds at [\u0026hellip;]","opengraphImage":null},"outgoingLinks":[],"link":null,"date":"2017-05-20T11:47:36.000Z","legacyAttributes":{"link":"http://ift.tt/2rwq87T","imgUrl":null,"ogImage":"https://cdn-images-1.medium.com/max/1200/1*HKXVPueX9VuPLtskhQnGLQ.jpeg"},"ogImage":{"opengraphImage":null},"tags":{"data":[]},"legacyFeaturedImage":{"id":"4999","mediaItemUrl":null,"thumb":null},"featuredImage":{"data":null},"relatedNews":[{"localizations":{"data":[]},"type":"article","title":"Adobe acquires Figma, cue the memes 🤪","date":"2022-09-15T13:27:00.000Z","slug":"adobe-figma-meme","legacyFeaturedImage":null,"legacyAttributes":null,"seo":{"opengraphImage":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/b4834aafa71e71cdb0230f4218b06b8d.jpeg"},"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/b4834aafa71e71cdb0230f4218b06b8d.jpeg","formats":{"small":{"ext":".jpeg","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8c512393ccf3a7bc5985ec5167ddc442.jpeg","hash":"8c512393ccf3a7bc5985ec5167ddc442","mime":"image/jpeg","name":"small_Fcsqb5pWQAAzPIK.jpeg","path":null,"size":31.41,"width":500,"height":324},"thumbnail":{"ext":".jpeg","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8f25f76de5b5ae31588ab001884b89f8.jpeg","hash":"8f25f76de5b5ae31588ab001884b89f8","mime":"image/jpeg","name":"thumbnail_Fcsqb5pWQAAzPIK.jpeg","path":null,"size":10.81,"width":241,"height":156}}}}}},{"localizations":{"data":[]},"type":"article","title":"From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill","date":"2022-06-06T15:00:00.000Z","slug":"from-photography-to-nft-twisted-landscapes-with-nate-hill","legacyFeaturedImage":null,"legacyAttributes":null,"seo":{"opengraphImage":null},"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/8d8070381d986c2f80b500cdb024f518.png","formats":{"large":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/660d5848c774dd76de059e2754a7344f.png","hash":"660d5848c774dd76de059e2754a7344f","mime":"image/png","name":"large_Crossover Series NFTs.png","path":null,"size":453.71,"width":1000,"height":500},"small":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/c0b4b2eaabf40327313a30b374c2ac2a.png","hash":"c0b4b2eaabf40327313a30b374c2ac2a","mime":"image/png","name":"small_Crossover Series NFTs.png","path":null,"size":125.2,"width":500,"height":250},"medium":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/2346793057dd9a854f38fca4ef47a068.png","hash":"2346793057dd9a854f38fca4ef47a068","mime":"image/png","name":"medium_Crossover Series NFTs.png","path":null,"size":262.53,"width":750,"height":375},"thumbnail":{"ext":".png","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/63771b3a5ed23d97c829bbb601cb13ef.png","hash":"63771b3a5ed23d97c829bbb601cb13ef","mime":"image/png","name":"thumbnail_Crossover Series NFTs.png","path":null,"size":35.4,"width":245,"height":123}}}}}},{"localizations":{"data":[]},"type":"article","title":"Still can’t get a UX job? Give up.","date":"2023-01-09T12:23:50.810Z","slug":"still-cant-get-a-ux-job-give-up","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/99cea6cfdc5230419363f2ada9bdfb43.jpg"},"legacyAttributes":null,"seo":{"opengraphImage":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/99cea6cfdc5230419363f2ada9bdfb43.jpg"},"featuredImage":{"data":null}},{"localizations":{"data":[]},"type":"article","title":"Sticking to UI/UX trends is a losing strategy","date":"2022-12-29T11:26:02.485Z","slug":"sticking-to-uiux-trends-is-a-losing-strategy","legacyFeaturedImage":{"mediaItemUrl":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/3335f7802dbd74db63d7af49c6a88662.webp"},"legacyAttributes":null,"seo":{"opengraphImage":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/3335f7802dbd74db63d7af49c6a88662.webp"},"featuredImage":{"data":{"attributes":{"url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/1d87545fb25cc1fd4f863555b25a02d1.webp","formats":{"large":{"ext":".webp","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/262e3e5a6313a73bb36e0f1b6b8fada3.webp","hash":"262e3e5a6313a73bb36e0f1b6b8fada3","mime":"image/webp","name":"large_featuredImage","path":null,"size":47.21,"width":1000,"height":631},"small":{"ext":".webp","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/06c24c8a0b29e59cbd78dbbd9014ba5d.webp","hash":"06c24c8a0b29e59cbd78dbbd9014ba5d","mime":"image/webp","name":"small_featuredImage","path":null,"size":20.03,"width":500,"height":315},"medium":{"ext":".webp","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/de99cd14c358326b74493e8354407d87.webp","hash":"de99cd14c358326b74493e8354407d87","mime":"image/webp","name":"medium_featuredImage","path":null,"size":32.87,"width":750,"height":473},"thumbnail":{"ext":".webp","url":"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/1bd2e2b72dd3fa02686f1b12f5acdffb.webp","hash":"1bd2e2b72dd3fa02686f1b12f5acdffb","mime":"image/webp","name":"thumbnail_featuredImage","path":null,"size":8.66,"width":245,"height":155}}}}}}],"author":{"data":null}}},"domain":"ift.tt","link":"http://ift.tt/2rwq87T","postDate":"\"2017-05-20T11:47:36.000Z\"","morePosts":[]},"__N_SSG":true},"page":"/blog/[slug]","query":{"slug":"want-to-prototype-in-sketch-well-now-you-can"},"buildId":"D0Ej6YAwrP8jFlkAhHkNz","isFallback":false,"isExperimentalCompile":false,"dynamicIds":[64069,20595,30817,50242,8301],"gsp":true,"locale":"en-US","locales":["en-US","es-ES"],"defaultLocale":"en-US","scriptLoader":[]}</script></body></html>