<p>Published on <a href="https://blog.prototypr.io/introducing-design-components-90d9527be694?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Supernova </p>
<h4><strong>Learn how to enhance your designs with the power of the new Supernova Sketch plugin</strong></h4>
<p>Since the <a href="https://producthunt.com/posts/supernova-studio/">absolutely unbelievable launch</a> two weeks ago, we’ve been heads down coding and resolving issues, responding to thousands of people pouring in from all over the globe, building the greatest community.</p>
<p>But we are builders, we’ll never stop creating new and sweet stuff, and today we are ready to roll out our first two brand new features — <strong>persistent components</strong> right within Sketch, and the option to <strong>refresh already existing designs</strong>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*POs8e9fXkl_RQQPnTKLQmw.png">Persistent components right within Sketch using Supernova plugin</p>
<h3><strong>Introducing Refresh</strong></h3>
<p>Refresh is a brand new option in Supernova that allows anyone — be it designer or developer — to <strong>merge changes done to the original Sketch file</strong>. This brings the option to iterate on the designs quickly without losing the hard work already put into the project.</p>
<p>Using the refresh option is very easy. Simply select it from the main toolbar and point to the updated Sketch file. The compare window will open and it will allow you to select the artboards to replace.</p>
<p>The artboards that have been removed from the Sketch file will be removed from Supernova automatically as well. Let’s see it in action:</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F261528770%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F261528770&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F690561419_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/87964f2f1bd0c5a221251da7d61b4f3e/href">https://medium.com/media/87964f2f1bd0c5a221251da7d61b4f3e/href</a></iframe></p>
<h3><strong>Introducing Supernova Sketch Plugin</strong></h3>
<p>As you’ve probably noticed, Supernova replaces the old screen with the new one. This means that the changes done to that screen need to be done again — but even though making designs in Supernova is a matter of seconds, it can still get annoying.</p>
<p>Supernova Sketch Plugin (<a href="https://s3.amazonaws.com/supernova-website/data/Supernova.sketchplugin.zip">available for download here</a> or directly within the Studio, supports Sketch 48+) <strong>allows you to mark components</strong> with their respective data types as they should appear in Supernova, or when exporting.</p>
<p>The great news — it <strong>works for symbols and libraries as well</strong>, so you can mark your master symbol as a button and everything that uses it will be a button as well.</p>
<p>But the best thing is to<strong> use the Sketch plugin with the refresh functionality</strong> — immediately building the working app screen by screen just by refreshing and marking the components with appropriate types.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F261528509%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F261528509&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F690561121_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/6b4bad245b0e22b80aea8c205f600204/href">https://medium.com/media/6b4bad245b0e22b80aea8c205f600204/href</a></iframe></p>
<p>Important note: the basic components such as views, labels and images aren’t available in the list of components, because they are recognized by the Supernova automatically — to save you a ton of work.</p>
<h4><strong>Component mode</strong></h4>
<p>In order to easily see the marked components, especially for large screens, we have prepared the component mode. You can bring up the component mode by selecting the artboard of your interest and then enabling it in the advanced options of the plugin &gt; component mode.</p>
<p>This creates an overlay over your design that will show you precisely where your components are, and what will they become once converted.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F261529008%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F261529008&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F690561765_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/4004ceec6826a70c9b2ac076e7efd5ad/href">https://medium.com/media/4004ceec6826a70c9b2ac076e7efd5ad/href</a></iframe></p>
<h4><strong>Bonus — Wireframe mode</strong></h4>
<p>We know just how important it is to get your designs right — and we are pixel perfectionists ourselves. For this reason, the plugin has “one more thing”, <strong>the wireframe mode</strong>.</p>
<p>Wireframe mode allows you to select an artboard and it will render visible bounding boxes for all your components on the screen. This allows for absolutely precise preparation of the designs and components.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F261529249%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F261529249&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F690561858_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1200" frameborder="0"><a href="https://medium.com/media/31fa6cc0631093ee034db79622c2411b/href">https://medium.com/media/31fa6cc0631093ee034db79622c2411b/href</a></iframe></p>
<p>Hope you like what you see and we are back to work — as this is just the beginning.</p>
<p>In the future, Supernova will get a much more powerful merging, with the vision of doing the iterations in real-time, completely synchronized with the Sketch.</p>
<ul>
<li><strong>Don’t have a copy of Studio yet? </strong>Get it now at <a href="https://supernova.studio/">https://supernova.studio/</a></li>
<li><strong>Download the Sketch plugin</strong> <a href="https://s3.amazonaws.com/supernova-website/data/Supernova.sketchplugin.zip">now</a></li>
<li><strong>Join our </strong><a href="https://www.facebook.com/supernovaapp/">Facebook</a><strong> and </strong><a href="https://api.supernova.studio/slack">Slack</a> to discuss all you want to know about Supernova and its upcoming features!</li>
</ul>
<p>Until next time!</p>
<p>With ❤️ from your friends at Supernova</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=90d9527be694" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/introducing-design-components-90d9527be694">Introducing Design Components</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Introducing Design Components

Learn how to enhance your designs with the power of the new Supernova Sketch plugin

Top Stories