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
390
デザインファイルにおける継続的インテグレーション
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
480
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.1k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
320
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
650
サイレントヒーローを作らない取り組み
jaxx2104
1
140
開発組織のメンバーからリーダーになって
jaxx2104
0
100
Nikuman
jaxx2104
0
340
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
320
Vue.jsとLambdaの導入
jaxx2104
0
350
Other Decks in Design
See All in Design
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
Ubie Vitalsの取り組み紹介
8845musign
0
650
Du Bois Challenge 2024 Recap
ajstarks
1
130
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
120
AIイラスト生成・編集テクニック紹介
piyo7
2
220
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
310
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
1.4k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
530
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
1
580
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
150
Pizza Trail v2
jerfusart
0
110
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
970
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Agile that works and the tools we love
rasmusluckow
327
20k
Designing for humans not robots
tammielis
248
25k
What's new in Ruby 2.0
geeforr
340
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
How to train your dragon (web standard)
notwaldorf
85
5.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Being A Developer After 40
akosma
84
590k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!