Select 2 text and Autolayout them

• Can select autolayouted text and toggle switch and autolayout them

• Increase autolayout Height to 50 and Width to 390

• Increase Autolayout frame Left padding to 8 and right padding to 17

• Add fill color in frame and add 5 border Radius in frame

Duplicate frame in bottom

• Can rename Dealer name to Customer name

Duplicate one more frame in bottom and change Purple color Text to Sales > 50 lacs ?

Duplicate Once more frame in bottom and change Purple color Text Payments > 50 lacs ?

Create a new Frame and add text in frame and autolayout text and frame

• Increase frame Height to 27 and Width to 414

• Change frame Fill Color to Red

Select all Frame and click on “Create Component” icon from top right

• View + icon in top right and Add New Property

• Click on Variant Button

• Autolayout Component

Click on “+” button and add new variant

• Rename Variant2 to Dlr Turn Over_Yes

• Toggle on Dealer Turn Over > 10 Crores ? frame

Select component and Click on “+” button and add new variant

• Rename Variant3 to Cust Turn Over_Yes

• Can toggle on Customer Turn Over > 10 Crores ? frame toggle

Select component and Click on “+” add variant button and add new variant

• Rename Variant4 to  Dlr Turn Over_Yes and Cust Turn Over_Yes

• Can toggle on Dealer Turn Over > 10 Crores ? and Customer Turn Over > 10 Crores ? frame toggle

Click on “+” button and add new variant

• Add autolayout in component and on Wrap Layout

• Rename Variant5 to Cust Payments_Yes

• Can Toggle on Payments > 50 lacs ? frame toggle

Click on “+” button and add new variant

• Rename Variant6 to Dlr Turn Over_Yes and Cust Payments_Yes

• Can Toggle on Dealer Turn Over > 10 Crores ? and Payments > 50 lacs ?  frame toggle

• Change red background color to Purple Background and change purple background text

Select component and click on “+” button and add new variant

• Rename Variant7 to Dlr Turn Over_Yes and Cust Payments_Yes

• Can toggle on Customer Turn Over > 10 Crores ? and Payments > 50 lacs ? frame toggle

Click on “+” button and add new variant

• Rename Variant8 to Dlr Turn Over_Yes, Cust Turn Over_Yes and Cust Payments_Yes

• Can toggle on Dealer Turn Over > 10 Crores ?, Customer Turn Over > 10 Crores ? and Payments > 50 lacs ? frame toggle

• Change red background color to Purple Background and change purple background text

Click on “+” button and add new variant

• Rename Variant9 to Cust Sales_Yes

• Can toggle on Sales > 50 lacs ? frame toggle

Select component and click on “+” button and add new variant

• Rename Variant10 to Dlr Turn Over_Yes and Cust Sales_Yes

• Can toggle on Dealer Turn Over > 10 Crores ? and Sales > 50 lacs ? frame toggle

Click on “+” button in bottom and add new variant

• Rename Variant11 to  Cust Turn Over_Yes and Cust Sales_Yes

• Can toggle on Customer Turn Over > 10 Crores ? and Sales > 50 lacs ? frame toggle

• Change Red background frame Text

Select component and click on “+” button and add new variant

• Rename Variant12 to Dlr Turn Over_Yes, Cust Turn Over_Yes and Cust Sales_Yes

• Can toggle on Dealer Turn Over > 10 Crores ?, Customer Turn Over > 10 Crores ? and Sales > 50 lacs ? frame toggle

• Change Red background frame Text

Click on “+” button in bottom and add new variant

• Rename Variant13 to Cust Sales_Yes and Cust Payments_Yes

• Can toggle on Sales > 50 lacs ? and Payments > 50 lacs ? frame toggle

Click on “+” button in bottom and add new variant

• Rename Variant14 to Dlr Turn Over_Yes, Cust Sales_Yes and Cust Payments_Yes

• Can toggle on Dealer Turn Over > 10 Crores ?, Sales > 50 lacs ? and Payments > 50 lacs ? frame toggle

• Change red background color to Purple Background and change purple background text

Select component and click on “+” button and add new variant

• Rename Variant15 to Cust Turn Over_Yes and Cust Sales_Yes

• Can toggle on Customer Turn Over > 10 Crores ?, Sales > 50 lacs ? and Payments > 50 lacs ? frame toggle

• Change Red background frame Text

Click on “+” button in bottom and add new variant

• Rename Variant16 to Dlr Turn Over_Yes, Cust Turn Over_Yes, Cust Sales_Yes and Cust Payments_Yes

• Can toggle on Dealer Turn Over > 10 Crores ?, Customer Turn Over > 10 Crores ?, Sales > 50 lacs ? and Payments > 50 lacs ? frame toggle

• Change Red background frame Text

and make interactions

• Transitions

  • Frame to → Dlr Turn Over_Yes Variant

• Interaction Details

  • on click

  • change to

  • Dlr Turn Over_Yes

• Animation

  • Smart animate

  • Ease out

  • 600ms

Select component and Duplicate frame in outside of component

• Add Frame in Variant

• Select frame and click on play button