デザインファイルにおける デザインファイルにおける 継続的インテグレーション 継続的インテグレーション 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 

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

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