large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://medium.com/sketch-app-sources/bringing-css-smarts-to-sketch-c183e8cd1dc9?source=rss----d23119b14977---4">Design + Sketch App &mdash; Medium</a> | Stackswell.io <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KHvwgsWqrFlx1lJniIsarw.jpeg"></p>
<blockquote><p>Introducing <a href="http://bit.ly/stacksw311">Stackswell</a>, a plugin that streamlines repetitive tasks.</p></blockquote>
<p>As designers, we have made lots of headway in improving the speed at which we produce responsive designs. Over the last 5 years our industry has adopted new layout tools, perfected flexible grids and built detailed design systems.</p>
<p>Still there is room to improve in today’s workflow. When working on responsive designs I am still amazed by how many tasks I do that feel repetitive and could be easily automated. Personally I’d rather be spending time solving larger problems that can help my users vs repetitive tasks such as updating text styles for each different breakpoint.</p>
<h3>What Problems Is Stackswell Solving?</h3>
<ol>
<li>Wasted time updating styles.<br /><em>Eliminates having to update type styles at every breakpoint.</em></li>
<li>Removes the need to update symbols at each breakpoint.<br /><em>You can link styles once and they will automatically update.</em></li>
<li>Visualizes inconsistent vertical spacing.<br /><em>Stackswell helps you see where your spacing is off.</em></li>
</ol>
<p>Because of the amount of time I spend updating and adjusting these tasks, I hand over fewer breakpoint design to my developers. And because I hand over fewer designs it costs me more time in Q&amp;A with revisions.</p>
<h3>Market Fit</h3>
<p>I wanted to get a rough idea if there were other Designers feeling these pain points and if they would be interested in Stackswell. I did a quick post on <a href="https://www.designernews.co/stories/92672-sketch-plugin-idea-looking-for-feedback#comment-286715">Designer News</a> asking for feedback. In the end I got some great responses and encouragement. <a href="http://bit.ly/stacksw311">We are still looking for users so sign up</a>!</p>
<h3>Feature 1: Responsive Type</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3mLttTsC6JEI8jz3KVLYNQ.jpeg">Automatically update type styles per breakpoint.</p>
<p>We’ve all seen <a href="https://medium.com/sketch-app-sources/text-system-mastery-with-shared-styles-9931bea7d085">type waterfalls</a> in Sketch. They let us set our type system so we can work faster and more consistently. When laying out numerous pages at multiple breakpoints, the number of type styles that needs to be updated can become overwhelming.</p>
<p>With Stackswell that’s all changed. Now just adjust the artboard’s width and the type styles just automatically update. It’s that easy.</p>
<h3>Feature 2: Smart Symbols</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kL4ZTDeaUyH73I8TuD5jEA.jpeg">Smart Symbols will swap symbols pending on the breakpoint.</p>
<p>In responsive design sometimes a pattern needs to change based on the page width. Here’s an example of Airbnb updating components pending on the page’s breakpoint.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F261035838%3Fapp_id%3D122963&amp;dntp=1&amp;url=https%3A%2F%2Fvimeo.com%2F261035838&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F689933054_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/8cb8f52ceb1e0acce102a9c448ebaea8/href">https://medium.com/media/8cb8f52ceb1e0acce102a9c448ebaea8/href</a></iframe></p>
<p>The current process in Sketch is replacing the old symbol with the new one then re-aligning everything to the grid.With Stackswell all you have to do is link the symbols and they will update automatically pending on the breakpoint. Do some small tweaking then, boom, done.</p>
<h3>Feature 3: Variable Spacing</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gZF-OypoJXu2-jVInECZKA.jpeg">The X and Y height can be set per breakpoint per component.</p>
<p>I can never remember the vertical spacing I set around my components especially at different breakpoints. Currently I have to go back to a document or style guide and look up the previous number.</p>
<p>Stackswell allows you to set the vertical spacing of your symbol per breakpoint so you’ll never have to double check again. Even better the spacing guides can be toggled on and off for quick checks to make sure all the spacing is consistent.</p>
<h3>Join the waitlist</h3>
<p>Interested? Sign up to be a beta tester at <a href="http://bit.ly/stacksw311">stackswell.io</a> and get early access.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c183e8cd1dc9" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://medium.com/sketch-app-sources/bringing-css-smarts-to-sketch-c183e8cd1dc9">Bringing CSS smarts to Sketch</a> was originally published in <a href="https://medium.com/sketch-app-sources">Design + Sketch</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Bringing CSS smarts to Sketch

Bringing CSS smarts to Sketch

Top Stories