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
As always, here’s a sample file to play with…
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.
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!)
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!
Step 1
Create the base design for each device — Android on the left, iOS on the right. Make sure to use the same placeholder text for each object, and to make the placeholder text unique per device. (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.
Step 2
Make each item a symbol. Use folders to keep everything organised and structured. I used the pattern dialog/device and dialog/object/device. This means that when you go to swap, all you do is switch between dialog > android and dialog > ios in the symbol chooser on the right. (See screenshot or sample file for more details)
Step 3
Enter your text into the symbol overrides.
Step 4
In the symbol picker, swap the symbol from android to ios. The design will change, but the content will stay the same!
Feedback welcome!
I hope this was a useful post, as always you can find me on twitter https://twitter.com/irishstu for any questions or feedback!
