Use Salesforce Lightning Design System to Build a Prototype

Learning Objectives

After completing this module, you’ll be able to:

  • Break down a project into digestible pieces.
  • Utilize the Lightning Design System to rapidly prototype.
  • Create a prototyping environment inside Salesforce.
Note

As of Spring '19 (API version 45.0), you can develop Lightning components using two programming models: the Lightning Web Components model and the original Aura Components model. In this module, we create an Aura component. To learn about Lightning Web Components, see Build Lightning Web Components Trail.

Where to Start?

Starting with a blank page can be daunting. Luckily we have the screens our designers created to help get us started. We use them to break the content into a set of columns to give our layout a grid system.

Ask yourself, is it one large column, or a 1/3–2/3 setup? Is there a header across the top that takes up the full width?

Screen shot showing a grid overlay on our design, with the left navigation being 1/3 of the screen width and the results section being 2/3 of the width

  1. 1/3 width column
  2. 2/3 width column

Once that’s done, let’s break down the design further into components, like tab sets, data tables, or cards. This is best done using the Lightning Design System.

Use the Lightning Design System to Your Advantage

By using the Salesforce Lightning Design System (SLDS), we can translate the different sections of the designers’ screens to specific Lightning components that will make development easier.

The design system offers code blocks for many common user interface components, such as data tables, tab sets, and cards. In addition, there are also base lightning components available through Salesforce that we can use without needing to worry about the underlying code. By using both the Lightning Design System and the base lightning components, we can map each portion of the design to components and plan for the pieces that have to be custom made. This lets us put more of our energy toward the implementation.

Screen shot showing an SLDS overlay of our design, with a Vertical Navigation component and SLDS Grid section that contains multiple Card components

  1. Vertical Navigation Component
  2. SLDS Grid
  3. Card component

Setting Up a Prototype Inside the Platform

Now let’s create an application inside our Trailhead Playground where we'll implement our prototype. Create a new Trailhead Playground for this module. Using an existing org might create problems when you check the challenge.

By using the Lightning Design System and base lightning components, we can quickly produce a prototype to share with stakeholders.

Create an Application to Host Our Prototype

We create our prototype over 5 steps. Follow along in your Trailhead Playground.

Step 1: Create a Search Proto app in your org

  1. From Setup, enter App Manager in the Quick Find and select App Manager.
  2. Click New Lightning App.
  3. Name the app Search Proto. Clicking on the Developer Name input will auto fill the Developer name to Search_Proto, leave as is.
  4. Click Next.
  5. Leave Standard navigation selected, then click Next.
  6. Click Next again (we don’t need a utility bar).
  7. We’re not going to add any items to our app yet, so leave Selected Items blank and click Next.
  8. Highlight all Available Profiles and click the Add icon to move them to Selected Profiles.
  9. Click Save & Finish.

Step 2: Create a Search Results page using the Lightning App Builder 

  1. From Setup, enter Lightning App Builder in the Quick Find and select Lightning App Builder.
  2. Click New to add a new lightning app.
  3. Select App Page and click Next.
  4. Name the page: Search Results.
  5. Select the Header and Left Sidebar layout and click Finish.

Step 3: Edit the Search Results page

  1. In the page editor, use the view selector dropdown at the top of the page and choose Desktop.
    Screen shot showing view selector being changed from phone to Desktop
  2. Click Save and then Activate.
  3. (Optional) Change the app icon.
  4. Under the Lightning Experience tab, click our Search Proto app, and then click Add page to app.
  5. Click Save.
  6. Click Back in the top right corner of the page.
  7. Click the App Launcher Icon App Launcher and select Search Proto.

You should now see a blank Search Results page in your Search Proto app as one of the app’s tabs.

Screen shot showing blank Search Results page in our Trailhead Playground

Step 4: Use Developer Console and Lightning Design System to make a custom component

  1. Click the Setup Gear Icon setup gear icon and choose Developer Console.
  2. In Developer Console, select File › New › Lightning Component.
  3. Enter VerticalNavigation as the name.
  4. Select all the configuration option checkboxes.
    Screen shot showing New Lightning Bundle modal with Name VerticalNavigation and all configuration options checked
  5. Click Submit.
  6. Replace the placeholder code with the following code for the vertical navigation:
  <aura:component implements="force:appHostable,
  flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
  force:hasRecordId,forceCommunity:availableForAllPageTypes,
  force:lightningQuickAction" access="global" >
    <div class="slds-card">
      <div class="slds-grid slds-grid__vertical slds-navigation-list__vertical">
        <h2 class="slds-text-title__caps slds-p-around__medium" id="entity-header">Results for 'CO'</h2>
        <ul>
          <li class="slds-is-active">
            <a href="javascript:void(0);" class="slds-navigation-list__vertical__action slds-text-link__reset" aria-describedby="entity-header">
              All
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" class="slds-navigation-list__vertical__action slds-text-link__reset" aria-describedby="entity-header">
              Accounts
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" class="slds-navigation-list__vertical__action slds-text-link__reset" aria-describedby="entity-header">
              Contacts
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" class="slds-navigation-list__vertical__action slds-text-link__reset" aria-describedby="entity-header">
              Leads
            </a>
          </li>
        </ul>
      </div>
    </div>
  </aura:component>

Click File > Save.

