Smart Components

You already know how to make code components customizable with property controls, and how to add animations to them.

Now we’ll make components that do all that and can communicate with other components. Truly interactive components that you can reuse in different prototypes.

A smart component is not only interactive (a checkbox that can be checked, a slider with a draggable knob), but can also be used with other elements on the screen (clicking the checkbox to trigger an animation, having the slider change a value next to it).

A smart component has:

State

An internal memory, so it can know things like:

• whether it’s on or off (when the component is a switch or checkbox);
• the text the user entered (for an input field); or
• its current value (when it’s a slider).

The ability to share its state

This makes it possible to listen to the component—be notified when it changes—so you can:

• trigger an animation when the switch is flipped;
• save the text that was typed in the input field; or
• display the current value of the slider somewhere on the screen.

You can change its state with a property control

This makes the component even more composable because it will then let you:

• set the initial on/off state of the switch, or flip it with an override;
• dynamically change the text in the input field; and
• set the initial position of the slider, or move its knob programmatically.