デザインファイルにおける デザインファイルにおける 継続的インテグレーション 継続的インテグレーション CircleCI ユーザーコミュニティミートアップ Futoshi Iwashita

自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer

No content

フロントエンド周辺のCIの話をします フロントエンド周辺のCIの話をします

frontend design frontend design デザインの世界(ペルソナ、ピクセル、ポリッシュ)とエンジニアリ ングの世界(ロジック、ループ、そしてLinux)の重なりにフロント エンドデザインがあります。 http://bradfrost.com/blog/post/frontend-design/

こういった領域 こういった領域

デザインとエンジニアリングの間で 会話や成果物などの様々なやり取りが発生する 「上手くやれば価値になる」

ということで CircleCI を使って ということで CircleCI を使って デザインファイルを自動化します デザインファイルを自動化します

こんな感じのデザインファイル こんな感じのデザインファイル 今回は Sketch を使います

CircleCI の設定 CircleCI の設定 https://github.com/jaxx2104/design-ci/blob/develop/.circleci/con g.yml

sketchtool sketchtool https://developer.sketch.com/cli/

結果 結果

これによって出来ること これによって出来ること マルチブランチで生成すれば画像の新旧比較 ホスティングによるデザインガイドの生成 リリースタグやブランチマージでCDN配信 など活用方法はさまざま！

こんな感じ こんな感じ https://github.com/jaxx2104/design-ci/pull/2#partial-pull-merging

最後に他のデザインツールについて 最後に他のデザインツールについて Figma は APIがあるのでもっと多くの操作が可能 Adobe XD はまだ CI 連携出来なさそう(今後に期待) https://github.com/ gma/ gma-api-demo https://forums.adobe.com/thread/2623145

jaxx2104/design-ci jaxx2104/design-ci https://github.com/jaxx2104/design-ci

デザインの受け渡しで手作業の部分はありませんか？ デザインの受け渡しで手作業の部分はありませんか？ 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう

ありがとうございました！ ありがとうございました！