Design Resource In Lightning Component Bundle

Today we are doing to disscuss about Design Resource In Lightning Component Bundle,we can see detail with in below screen
                                      
Key Points:-
1)Use a design resource to control which attributes are exposed to builder tools like the Lightning App         
   Builder, Experience Builder, or Flow Builder.
2)the design resource supports only attributes of type Integer, String, or Boolean.

Sample code:-
Aura Component
<aura:component  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >     
 <!--Declared 5 attributes with some default values  -->
    <aura:attribute name="backgroundColor" type="String" default="#000000" />
    <aura:attribute name="boxPadding" type="Integer" default="25" />
    <aura:attribute name="logoURL" type="String" default="https://salesforce/logo/salesforce-primary-logo.png"/>
    <aura:attribute name="textFontSize" type="Integer" default="18" />
    <aura:attribute name="textColor" type="String" default="#e81717" /> 
    <div style="{!'padding:' + v.boxPadding +'px; background-color:' + v.backgroundColor}">   
  <img src="{!v.logoURL}" width="200" height="200" />   
     <p style="{!'font-size:' + v.textFontSize + 'px; color:' + v.textColor}">
       Hi This is s Sample Demo of How to use Desing Resource In Lightning Componnet
     </p>
    </div>
</aura:component>

Design Resource
<design:component >
   <design:attribute name="backgroundColor" label="Background Color" description="Enter Background Color" />
   <design:attribute name="boxPadding" label="Padding" description="Enter Padding without 'px' [i.e 14]" />
   <design:attribute name="logoURL" label="Image URL" description="Enter Secure Image URL" />
   <design:attribute name="textFontSize" label="Font Size" description="Enter font size without 'px' [i.e 14]" />
   <design:attribute name="textColor" label="Font Color" description="Enter font Color" /> 
</design:component>

Main Attribut:-

Name: Its value must match the aura:attribute name value in the .cmp resource.
Lable:Attribute label that displays in the tool.
Description:-Displays as an i-bubble for the attribute in the tool.

How to check the out put:-Got to Setup->Lightning App Builder->New->next-> Give some name below sreccn will come.


AS per Above ,we can see the Aura component and admin can change attribute value also.

For more information please visit below link
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_design_files.htm