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.

<a href="https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-four-bb280278590a?source=rss----d23119b14977---4">Design + Sketch App &mdash; Medium</a> | Marc Andrew <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MK4zsakZ8Z-TR9TSNx1BIQ.jpeg">
<h4>Sketch Tutorial</h4>
<h4>I’ll be showing you how to combine various Symbols to build out more customisable Components</h4>
<a href="https://kissmyui.com/cabana/"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4einCXSH8ENdwo3UUoRCiw.jpeg"></a>
<h3>Building out your Components</h3>
In the previous articles I showed you how to build the foundations of what will become your Design System in Sketch, including the creation of base elements such as Colour and Typography and then onto the base Symbols such Icons and Text which can then be implemented into countless other Symbols as you move forward.
In this final part I want to show you how to combine these smaller Symbols such as Color, Text, Icons, Button Shapes and States to start building out Components for your design system, with the added bonus of Sketch’s Resizing Constraints to make them adaptable to varying screen sizes.
Please note: Like I mentioned in the previous articles, I won’t be showing you how to build out hundreds of Symbols or Components. I’ll just be giving you a brief insight into some of the key elements here.
Let’s dive on in…
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2Fd2Z9QYzA2aidiWn6%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fgiphy.com%2Fgifs%2Fsnl-thumbs-up-awesome-d2Z9QYzA2aidiWn6&#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fd2Z9QYzA2aidiWn6%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="244" frameborder="0"><a href="https://medium.com/media/a4d183ae77058dd8b592c5d121db33a5/href">https://medium.com/media/a4d183ae77058dd8b592c5d121db33a5/href</a></iframe><img alt="" src="https://cdn-images-1.medium.com/proxy/1*se36ELrlsK2DNqfB3FwZqA.jpeg">
For the Button Components I opted for 3 sizes (Small, Medium and Large) to give myself some adaptability when creating artwork for various screen sizes.
I also brought the 8pt Grid System that I mentioned in <a href="https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-one-fd450dccab10">Part One</a> into play here once more, to keep an element of uniformity throughout.
Starting with the Large Buttons, I chose to create 4 Component variants &#8211;
<ul>
<li>Default (No Icon)</li>
<li>Icon (No Text)</li>
<li>Left Icon (With Text)</li>
<li>Right Icon (With Text)</li>
</ul>
Enough in the way of design variety to slot into 99.9% of the projects you’ll create at a later stage.
So starting with the Large/Default Button Component, I firstly dropped in the Shape/Fill/Radius — 4px that I had created previously. Now you can choose the Symbol with 0px or 100px Radius to be your default that’s entirely up to you.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*ncyr2SdmolzID5vpq9TTsw.jpeg">
I then renamed the Layer simply to Button, and noted that with just this Layer in place that I also had the Symbol Overrides (Button State &amp; Color) at my disposal moving forward. Very handy indeed!
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*6Hjwp47CBvCO0rCbPO_akw.jpeg">
From the Text Symbols I had created previously I dropped in the Text/Button/Large/Center/White Symbol, and simply renamed the Layer to Text.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*9cgffbO545HANQb20B7-Rg.jpeg">
Now, wanting to adhere to the 8pt Grid System, and using a little bit of calculation I adjusted the width and height of the button Layer so the text Layer that I just added aligned 8pt from the top and bottom of the button, and 32pt from the left and right edges.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*iR0v_jQGGQp98Mu9wKn_Sg.jpeg">
With the Button Layer resized accordingly, and the Text Layer aligned correctly, I selected both layers and converted to a Symbol naming it as such — Button/Large/Default.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*mlugsazGkDWUh2yPLrtNAw.jpeg">
Now working with the freshly created Button Symbol, I selected the Text Symbol inside of it…
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*pr4TN_U_LWTE171pFYSXEA.jpeg">
…and from the Resizing Constraints in the Inspector Panel, Pinned it to the Left and Right edges, and fixed the Height. Now whenever I resize this Button Symbol inside of my projects, I know that the text inside of it is going to align perfectly.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*upT-VUhf4LZfBWBB0I8ATQ.jpeg">
Now, inserting this Symbol into a project I have a multitude of options (Overrides) at my disposal, enabling me to tweak away at this Component with minimal effort. Huzzah with sprinkles on!!
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*R05OTBeYRXlwzayMSysbLw.jpeg">
Onto the Icon Button. I again, simply inserted the Shape/Fill/Radius — 4px Symbol I’d created previously, renamed it, and then adjusted it to more of a square shape.
Then from my Symbols, dropped in one of the Icons I’d created previously, renamed the Layer (Icon), changed its Color Override to White…
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*_ZWAnL-YciWF8PDsnV92WA.jpeg">
…and then, using the Scale tool, increased its size to 32 x 32px.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*vCUj-xYMVYDojXWceUboeQ.jpeg">
I then adjusted the dimensions of the shape layer, so the Icon Symbol aligned 8pt from all edges.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*ItMiIBaemvB8FjSIfZ7D7Q.jpeg">
With the Button Layer and Text Layer aligned correctly, I selected both layers and converted to a Symbol naming it as such — Button/Large/Icon.
Now working with the newly created Button Symbol, I selected the Icon Symbol inside of it, and using Resizing Constraints fixed the Width and Height. This just avoids distortion of the icon when the Symbol is resized inside of your projects.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*XLdlmdY2akI_-fK_dYqnAg.jpeg">
Moving onto the Button/Large/Left Icon Symbol, following similar steps to the previous buttons I’d created, I inserted a Shape/Fill/Radius — 4px Symbol and then adjusted its dimensions slightly (180px x 47px if you wanted to know the exact dimensions)…
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*APb8ELOgx5NCobIDXV6Xpg.jpeg">
I then inserted an Icon Symbol, renamed it, scaled it to 32 x 32px and changed the color Override to White.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*dfxJY_ZVSlFUfUp2nfO7OA.jpeg">
And from the Text Symbols I’d created previously, I dropped in the Text/Button/Large/Left/White Symbol, and renamed the Layer to Text.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*HYdMPwBHxVZc7Sy3cy3BlA.jpeg">
And once more, adhering to the 8pt Grid System, I aligned the Icon Symbol, so it was 8pt from the top, bottom and left edge.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*TlkWmMXTghTho0hyN59EZg.jpeg">
And for the Text Symbol, so it was 16pt to the right of the Icon, 8pt from the top and bottom of the Button Symbol, and using the resizing handles, adjust it so its bounding box was 16pt from the right edge of the Button Symbol.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*WP1xGk_3M5i1sHoM5QbPlQ.jpeg">
Now, with all 3 Layers selected (Text, Icon and Button), I converted to a Symbol and named it Button/Large/Left Icon.
Working from the newly created Button Symbol, I first selected the Icon and pinned it to the left edge, and then fixed its Width and Height.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*Q74GVS7jOxHI-DyLCoRBCA.jpeg">
Then with the Text Symbol selected, I pinned it to the left and right edges, and fixed the Height.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*a5cMjxMnjPhnEgrezfhC8A.jpeg">
Finally, for the Button/Large/Right Icon Symbol, I followed a similar process to the previous buttons.
<ul>
<li>Inserting a Shape Fill Symbol and adjusting its dimensions</li>
<li>Inserting an Icon Symbol, scaling it up and overriding its Color</li>
<li>Inserting a Text Symbol (again using the Left aligned variant)</li>
</ul>
Then, aligning and resizing (bounding box) the Text Symbol so it was 16pt from the left edge, 8pt from the top and bottom edge of the button, and 16pt from the left edge of the Icon.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*uYwNax4HW3TsczqrGB76vg.jpeg">
And for the Icon Symbol, so it was 8pt from the right, top and bottom edge of the Button.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*xImACm0eXhigg3Lm84Pugg.jpeg">
Then I selected all 3 Layers (Text, Icon &amp; Button), and once more converted to a Symbol Button/Large/Right Icon.
And finally, with the Resizing Constraints, pinned the Text Layer to the left and right edges, and fixed its Height.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*37i-x-LiMCfrGPX_BcmAHw.jpeg">
And for the Icon, pinned it to the right edge, and fixed its Width &amp; Height.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*R3bmhKmRAxLOszZFPYgkMQ.jpeg">
After getting the Large Button Symbols into play, I then went down through the Medium and Small variants following a very similar process to what I’ve shown you, but this time inserting, for example, the Text/Button/Medium/Center/White Symbol, and scaling the Icon Symbol accordingly, but still adhering to the 8pt Grid System throughout.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*3osykhK_6Q1aJfn78NwiMQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/proxy/1*Y15rNd0TA0nOIY14jUZzqw.jpeg">
Until I had 12 rather fine Components now at my disposal. Oooh I do like that!
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*LEFP6YGQRXb2k8_nD_8eGQ.jpeg">
I then created Components such as Form elements, Menus &amp; Dropdowns, Navigation, Pagination and more. Key elements for any project you’re working on, but it in a form that was now easily customisable and allowed me to stay on point when working through a project.
<img alt="" src="https://cdn-images-1.medium.com/proxy/1*wNwm0d9xj_iJmxSVvcNS1w.jpeg">
It opened my eyes to how just creating those smaller foundational elements such as Text, Color and Icon Symbols, then allows you to simply build out into much larger components with ease, and how those small building blocks are key to any kind of Design System that you’re hoping to build.
<h3>Don’t want to build a Design System yourself? You can pick up a copy of Cabana right <a href="https://kissmyui.com/cabana/">here</a>.</h3>
Use the offer code MEDIUM25 to receive 25% OFF.
<a href="https://kissmyui.com/cabana/"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4einCXSH8ENdwo3UUoRCiw.jpeg"></a>
Thanks for reading the article,
Marc
Designer, Author, Father and Lover of Crisps (or Chips, if you’re on the other side of the pond)
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=bb280278590a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-four-bb280278590a">How to create a Design System in Sketch (Part Four)</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.

How to create a Design System in Sketch (Part Four)

How to create a Design System in Sketch (Part Four)

Sketch Tutorial

I’ll be showing you how to combine various Symbols to build out more custo…

Top Stories