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
410
デザインファイルにおける継続的インテグレーション
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
490
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
360
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
700
サイレントヒーローを作らない取り組み
jaxx2104
1
150
開発組織のメンバーからリーダーになって
jaxx2104
0
110
Nikuman
jaxx2104
0
370
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
320
Vue.jsとLambdaの導入
jaxx2104
0
360
Other Decks in Design
See All in Design
Les petites aventures de CSS, saison 2025
goetter
3
4k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
280
Social Anxiety
ksmith2024
0
110
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
500
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
Masked shaman-Storyboard 2025
ashley0521
0
190
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
290
Dive Deep into Communication
yomtsu
0
220
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Code Review Best Practice
trishagee
67
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Navigating Team Friction
lara
183
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Statistics for Hackers
jakevdp
797
220k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Why Our Code Smells
bkeepers
PRO
336
57k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!