ちょいメモ。
Lightning コンポーネント開発者ガイドのここを見る。

今回は開発者ガイドに従って、HelloWorld というコンポーネントを作成する。
以下は Force.com Migration Tool を使ってローカルで開発する場合のファイル構成。

src
├── aura
│   └── HelloWorld
│       ├── HelloWorld.cmp
│       ├── HelloWorld.design
│       └── HelloWorld.svg
└── package.xml

※ Lightning コンポーネントをデプロイしたい場合、package.xml には

<?xml version="1.0" encoding="UTF-8"?>
<Package xmlns="http://soap.sforce.com/2006/04/metadata">
    <types>
        <members>*</members>
        <name>AuraDefinitionBundle</name>
    </types>
    <version>33.0</version>
</Package>

というように AuraDefinitionBundle を指定する。

手順

1. コンポーネントに implements="flexipage:availableForAllPageTypes" を追加する

はじめに、HelloWorld.cmp ファイル。
App Builder に表示したいコンポーネントに上記のインターフェースを実装する。

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="greeting" type="String" default="Hello" />
    <aura:attribute name="subject" type="String" default="World" />

    <div style="box">
      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
    </div>
</aura:component>

2. デザインファイルを作成する

続いて、HelloWorld.design ファイル。
App Builder から編集可能にしたいパラメータを <design:attribute> タグで指定する。

<design:component>
    <design:attribute name="greeting" label="Greeting" datasource="Hello,Hola,Bienvenue,Shalom" />
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
</design:component>

選択リストは Summer'15 から利用可能で、かつ type="picklist" の指定は必要ない。
~~（開発者ガイドが間違っているので要注意）~~ → 修正されてた。

ref. http://releasenotes.docs.salesforce.com/en-us/summer15/release-notes/rn_lightning_datasource_picklists.htm

3. （省略可能）SVG リソースを作成する

最後に、HelloWorld.svg ファイル。
必須ではないが、カスタムコンポーネントを App Builder で表示した時のアイコンを作成することができる。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
    <circle cx="100" cy="100" r="50" stroke="black" stroke-width="5" fill="red" />
</svg>