How to design attributes in Lightning Web Components(lwc)

This Post explains how to design attributes in Lighting Web Components(lwc)

In Lightning Component we use Design Resource to create design attributes,  <design:attribute> tag in the design file,
but for Lighting Web Components we need to define the design attribute in Component Configuration File (XML) 
For more information, about config file check this Link

Each Lightning web component folder must include a configuration file named <component>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder.

Example:

designComponentLWCDemo.html

<template>
    <lightning-card title="Design Attribute Demo" icon-name="custom:custom19">
        <center>
            <h3>HI, <b>{strName}</b></h3><br />
            <div if:true={showDetails}>
                <ul>
                    <li> Emp Name: <b>{empName}</b></li>
                    <li> Emp Department: <b>{empDepartment}</b></li>
                    <li> Emp Location: <b>{empLocation}</b></li>
                    <li> Emp Age: <b>{empAge}</b><br /></b></li>
                    <li> Emp Gender: <b>{empGender}</b></li>
                </ul>
            </div>
        </center>
    </lightning-card>
</template>

designComponentLWCDemo.js

import { LightningElement, api} from 'lwc';

export default class DesignComponentLWCDemo extends LightningElement {
    // tracking attributes values
    @api showDetails = false;
    @api strName;
    @api empName;
    @api empDepartment;
    @api empLocation;
    @api empAge;
    @api empGender;
}

designComponentLWCDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="designComponentLWCDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
     <!-- Configuring the design attributes -->
      <targetConfigs>
        <targetConfig targets="lightning__HomePage,lightning__RecordPage">
            <property name="strName" type="String" default="Salesforce Code Crack" label="Enter the Employee Name"/>
            <property name="showDetails" type="Boolean" default="true" label="Do you want to Show Details ?"/>
            <property name="empName" type="String" default="" label="Enter Employee Name"/>
            <property name="empDepartment" type="String" default="" label="Enter Employee Department"/>
            <property name="empLocation" type="String" label="Enter Employee Location" datasource="Hyderabad, Delhi, Pune, Noida"/>
            <property name="empAge" type="integer" label="Enter Employee Age"/>
            <property name="empGender" type="String" label="Enter Employee Gender" datasource="Male, Female"/>
        </targetConfig>
      </targetConfigs>

</LightningComponentBundle>

Demo