Get Your Lightning Components Ready to Use on Lightning Pages | Lightning Components Developer Guide

Custom Lightning components don’t work on Lightning Pages or in the Lightning App Builder right out of the box. To use a custom component in either of these places, you must configure the component and its component bundle so that they’re compatible.

Configure Components for Lightning Pages and the Lightning App Builder
There are three steps you must take before you can use your custom Lightning components in either Lightning Pages or the Lightning App Builder.
Lightning Component Bundle Design Resources
Use a design resource to control which attributes are exposed to the Lightning App Builder. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Lightning component—information that visual tools need to allow adding the component to a page or app.
Configure Components for Lightning Experience Record Pages
After your component is set up to work on Lightning Pages and in the Lightning App Builder, use these guidelines to configure the component so it works on record pages in Lightning Experience.
Create Components for Lightning for Outlook and Lightning for Gmail (Beta)
Create custom Lightning components that are available for drag-and-drop in the Email Application Pane for Lightning for Outlook and Lightning for Gmail (Beta).
Create Dynamic Picklists for Your Custom Components
You can expose a component property as a picklist when the component is configured in the Lightning App Builder. The picklist’s values are provided by an Apex class that you create.
Tips and Considerations for Configuring Components for Lightning Pages and the Lightning App Builder
Keep these guidelines in mind when creating components and component bundles for Lightning Pages and the Lightning App Builder.