Highlighted

Creating checkboxes using components and states in XD

Adobe Employee ,
Nov 15, 2019

Copy link to clipboard

Copied

I went back to the XD artboard, and I realized that there was a simpler and more scalable way to create a checkbox. Let me know if you have a better way to do this.

 

Create a square (I have used Corner radius: 20, Stroke 4)

Screen Shot 2019-11-15 at 6.59.35 AM.png

 

Inside this square, create a smaller square and set its border size to zero.

innersquare.png

 

With the inner square selected, press Ctrl+K or Cmd+K to convert the inner square to a Component. Name the Component InnerSquare

innersquare_component.png

 

Now, select both the outer square and inner square and convert to component. Name it OuterSquare

Screen Shot 2019-11-15 at 7.04.31 AM.png

 

I am using a plug-in ICONS & SYMBOLS to drag icons for check mark and user-check to the artboard

Screen Shot 2019-11-14 at 3.54.06 PM.png

 

Enlarge the icons and convert them to Components named Check and User Check

check_usercheck.png

 

Select OuterSquare component and in the Properties panel, create two new states, Mouse-Over and Mouse-click

 outer_states.png

 

Here's where you have to be very careful. Ensuring that you are in the Mouse-Over state, do the following

  • Right-click the Check component and select Cut
  • Double-click inside the OuterSquare component to select InnerSquare
  • Right-click and paste
  • Move the Check component into the OuterSquare and adjust position.

mouse-over.png

Select the Mouse-Clickstate and repeat process to add the User-Check component.

 

Select Default State, Mouse-Over, and Mouse-Click one after the other in the Properties panel to see if the changes are reflected.

 

Switch to the Prototype mode to wire the states

defaultstate_wire.png

mousehover_wired.png

mouseclick_wired.png

 

Now, run the Prototype and see whether it works as intended. Again, this may not be the perfect way to create a checkbox, and I discovered a simpler way to do it. More on that later.

 

 

TOPICS
How to

Views

3.0K

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

Creating checkboxes using components and states in XD

Adobe Employee ,
Nov 15, 2019

Copy link to clipboard

Copied

I went back to the XD artboard, and I realized that there was a simpler and more scalable way to create a checkbox. Let me know if you have a better way to do this.

 

Create a square (I have used Corner radius: 20, Stroke 4)

Screen Shot 2019-11-15 at 6.59.35 AM.png

 

Inside this square, create a smaller square and set its border size to zero.

innersquare.png

 

With the inner square selected, press Ctrl+K or Cmd+K to convert the inner square to a Component. Name the Component InnerSquare

innersquare_component.png

 

Now, select both the outer square and inner square and convert to component. Name it OuterSquare

Screen Shot 2019-11-15 at 7.04.31 AM.png

 

I am using a plug-in ICONS & SYMBOLS to drag icons for check mark and user-check to the artboard

Screen Shot 2019-11-14 at 3.54.06 PM.png

 

Enlarge the icons and convert them to Components named Check and User Check

check_usercheck.png

 

Select OuterSquare component and in the Properties panel, create two new states, Mouse-Over and Mouse-click

 outer_states.png

 

Here's where you have to be very careful. Ensuring that you are in the Mouse-Over state, do the following

  • Right-click the Check component and select Cut
  • Double-click inside the OuterSquare component to select InnerSquare
  • Right-click and paste
  • Move the Check component into the OuterSquare and adjust position.

mouse-over.png

Select the Mouse-Clickstate and repeat process to add the User-Check component.

 

Select Default State, Mouse-Over, and Mouse-Click one after the other in the Properties panel to see if the changes are reflected.

 

Switch to the Prototype mode to wire the states

defaultstate_wire.png

mousehover_wired.png

mouseclick_wired.png

 

Now, run the Prototype and see whether it works as intended. Again, this may not be the perfect way to create a checkbox, and I discovered a simpler way to do it. More on that later.

 

 

TOPICS
How to

Views

3.0K

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 15, 2019 7
Community Beginner ,
Dec 11, 2019

Copy link to clipboard

Copied

Why do we need to create the "InnerSquare" component though? 

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...
Dec 11, 2019 0
Adobe Employee ,
Dec 11, 2019

Copy link to clipboard

Copied

Does it work when you do not convert that to a component? I did this tutorial sometime ago and if you have a better way to achieve this, can you upload your file to a shared location, and share the URL here?

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...
Dec 11, 2019 0
Community Beginner ,
Feb 12, 2020

Copy link to clipboard

Copied

I've noticed that when you add a component to the CC library - it looses the states. Any chance this will be fixed soon?

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...
Feb 12, 2020 1
Adobe Employee ,
Feb 12, 2020

Copy link to clipboard

Copied

The team is working on this, and the feature should be updated soon. Did you try updating to the latest version of XD to see if this issue has been fixed?

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...
Feb 12, 2020 0
Community Beginner ,
Feb 12, 2020

Copy link to clipboard

Copied

Thanks for the response Preran. Yes I'm on the most recent update, looking forward to this feature coming soon. 

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...
Feb 12, 2020 0