Adding iOS Picker to a Sketch File

Posted in : Design Resources, Tutorials, Web Design on by : admin , freemiumfreemiumfreemiumfreemium Comments: 0

Having just made my foray into Sketch, imagine my surprise when I discover that a standard iOS picker is NOT included in the out-of-the-box template. After a surprisingly large amount of Google research (do people just not LIKE pickers?), a friend finally bailed me out with iOS UIpickerview, a Sketch file by Tom Johnson.

Screenshots from iOS UIpickerview file

So here’s the process for implementing it in your design:

1. Go to https://dribbble.com/shots/2661805-iOS-UIpickerview-Download, and download it. Duh!
2. Go to http://magicmirror.design/, and download and install that. It’s a plugin that’s necessary to make Tom’s picker components editable.
3. Open Sketch and activate Magic Mirror from the Plugins menu.
4. Open the iOS UIpickerview.
5. Make your edits to the text in the picker options list of whichever Options page you choose. (It’s on the left side of the artboard).

Screenshot of picker options

6. Click the “Refresh Page” button on the little dialog that stays open as long as you have the Magic Mirror plugin activated.

BOOM! The picker updates with an accurate rendering of your modified options, on the right side of the artboard. Just copy and past that little guy into any other page/artboard you want.

I needed a week selector, so this is the custom picker I created using this process:

week picker

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *