Design a Excel (text) and INACTIVE (radio button) then autolayout them naming “Excel Inactive“

• Increase autolayout Height to 50 and autolayout Width to 385

• Increase Autolayout Left padding to 15 and right padding 24

Duplicate Excel Inactive in bottom and rename to “Normal Active”

• Rename Excel text to Normal and add Active Radio Button

• Add background color and border radius in “Normal Active” autolayout

Once More Duplicate Excel Inactive in bottom and rename to “Detailed Inactive”

Select Excel Inactive, Normal Active, Detailed Inactive and duplicate them in bottom

• Can add Active Radio Button in Excel and add fill color and border radius in Excel autolayout

• Remove Normal Active background color and replace active radio button with inactive radio button

Select Excel Active, Normal Inactive, Detailed Inactive and one more duplicate them in bottom

• Remove Excel Active background color and replace active radio button with inactive radio button

• Rename Excel Active to Excel Inactive

• Can add Active Radio Button in Detailed and add fill color and border radius in Detailed autolayout

Select Excel Inactive, Normal Active, Detailed Inactive and create component naming Normal

Then Select Excel Active, Normal Inactive, Detailed Inactive and create component naming Excel

Select Excel Inactive, Normal Inactive, Detailed Active and create component naming Detailed

Select Normal, Excel and Detailed component and click on “Combine as Variants” Button and rename that component to Invoice Type

prototype the component

• Transitions

  • Excel Inactive frame → to Excel component

• Interaction Details

  • on click

  • change to

  • property - Excel

• Animation

  • Instant

prototype another component

• Transitions

  • Detailed Inactive frame → to Detailed component

• Interaction Details

  • on click

  • change to

  • property - Detailed

• Animation

  • Instant

Select Invoice Type component

click assets and select variant Invoice Type