<p>Published on <a href="http://ift.tt/2secx9x">| Prototyping: From UX to Front End &mdash; Medium</a> Stewart Curry <img alt="" src="http://ift.tt/2sNGXMW"></p>
<h4>An easy way to make the same object appear correctly for different devices, e.g. a dialog box on Android and iOS</h4>
<p><img alt="" src="http://ift.tt/2sekXhp">Same content, different layout!</p>
<h3>Downloadable Content</h3>
<p>As always, here’s a sample file to play with…</p>
<p><a href="http://ift.tt/2sNRgRk">sketch_ios_android_dialogs.sketch</a></p>
<p>The goal for this tip is to make two dialog box symbols, one for Android and one for iOS. With a little prep work you can have a reusable symbol where you only have to enter the content once, and then swap for a different device.</p>
<p>This technique would also be useful for cross-platform designs, e.g. between MacOS and Windows (but don’t forget to swap the Ok/Cancel buttons — they are the opposite between Windows and Mac!)</p>
<p>This was just a quick experiment to see if it could be done — I’m not sure how practical this would be in real life so if you find it useful (or not) let me know!</p>
<h3>Step 1</h3>
<p><img alt="" src="http://ift.tt/2semdRA"></p>
<p>Create the base design for each device — Android on the left, iOS on the right. Make sure to use the same placeholder text <em>for each object</em>, and to make the placeholder text unique <em>per device</em>. (E.g. don’t have two buttons with “Text” as the placeholder). I haven’t pored through the design guidelines for each one as this is just a quick idea but the typeface, alignment, button positions and separators are all different.</p>
<h3>Step 2</h3>
<p><img alt="" src="http://ift.tt/2sNJ8QM"></p>
<p>Make each item a symbol. Use folders to keep everything organised and structured. I used the pattern <strong><em>dialog/device</em></strong> and <strong><em>dialog/object/device</em></strong>. This means that when you go to swap, all you do is switch between <strong><em>dialog &gt; android</em></strong> and <strong><em>dialog &gt; ios</em></strong> in the symbol chooser on the right. (See screenshot or sample file for more details)</p>
<h3>Step 3</h3>
<p><img alt="" src="http://ift.tt/2sedz5q"></p>
<p>Enter your text into the symbol overrides.</p>
<h3>Step 4</h3>
<p>In the symbol picker, swap the symbol from <strong><em>android</em></strong> to <strong><em>ios</em></strong>. The design will change, but the content will stay the same!</p>
<p><img alt="" src="http://ift.tt/2sO3h9t">Android<img alt="" src="http://ift.tt/2se8udo">Swapping…<img alt="" src="http://ift.tt/2sNJK8O">iOS!</p>
<h3>Feedback welcome!</h3>
<p>I hope this was a useful post, as always you can find me on twitter <a href="https://twitter.com/irishstu">https://twitter.com/irishstu</a> for any questions or feedback!</p>
<p><img src="http://ift.tt/2sesFYU" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2sNJIhc">Using Sketch symbols to quickly swap between different OS designs</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Using Sketch symbols to quickly swap between different OS designs

An easy way to make the same object appear correctly for different devices, e.g. a dialog box on Android and iOS

Downloadable Content

Top Stories