The Lightning Components bundle provides a design file. This can be used to add design parameters that become available for the Salesforce administrators when they drag the components using the Lightning Application Builder, Community Builder, or Flow Builder.

Salesforce provides guidelines on best practices when designing components for the Application Builder here: https://developer.Salesforce.com/docs/atlas.en-us.Lightning.meta/Lightning/components_config_for_app_builder_template_component.htm.

Let's imagine we want to allow admins to change labels in the YouTube component for the Search box placeholder, the Search box label, and the message that appears after the search; we can use the design file to make these configurable.

Let's expose these hardcoded values as attributes in the component markup. The following code snippet shows the changed code. Observe the lines in bold:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" controller="YoutubeSearch" description="This searches youtube with search string">
   <aura:attribute name="searchTerm" type="String" />
   <!--ATTRIBUTES DECLARATION -->
   <aura:attribute name="data" type="Map"/>
   
   <aura:attribute name="searchBoxLabel" type="String" default="Enter Search Term" access="global"/>
   <aura:attribute name="searchBoxPlaceHolder" type="String" default="Enter Search Term" access="global"/>
   <aura:attribute name="resultMessage" type="String" default="You searched for" access="global"/>

   <aura:method name="search" action="{!c.handleClick}"/>
   <div class="c-container">
      <Lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="center">
         <Lightning:layoutItem flexibility="auto" size="6">
            <div class="slds-form-element">
               <label class="slds-form-element__label" for="text-input-id-1">{!v.searchBoxLabel}</label>
               <div class="slds-form-element__control">
                  <input type="search" id="text-input-id-1" class="slds-input" placeholder="{!v.searchBoxPlaceHolder}" aura:id="searchBox"/>
               </div>
            </div>
         </Lightning:layoutItem>
         <Lightning:layoutItem flexibility="auto" size="4" padding="horizontal-small">
            <Lightning:button variant="brand" aura:id="button" label="Search" title="" onclick="{! c.handleClick }" class="c-btn"/>
         </Lightning:layoutItem>
         <Lightning:layoutItem flexibility="auto" padding="around-large" size="6">
            <p aura:id="searchTermRendered"> {!v.resultMessage} {!v.searchTerm} </p>
         </Lightning:layoutItem>
        ----
------
   </div>
</aura:component> 

Let's create a design file for the attributes highlighted in bold in the preceding code sample. A simple youtubesearch.design design file would be as follows:

<design:component label="Youtube Search">
    <design:attribute name="searchBoxLabel" label="Search Box Label" description="The Label of the Search Box" default="Enter Search Term"/>
    <design:attribute name="searchBoxPlaceHolder" label="Search Box Place Holder" description="The Placeholder of the Search Box" default="Enter Search Term"/>
    <design:attribute name="resultMessage" label="Text Message For Results" default="You searched for" description="Text Label for the Search Term "/>
</design:component>

The following screenshot shows how the design file translates to admin-friendly input to allow them to change labels:

You can view the SVG code in the Git repository: https://github.com/PacktPublishing/Learning-Salesforce-Lightning-Application-Development/blob/master/chapter15/force-app/main/default/aura/youtubesearch/youtubesearch.svg. The following screenshot shows how the component appears in the app builder. Notice that it has its own icon: