デザインファイルにおける継続的インテグレーション

CircleCI ユーザーコミュニティミートアップ 【LT会】
https://circleci.connpass.com/event/140666/

Transcript

1. デザインファイルにおける デザインファイルにおける 継続的インテグレーション 継続的インテグレーション CircleCI ユーザーコミュニティミートアップ Futoshi Iwashita
2. 自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer
4. フロントエンド周辺のCIの話をします フロントエンド周辺のCIの話をします
5. frontend design frontend design デザインの世界(ペルソナ、ピクセル、ポリッシュ)とエンジニアリ ングの世界(ロジック、ループ、そしてLinux)の重なりにフロント エンドデザインがあります。 http://bradfrost.com/blog/post/frontend-design/
6. こういった領域 こういった領域
7. デザインとエンジニアリングの間で 会話や成果物などの様々なやり取りが発生する 「上手くやれば価値になる」
8. ということで CircleCI を使って ということで CircleCI を使って デザインファイルを自動化します デザインファイルを自動化します
9. こんな感じのデザインファイル こんな感じのデザインファイル 今回は Sketch を使います
10. CircleCI の設定 CircleCI の設定 https://github.com/jaxx2104/design-ci/blob/develop/.circleci/con g.yml
11. sketchtool sketchtool https://developer.sketch.com/cli/
12. 結果 結果
13. これによって出来ること これによって出来ること マルチブランチで生成すれば画像の新旧比較 ホスティングによるデザインガイドの生成 リリースタグやブランチマージでCDN配信 など活用方法はさまざま！
14. こんな感じ こんな感じ https://github.com/jaxx2104/design-ci/pull/2#partial-pull-merging
15. 最後に他のデザインツールについて 最後に他のデザインツールについて Figma は APIがあるのでもっと多くの操作が可能 Adobe XD はまだ CI 連携出来なさそう(今後に期待) https://github.com/ gma/ gma-api-demo https://forums.adobe.com/thread/2623145
16. jaxx2104/design-ci jaxx2104/design-ci https://github.com/jaxx2104/design-ci
17. デザインの受け渡しで手作業の部分はありませんか？ デザインの受け渡しで手作業の部分はありませんか？ 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
18. ありがとうございました！ ありがとうございました！