Framer allows for high fidelity (detailed and intuitive) prototypes, which can then be passed onto the developers. The speed of designing using Framer gives the team a rapid development stage (the stage of prototype design and development) getting to a viable product efficiently (if you are lost on the stages of app development, take a look. Framer is one of the most popular prototyping tools. It's based on the premise that with code it is possible to prototype anything, resulting in novel and groundbreaking designs. While this may be true, the tool's proprietary coding language for designing and animating prototypes could be a barrier. Explore a preview version of Designing Prototypes With Framer right now. O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers. This isn’t an extensive guide to remote user testing. It is a quick-step guide to using Hotjar for remote user testing Framer prototypes. If you want info on the former, then check out these great books: Remote Research or Just Enough Research.
- Framer X Windows Release Date
- Framer App
- Framer Prototype Tool
- Framer Prototype
- Framer Prototyping Tool
- Framer Web
- Framer Download
Framer » Smart Components » iOS Segmented Control » Example Prototypes
On this page, you’ll find some examples of how you can use the iOS Segmented Control component in your prototypes.
Current option
This simple demo shows how to get the control’s currently selected option.
The component has an event callback property:
onValueChange()
. A function passed to that property will be called every time the selected segment changes.The example function below is simple: It just saves the current
option
in appState.currentOption
…… which in turn will update the
text
of the text block:Current index
The
onValueChange()
callback is always called with two parameters: option
(as used above), but also index
, the number of the selected tab.Depending on what you want to accomplish, you can use one or the other.
Properties demo
In this next prototype, three segmented controls are used to change the properties of the fourth segmented control at the bottom.
As a reminder, these are this component’s properties:
Property | Type | Description |
---|---|---|
mode | boolean | Light or Dark mode |
options | string[] | Names of the (max. 5) segments |
setCurrentBy | boolean | Whether to set the selected segment by index or name |
currentIndex | number | Index of the selected segment |
currentOption | string | Name of the selected segment |
onValueChange() | function | Event callback property that shares the selected segment’s option name and index number |
And here’s the code: There’s a data object, called
appState
, in which the current mode
, options
and currentIndex
are saved:![Framer prototyping Framer prototyping](https://miro.medium.com/max/1200/1*Vi4zOHqHNN7SGb-WtttyWg.jpeg)
Framer X Windows Release Date
Those values are passed to the bottom segmented control:
(The
setCurrentBy
property is simply set to true
because we’re changing the selection by index number.)When the
mode
switches to Dark Mode, we want the frame under the segmented control to be dark as well. That happens with this override:The frame’s
background
color will be white when appState.mode
is true
, and black when it’s not.Framer App
The three segmented controls at the top have overrides that use the
onValueChange()
callback property to update the corresponding values in appState
.1. Changing the
mode
2. Changing the
options
3. Changing the
currentIndex
Maps
When switching to the Satellite view in Apple’s Maps app, the interface will transition to Dark Mode, even when your phone is currently in Light Mode.
The
mode
property of the segmented control is a Boolean, in which true
stands for Light Mode, and false
for Dark Mode.There’s a data object with the current
mode
and the opacity values of the screens (which are just images):(The first screen, Map, is placed underneath the other two, so it never needs to be hidden.)
Those opacity values are passed, in turn, to the
animate
property of the screens:And then the screens are faded in or out depending on the current
index
of the segmented control:Framer Prototype Tool
Note that in this same override the segmented control’s
mode
is bound to appState.mode
, and that the mode
will always be true
, except when switching to the Satellite screen.By the way, this prototype also uses the Status Bar component from Framer’s Example Kit.
This status bar switches between its light and dark style with an
appearance
property that expects a string: 'dark'
or 'light'
.So when
appState.mode
is true
we pass it a 'dark'
, and when it’s not, a 'light'
:Steps
Next up: the Steps detail screen in the iPhone Health app.
We’re animating two things simultaneously: the number of steps above the chart and the chart itself. The steps count has a simple opacity animation, but the chart also has a width animation (
scaleX
) when fading in.For the day, week, month, and year numbers, I used simple opacity values:
… which I applied to the corresponding images (in an
animate
, so that they will fade in and out):But the charts, on the other hand, have a variants animation…
… with these variant labels:
Framer Prototype
Framer Prototyping Tool
The animation to
'hidden'
has a duration
of 0
, so it happens instantly. It also makes the chart invisible (zero opacity
) and a bit wider (a scaleX
of 120%).When animated to
'visible'
Kite compositor 1 8. , the chart will shrink back to its real size while fading in.Framer Web
The charts each get the
chartVariants
object as their animation variants
, and the current variant label to animate
to (in variantChartDay
, variantChartWeek
, etc.). Framer Download
When the selection of the segmented control changes, I first hide all numbers and charts:
… but directly after that, I show the correct amount and chart: