Sketch で作成したデザインのコンポーネント毎のコード生成と組み立て

Sketch から１枚のデザインをまとめてコード生成をすると、デザイン全体がひとつのコンポーネントとして書き出されます。例えばツールバーのようにどのページでも用いるパーツの場合は、個別にコード生成（コンポーネント化）し、Angular コード上で各コンポーネントを組み合わせた方が運用が容易な場合がありますので、その方法についてご紹介します。

上記のようなシンプルなページを Sketch で作成しました。このうち、Navbar コンポーネントと Articles コンポーネントを別々にコード生成して、Angular コード上での調整によってコンポーネントを組み立てるというのが今回の目的です。また、上記の画像では Articles グループに Article グループが１つしか属していませんが、こちらもAngular コード上で調整して、データバインディングによって複数出力するようにします。以下が最終イメージです。

Navbar コンポーネント, Articles コンポーネントを生成する

以下のように、コード生成のコンポーネント選択画面で、Navbar コンポーネント, Articles コンポーネントをそれぞれ個別に選択してコード生成をします。

生成された各コンポーネントを組み込む

次にそれぞれのコンポーネントをテンプレート上に記述します。今回はルーティングについては考えないようにするため app.component.html に以下のように記述しました。
また、本来コード生成の際に出力される<main class=”igx-typography”>要素で全体を囲んでおきます。

また、本来ページ全体でコード生成した場合は Sketch 上で作成した背景色が反映されますが、今回の場合はコンポーネント毎の生成により背景色が設定されないため、手動にて対応します。app.component.scss に以下のように追加しました。

@import '~igniteui-angular/lib/core/styles/themes/utilities';
@import '../themes/default/index';

main {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    background-color: igx-color($default-palette, primary, 50);
}

また、各コンポーネントを生成した際に付与されるmainおよびform要素は削除しておきます。

Articles コンポーネントの scss 調整およびデータバインドを設定する。

また、Articles コンポーネントでは Articlesデータの数だけカードスタイルの記事コンテンツを出力させてみます。 articles.component.html を以下のように変更しました。

<div class="articles">
    <div class="article" *ngFor="let article of articles;">
        <div class="image-1">
            <img alt="dummy" width="243px" height="208px" src="assets/image.png">
        </div>
        <div class="text">
            <span class="lorem-ipsumissimpl">{{article.text}}</span>
        </div>
    </div>
</div>

バインドするデータは今回は以下のように手動で用意しました。

articles = [
        {id : 1, text : 'broken tin useful settlers pen successful locate door balloon has tears leg white supper gun rain moon steel duty regular mountain rich joined originone'},
        {id : 2, text : 'unknown fallen waste construction basic green hollow driving enough sit process member problem said child adult hang would history twice game memory customs socialtwo'},
        {id : 3, text : 'ranch ability advice production hat brief silence slabs about evening tropical blank hurt shore typical dear exclaimed seen specific pull inside dust herd machinerythree'},
        {id : 4, text : 'symbol stand bad finish kitchen ring pile fall together few foot angle single usually song various making shot wise slope salt system list servefour'},
        {id : 5, text : 'seen perhaps inch attention board religious send steel grass such substance tip shore line chest herself brief attached buried larger valuable help worker southernfive'},
    ]

また、scss にて以下の２つの要素に対して調整を行いました。

.articles {
    display: flex;
    flex-direction: row;
    padding: 30px;
    flex-wrap: wrap;
}
.article {
    width: 243px;
    min-width: 243px;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: rgb(255, 255, 255);
    flex: 0 1 243px;
    margin:16px;
}

以上のところです。今回はかなりシンプルなコンポーネントしか作成していませんが、より複雑になればなるほど、デザインファイルからそのままコード生成によって完璧なコードを生み出すことに対しての難易度は上がっていきます。
上記の scss の調整も Sketch 側でマージンなどがコード生成の際に付与されるように設定することも可能ですが、作業効率を考えた場合に、Angular コード上で調整とした方が効率的な場合があります。

今回の記事執筆に際して作成した Sketchファイルは以下よりダウンロードいただけます。