Dora alpha
Let’s create a simple hover interaction to see how it works.
Create Component
2
2
You can create components from any layer or object you've designed. These could be a series of buttons, icons, layouts, or more.
Step 1. Open Keyframe Drivers
Step 3. Override text
Click the Drivers button show or hide the current page's keyframe drivers.
Override the button text to "Join now".
Click the Drivers button show or hide the current page's keyframe drivers.
One component may have multiple states, but each state needs to be a unique combination of properties and values.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 3 Add hover interaction & preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
State
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Or click the "+" button in the event panel to add interaction.
Button
Button
Button
Button
Step 1. Open Keyframe Drivers
Step 2. Add hover state
Click the Drivers button show or hide the current page's keyframe drivers.
Click "+" to add a new state, and set the property value to "Hover".
Click the Drivers button show or hide the current page's keyframe drivers.
Property values are the different options available for each property.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 2. Add hover state
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 2. Add hover state
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Hover
Step 1. Open Keyframe Drivers
Step 2. Drag in
Click the Drivers button show or hide the current page's keyframe drivers.
Drag the button thumbnail into the design.
Click the Drivers button show or hide the current page's keyframe drivers.
Property values are the different options available for each property.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 2. Drag in
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 2. Drag in
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Search
Click the Drivers button show or hide the current page's keyframe drivers.
Switch to the Components panel and search for "Button".
Click the Drivers button show or hide the current page's keyframe drivers.
Switch to the Components panel and search for "Button".
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Search
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Try it out!
Use Component
3
3
Button
Step 1. Open Keyframe Drivers
Step 1. Open the Keyframe panel
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Keyframe panel button to show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Properties are the variable aspects of our component.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Property?
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Create
Click the Drivers button show or hide the current page's keyframe drivers.
Select the button, and click "Create component".
Click the Drivers button show or hide the current page's keyframe drivers.
Select the button, and click "Create component".
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Create
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
3. Change the interaction type from "Click" to "Hover".
Try it out!
Step 4. Add interaction
Button
Button
Button
Button
Image Sequence
Image Sequence
Image Sequence
4 mins
Image Sequence
4 mins
4 mins
4 mins
1. Select the "Default" artboard. 2. Directly drag a new connection from "Default" to "State 1" in Lightning ⚡️.
The "Type" property has "Primary", ’Secondary’ values. The "Status" property has "Default", "Hover" values.
Understand The Basic Model
1
1
Default
Step 1. Open Keyframe Drivers
Step 3. Add keyframes
Click the Drivers button show or hide the current page's keyframe drivers.
Add 2 keyframes to an image, with different current frame values.
Click the Drivers button show or hide the current page's keyframe drivers.
After clicking on Preview, scroll the screen to find the button and hover to see the effect.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 5. Preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 5. Preview
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
States allow you to organize similar components into one container by customizing the properties and property values. This simplifies your component library and makes it easier to find.
Button
Button
Button
Button
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
07. DatabaseDatabase
Database
Database
Database
05. ComponentComponent
Component
Component
Component
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
07. DatabaseDatabase
Database
Database
Database
03. 3D3D
3D
3D
3D
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
05. ComponentComponent
Component
Component
Component
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
Database
Database
Database
Database
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
07. DatabaseDatabase
Database
Database
Database
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
03. 3D3D
3D
3D
3D
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
01. Constraint LayoutConstraint Layout
Constraint Layout
Constraint Layout
Constraint Layout
05. ComponentComponent
Component
Component
Component
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
05. ComponentComponent
Component
Component
Component
07. DatabaseDatabase
Database
Database
Database
Component
Component
Component
Component
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
05. ComponentComponent
Component
Component
Component
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
03. 3D3D
3D
3D
3D
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
05. ComponentComponent
Component
Component
Component
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
07. DatabaseDatabase
Database
Database
Database
02. KeyframeKeyframe
Keyframe
Keyframe
Keyframe
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
04. Import from FigmaImport from Figma
Import from Figma
Import from Figma
Import from Figma
07. DatabaseDatabase
Database
Database
Database
03. 3D3D
3D
3D
3D
06. Image SequenceImage sequence
Image sequence
Image sequence
Image sequence
App TourDora App Tour
Dora App Tour
Dora App Tour
Dora App Tour
Keyframe
Keyframe
Keyframe
Keyframe
03. 3D3D
3D
3D
3D
Image sequence
Image sequence
Image sequence
Image sequence
03. 3D3D
3D
3D
3D
03. 3D3D
3D
3D
3D
06. Image SequenceStep 4. Add interaction
Step 3. Override text
2. Set the trigger to "Hover".
Override the button text to ‘Join now.’
1. Select the button layer and add an interaction.
One component may have multiple states, but each state needs to be a unique combination of properties and values.
1. Select the button layer and add an interaction.
Step 4. Add interaction
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 3 Add hover interaction & preview
Click the Drivers button show or hide the current page's keyframe drivers.
2. Set the trigger to ‘Hover.’ 3. Set the action to ‘Change instance state.’ 4. Set Status to ‘Hover.’
3. Set the action to "Change instance state".
Click the Drivers button show or hide the current page's keyframe drivers.
State
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
4. Set Status to "Hover".
Step 1. Open Keyframe Drivers
We are glad to invite you to become a part of our community.
VIEW NEXT
Step 1. Open Keyframe Drivers
Property Value?
Click the Drivers button show or hide the current page's keyframe drivers.
Property Values are the different options available for each property.
Click the Drivers button show or hide the current page's keyframe drivers.
Property Values are the different options available for each property.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Property Value?
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Primary
Step 1. Open Keyframe Drivers
Step 1. Open the Keyframe panel
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Keyframe panel button to show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
All states within the component set should use the same properties and property values, but each state needs to be a unique combination of them. You don’t need to have a component for every possible combination of properties and property values.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
State?
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Button
Button
Button
Button
Button
Button
Button
Button
Step 1. Open Keyframe Drivers
Step 3. Change hover state color
Click the Drivers button show or hide the current page's keyframe drivers.
Select the hover state, and change the color opacity to 70%.
Click the Drivers button show or hide the current page's keyframe drivers.
One component may have multiple states, but each state needs to be a unique combination of properties and values.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 3 Add hover interaction & preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
State
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Step 3. Add keyframes
Click the Drivers button show or hide the current page's keyframe drivers.
Add 2 keyframes to an image, with different current frame values.
Click the Drivers button show or hide the current page's keyframe drivers.
After clicking on Preview, scroll the screen to find the button and hover to see the effect.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 5. Preview
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Click the Drivers button show or hide the current page's keyframe drivers.
Step 5. Preview
3. Select image sequeces to upload and rename it, or use the one we upload for you [IS_spiral]
Click the Drivers button show or hide the current page's keyframe drivers.
Step 1. Open Keyframe Drivers
Step 1. Open Keyframe Drivers
Component
Secondary