Highlighted

Create a toggle button using States

Adobe Employee ,
Nov 01, 2019

Copy link to clipboard

Copied

  1. Create a rounded rectangle using the value 45 for the corner radius.  Screen Shot 2019-10-28 at 11.34.24 AM.png
     
  2. Create a circle, use a fill color, and move the circle into one of the corners of the rectangle.   Screen Shot 2019-10-28 at 11.38.17 AM.png
     
  3. Select both the circle and the rectangle, and press Cmd+K (Mac OS), or Ctrl+K to convert the selection into a component.

      Screen Shot 2019-10-28 at 11.39.54 AM.png

 

4. This is the default state of your component, as indicated in the Properties panel.                                                     Screen Shot 2019-10-28 at 11.42.46 AM.png               Screen Shot 2019-10-28 at 11.42.46 AM.png

 

5. Click "+" to add a new State. Let's call this state, "Disabled"                                                          Screen Shot 2019-10-28 at 11.44.34 AM.png

 

6. With the "Disabled" state selected, double-click the rounded rectangle to select it, and fill it with gray.Screen Shot 2019-10-28 at 11.46.38 AM.png

 

7. Similarly, double-click the circle, fill it with a lighter shade of gray, and move it to the other corner of the rectangle.

Screen Shot 2019-10-28 at 11.49.03 AM.png

 

8. Move to the Prototype mode, select the component, and click Default State in the Properties panel. Click the arrow icon.

Screen Shot 2019-10-28 at 11.51.49 AM.png

 

9. In the Properties tab, select the Trigger to Tap, Action to Auto Animate, and Destination to Disabled.                 Screen Shot 2019-10-28 at 11.54.49 AM.png

 

10. Similarly, click Disabled state, and set the Trigger to Tap, Action to Auto Animate, and Destination to Default State.

 

11. Preview the toggle button and check if the toggle is working as intended.

 

Reply to this post if you are having issues recreating the toggle button.

TOPICS
Create a post

Views

454

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Create a toggle button using States

Adobe Employee ,
Nov 01, 2019

Copy link to clipboard

Copied

  1. Create a rounded rectangle using the value 45 for the corner radius.  Screen Shot 2019-10-28 at 11.34.24 AM.png
     
  2. Create a circle, use a fill color, and move the circle into one of the corners of the rectangle.   Screen Shot 2019-10-28 at 11.38.17 AM.png
     
  3. Select both the circle and the rectangle, and press Cmd+K (Mac OS), or Ctrl+K to convert the selection into a component.

      Screen Shot 2019-10-28 at 11.39.54 AM.png

 

4. This is the default state of your component, as indicated in the Properties panel.                                                     Screen Shot 2019-10-28 at 11.42.46 AM.png               Screen Shot 2019-10-28 at 11.42.46 AM.png

 

5. Click "+" to add a new State. Let's call this state, "Disabled"                                                          Screen Shot 2019-10-28 at 11.44.34 AM.png

 

6. With the "Disabled" state selected, double-click the rounded rectangle to select it, and fill it with gray.Screen Shot 2019-10-28 at 11.46.38 AM.png

 

7. Similarly, double-click the circle, fill it with a lighter shade of gray, and move it to the other corner of the rectangle.

Screen Shot 2019-10-28 at 11.49.03 AM.png

 

8. Move to the Prototype mode, select the component, and click Default State in the Properties panel. Click the arrow icon.

Screen Shot 2019-10-28 at 11.51.49 AM.png

 

9. In the Properties tab, select the Trigger to Tap, Action to Auto Animate, and Destination to Disabled.                 Screen Shot 2019-10-28 at 11.54.49 AM.png

 

10. Similarly, click Disabled state, and set the Trigger to Tap, Action to Auto Animate, and Destination to Default State.

 

11. Preview the toggle button and check if the toggle is working as intended.

 

Reply to this post if you are having issues recreating the toggle button.

TOPICS
Create a post

Views

455

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 01, 2019 2
Contributor ,
Nov 05, 2019

Copy link to clipboard

Copied

That's a cool new feature!

The only part I thought it was a bit confusing was the prototyping part. At first I thought a new artboard was necessary to be able to auto animate the component (drag the arrow to another artboard to set the interaction) but later I found out I could click the "+" in Interaction section.

 

I tried to drag the component to itself, hoping it would able the interaction section.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2019 0
Contributor ,
Nov 05, 2019

Copy link to clipboard

Copied

I saw in another post that I can just click the arrow and it'll start a new interaction. Cool!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 05, 2019 0