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

3163582dea3e2c8164e2d690b36a8501?s=47 jaxx2104
August 23, 2019

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

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

3163582dea3e2c8164e2d690b36a8501?s=128

jaxx2104

August 23, 2019
Tweet

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