Origami Components #1: Pickers, Action Sheets, Tabs and Alerts on iOS, and a pinch of Android-styled Tabs

Johannes Kempf
Jan 6, 2017 · 3 min read

Over Christmas, I found some spare time to complete training sessions in Origami Studio. I wanted to make sure I learnt quality techniques, while building elements that I could use in some way for my work at Freeletics. This meant I started recreating native iOS elements so they could be reused and enhanced by our team.

Here’s an outline of what I came up with — an effort, which I want to give back to the Origami community!

Just keep in mind:
These components were not built with the goal to deliver 100% accurate native elements, so styles, animations and behaviors could slightly differ. Also, none of the components have been fully tested, so ping me an
email (mail to: johannes@freeletics.com) if you come across ways to improve them.

iOS Picker

  • Created for iPhone SE resolution (320 x 568px)
  • Define up to 8 values within the picker
  • Confirm or discard selected value via Cancel or Done
  • Get selected value as an output
  • Could be a little buggy, if you click too fast

Download here

iOS Action Sheet

  • Created for iPhone SE resolution (320 x 568px)
  • Define colors for actions
  • Switch description on and off
  • Get selected action as an output

Download here

iOS Tabs with two or three options

  • Created for all resolutions
  • Easily adapt text, border radius, color and size
  • Get selected tab as an output

Download here

iOS Alert

  • Created for iPhone SE resolution (320 x 568px)
  • Easily switch between one and two alert actions
  • Get selected action as an output
  • Alert size proportional to text length

Download here

Android-styled Tabs

  • Created for iPhone SE resolution (320 x 568px)
  • Define menu with up to 5 tabs
  • Switch between tabs by swiping left/right or pressing the related tab
  • Make sure you connect the Output X with your scroll layer, and also select the scroll layer in the input attributed “Scroll Layer”
  • Changing the font name and font size is only possible within the component by adapting the size calculation of tabs, which has to be done manually for now (update is coming)

Download here

Additional small give away: iOS Appstore Install Button

Download here

Have fun with these components and share this post if you find it useful. I would really appreciate this!

We are looking for Product Designers to join our team. So if you’re interested in working at the intersection of design, human psychology and training science, check out these links to see how you can have a positive impact to the lives of our users:
- Working at Freeletics
- Open Position as Product Designer (M/F)
- Behind the Scenes (Video)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store