Error when trying to remove a lightning component's <design:attribute>

This is a bit tricky Exercise .In fact the error gives an idea on why this showing up .When you have implemented a lightning Interface of AllPageTypes which means you cannot get rid of design file attributes

Step 0 - you might have to delete Lightning Pages that make reference to the component. Otherwise Salesforce might show an error when you try to remove the interface (or fields).

Step 1 - Lets remove the Interface from your code first ,so try removing the implements attribute

     <aura:component controller="FormController" access="global">
     <aura:attribute name="taxRate" type="String" access="global"/>
     ....
          </aura:component>

Step 2 - Remove the Design attribute now .

Step 3 - Remove the Attribute once you have removed the designed reference

Step 4 - Add the implements and other code back .

I had this issue and the following worked for me:

1. Delete the design file

For the record, these are the specific steps I performed to solve the problem after following @Mohith answer:

1. Remove use of the involved Lightning Component from all Lightning Page using Lightning App Builder.

   • Note: Performing step 2 first can be helpful in identifying which Lightning Pages are using the Lightning Component
   • Alert: Take note of the involved Lightning Component's attribute values before removing from the Lightning Page. Unless these are the default values defined in the CMP file's <aura:attribute>, there's no way to restore this once Lightning App Builder is done saving.

2. CMP file - cut the implements="xxx" attribute, then Save.

3. DESIGN file - remove the <design:attribute>, then Save.
4. CMP file - remove the <aura:attribute>, restore the implements="xxx" attribute, then Save.
5. Restore Lightning Component back to all affected Lightning Apps and re-populate the attributes.