Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインファイルにおける継続的インテグレーション
Search
jaxx2104
August 23, 2019
Design
2
420
デザインファイルにおける継続的インテグレーション
CircleCI ユーザーコミュニティミートアップ 【LT会】
https://circleci.connpass.com/event/140666/
jaxx2104
August 23, 2019
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
500
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
390
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
740
サイレントヒーローを作らない取り組み
jaxx2104
1
170
開発組織のメンバーからリーダーになって
jaxx2104
0
120
Nikuman
jaxx2104
0
400
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
340
Vue.jsとLambdaの導入
jaxx2104
0
380
Other Decks in Design
See All in Design
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
portfolio_YumiYasuda
yum0418
0
280
How to get a Tiger to Tulsa
mcduckyart
0
100
線で考える画面構成
natsuume
1
870
250131_product meetup
motokoishida
0
210
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
株式会社バクタム 会社説明資料
bactum
0
240
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
私とデザインの10年
iflection
0
130
NAHO SHIMONO_Portfolio2025
nahohphp
0
810
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Kid Cowboy 103
marilutwin
0
240
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
A designer walks into a library…
pauljervisheath
206
24k
Building Adaptive Systems
keathley
43
2.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Being A Developer After 40
akosma
90
590k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
A Tale of Four Properties
chriscoyier
159
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
デザインファイルにおける デザインファイルにおける 継続的インテグレーション 継続的インテグレーション CircleCI ユーザーコミュニティミートアップ Futoshi Iwashita
自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer
None
フロントエンド周辺の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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!