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
450
デザインファイルにおける継続的インテグレーション
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
520
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.3k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
420
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
770
サイレントヒーローを作らない取り組み
jaxx2104
1
180
開発組織のメンバーからリーダーになって
jaxx2104
0
130
Nikuman
jaxx2104
0
440
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
350
Vue.jsとLambdaの導入
jaxx2104
0
390
Other Decks in Design
See All in Design
Correspondence:共に生成していく過程
akiramotomura
0
110
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
mento Design Team Portfolio
mento0fficial
1
930
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
220
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
570
decksh object reference
ajstarks
2
1.3k
役立つシステムを作るためのAI活用
kanzaki
0
110
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.9k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
320
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
590
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
RailsConf 2023
tenderlove
30
1.3k
Fireside Chat
paigeccino
41
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Why Our Code Smells
bkeepers
PRO
340
57k
The World Runs on Bad Software
bkeepers
PRO
72
11k
GitHub's CSS Performance
jonrohan
1032
470k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
GraphQLとの向き合い方2022年版
quramy
49
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!