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

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)