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

Transcript

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

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

3. None

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. ありがとうございました！ ありがとうございました！