Step 5: Use Base Lightning Components to create another custom component

  1. Still within the Developer Console, select File › New › Lightning Component.
  2. Enter ResultsSection as the name.
  3. Select all the configuration option checkboxes.
  4. Click Submit.
  5. Replace the placeholder code with the following code for section headings:
    <aura:component implements="force:appHostable,
    flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
    force:hasRecordId,forceCommunity:availableForAllPageTypes,
    force:lightningQuickAction" access="global" >
      <div class="slds-card">
        <h2 class="slds-text-heading__medium slds-p-left_small slds-p-vertical__medium">
          Accounts
        </h2>
        <div class="slds-grid">
          <!-- REPLACE THIS WITH THE CODE FOR ACCOUNT CARDS -->
        </div>
        <h2 class="slds-text-heading__medium slds-p-left_small slds-p-vertical__medium">
          Contacts
        </h2>
        <div class="slds-grid">
          <!-- FOR CHALLENGE: REPLACE THIS WITH THE CODE FOR CONTACT CARDS -->
        </div>
        <h2 class="slds-text-heading__medium slds-p-left_small slds-p-vertical__medium">
          Leads
        </h2>
        <div class="slds-grid">
          <!-- FOR CHALLENGE: REPLACE THIS WITH THE CODE FOR LEAD CARDS -->
        </div>
      </div>
    </aura:component>

For each section’s content, we add a set of lightning:card components inside the empty <div> tags. Let’s focus on the Account cards for now. After the comment saying <!-- REPLACE THIS WITH THE CODE FOR ACCOUNT CARDS -->, add the following code:

    <ul class="slds-col slds-size__1-of-1">
      <li class="slds-size__1-of-3 slds-show__inline-block">
        <lightning:card variant="narrow" class="slds-m-around__small slds-card_boundary">
          <aura:set attribute="title">
            Compass Construction Inc.
          </aura:set>
          <div class="slds-tile slds-p-horizontal__large">
            <div class="slds-tile__detail slds-text-body__small">
              <dl class="slds-list__horizontal slds-wrap">  <dt class="slds-item__label slds-text-color__weak slds-truncate" title="First Label">Phone:</dt>
                <dd class="slds-item__detail slds-truncate">(123) 456-7890</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Second Label">Website:</dt>
                <dd class="slds-item__detail slds-truncate">compassinc@construction.com</dd>
                <dt class="slds-item__label slds-text-color--weak slds-truncate" title="Third Label">Account Owner:</dt>
                <dd class="slds-item__detail slds-truncate">Amelia Abbott</dd>
              </dl>
            </div>
          </div>
        </lightning:card>
      </li>
      <li class="slds-size--1-of-3 slds-show__inline-block">
        <lightning:card variant="narrow"  class="slds-m-around__small slds-card_boundary">
          <aura:set attribute="title">
            Northern Trail Coalition
          </aura:set>
          <div class="slds-tile slds-p-horizontal--large">
            <div class="slds-tile__detail slds-text-body__small">
              <dl class="slds-list__horizontal slds-wrap">
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="First Label">Phone:</dt>
                <dd class="slds-item__detail slds-truncate">(555) 456-7890</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Second Label">Website:</dt>
                <dd class="slds-item__detail slds-truncate">trail@coalition.com</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Third Label">Account Owner:</dt>
                <dd class="slds-item__detail slds-truncate">Hadi Samara</dd>
              </dl>
            </div>
          </div>
        </lightning:card>
      </li>
      <li class="slds-size__1-of-3 slds-show__inline-block">
        <lightning:card variant="narrow" class="slds-m-around__small slds-card_boundary">
          <aura:set attribute="title">
              Coffee Corp
          </aura:set>
          <div class="slds-tile slds-p-horizontal__large">
            <div class="slds-tile__detail slds-text-body__small">
              <dl class="slds-list__horizontal slds-wrap">
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="First Label">Phone:</dt>
                <dd class="slds-item__detail slds-truncate">(123) 555-7890</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Second Label">Website:</dt>
                <dd class="slds-item__detail slds-truncate">coffee@corp.com</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Third Label">Account Owner:</dt>
                <dd class="slds-item__detail slds-truncate">Franz Jenkins</dd>
              </dl>
            </div>
          </div>
        </lightning:card>
      </li>
      <li class="slds-size__1-of-3 slds-show__inline-block">
        <lightning:card variant="narrow" class="slds-m-around__small slds-card_boundary">
          <aura:set attribute="title">
            Looper Coding Camp
          </aura:set>
          <div class="slds-tile slds-p-horizontal__large">
            <div class="slds-tile__detail slds-text-body__small">
              <dl class="slds-list__horizontal slds-wrap">
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="First Label">Phone:</dt>
                <dd class="slds-item__detail slds-truncate">(123) 456-0000</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Second Label">Website:</dt>
                <dd class="slds-item__detail slds-truncate">looper@codingcamp.com</dd>
                <dt class="slds-item__label slds-text-color__weak slds-truncate" title="Third Label">Account Owner:</dt>
                <dd class="slds-item__detail slds-truncate">Carmen Morales</dd>
              </dl>
            </div>
          </div>
        </lightning:card>
      </li>
    </ul>

Click File > Save.

Step 6: Add our components to the page in the page editor

  1. Back in your org on the Search Results page, click the Setup Gear Icon setup gear icon and choose Edit Page.
  2. In the Page Editor, look for VerticalNavigation and ResultsSection components under Custom components.
    Screen shot showing Page Editor menu with two custom components, Results Section and Vertical Navigation

  3. Drag the VerticalNavigation component into the left sidebar (the narrow column) of our page.
  4. Drag the ResultsSection component into the main body (the wide column) of our page.
  5. Click Save, then click Back.
  6. Now you should see your Search Results page look like this:

Screenshot showing search results page with four account cards.

Resources

Keep learning for
free!
Sign up for an account to continue.
Sign Up Login
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities
Skip for now