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/@2is0/sketch-libraries-and-abstract-combined-in-a-design-workflow-88bdc9fd9789">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>UX designer at @thewizeline 🇲🇽 Former business intelligence engineer 🇫🇷</p>
<p>Sep 11</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*L0TERuxC5BZH93-zajk0UA.png" alt="1*L0TERuxC5BZH93-zajk0UA.png"></div>
</div>
</div>
<div>
<p>End of August, Sketch released a new feature <a href="https://sketchapp.com/beta/">in their beta version</a>: <em>Sketch Libraries</em>.</p>
<p>And Sketch Libraries are 💥💥💥 😱 🎉💃🏻 💥💥💥!</p>
<p>You can <a href="https://medium.com/ux-power-tools/sketch-libraries-how-they-work-and-the-crazy-stuff-you-can-do-with-them-fc10f142ac80">read about it</a> and/or learn how to use some Sketch files as Libraries with Pablo Stanley’s tutorial video:</p>
<div></div>
<h3>Great, but, how does it work with Abstract?!</h3>
<p>As Sketch users, Abstract (launched publicly in July) was the perfect solution to fight all the issues we had around collaboration (many designers working on the same file) and versioning (<em>mocks-final-final-v4.sketch</em>).</p>
<ul>
<li>🏴 Abstract helps to collaborate and version on a<strong> sketch file</strong>;</li>
<li>💎 Sketch Libraries help to collaborate on a <strong>design system</strong>.</li>
</ul>
<p>So, can we work with both of them?</p>
<h4>The way 💎 Sketch refers to Libraries</h4>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*b6KZLxGYWAAA8QdDjsRe5Q.png" alt="1*b6KZLxGYWAAA8QdDjsRe5Q.png"></div>
</div>
<p>Libraries are declared in Sketch’s Preferences, which means that they will be available for any file opened in Sketch.</p>
<p>The reference to a Library is made through the <strong>name of the file</strong> and <strong>its location</strong>.</p>
<h4>The way 🏴 Abstract works with the file system</h4>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*HJyB9G4anLezTzTVr7WRFA.png" alt="1*HJyB9G4anLezTzTVr7WRFA.png"></div>
</div>
<p>Abstract’s working folder is structured by project, branch, Sketch file and versions.</p>
<p>Abstract follows a Git logic: a project (repository) is made of a main branch (Master) and working branches (<em>feat/homepage</em> in this example).</p>
<p>Because of this structure, and because it’s collaboration and versioning oriented, one sketch file doesn’t exist as a single sketch file in the file system, but as many instances of this same sketch file.</p>
<h4>So, is it a match?</h4>
<p>If we follow some <a href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a> nomenclature, there is <strong>no way to both collaborate and version 🏴 </strong>on an atom Sketch file (like <em>Colors.sketch</em> or <em>Buttons.sketch</em>) and to <strong>use it as a Library 💎</strong>.</p>
<p>On the other hand, we could use Abstract to collaborate and version on a page Sketch file. This page Sketch file would be able to use Libraries.</p>
<h3>A possible architecture</h3>
<p><em>Let’s consider the following assumptions:</em></p>
<ul>
<li><em>Each atom, molecule, organism has one and only one owner;</em></li>
<li><em>Pages (or “screens”) need both collaboration and versioning;</em></li>
<li><em>Sketch and Abstract would work together as I could force Sketch Beta to work with Abstract.</em></li>
</ul>
</div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*dFdi58KWvgvOZvTr14P6TA.jpeg" alt="1*dFdi58KWvgvOZvTr14P6TA.jpeg"></div>
</div>
</div>
<div>
<p>In this architecture:</p>
<ul>
<li>A designer, owner of an atom, a molecule or an organism, can create and update his component and make it visible and usable by the others (through Libraries);</li>
<li>A designer, working with other designers on a page (or “screen”) can collaborate and version his changes, while using the components from the Libraries.</li>
</ul>
<h3>What’s next?</h3>
<p>Because of the third assumption at the origin of this potential architecture, this workflow would need to be <strong>tested with the stable release version of Sketch 47</strong>.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<h3><em>If you liked this piece, feel free to 👏 or drop a 💬!</em></h3>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Show your support</p>
<p>Clapping shows how much you appreciated Florian Lissot’s story.</p>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p>Write a response…</p>
<p>prototypr.io</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div><a href="https://medium.com/@2is0/sketch-libraries-and-abstract-combined-in-a-design-workflow-88bdc9fd9789">https://medium.com/@2is0/sketch-libraries-and-abstract-combined-in-a-design-workflow-88bdc9fd9789</a></div>


💎 Sketch Libraries and 🏴 Abstract combined in a design workflow

💎 Sketch Libraries and 🏴 Abstract combined in a design workflow

Top Stories