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
370
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
710
サイレントヒーローを作らない取り組み
jaxx2104
1
150
開発組織のメンバーからリーダーになって
jaxx2104
0
110
Nikuman
jaxx2104
0
380
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
330
Vue.jsとLambdaの導入
jaxx2104
0
370
Other Decks in Design
See All in Design
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
570
Dinosaur Mayhem
storyartist
PRO
0
160
Social Anxiety
ksmith2024
0
160
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
710
Starry | Storyboards | Scene 1-21
giofortuna_story
0
120
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
330
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
150
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
420
セブンデックス カルチャーブック
sevendex
1
7.3k
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
270
Crisp Code inc. ブランドガイドライン
so_kotani
1
150
Masked shaman-Storyboard 2025
ashley0521
0
230
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Six Lessons from altMBA
skipperchong
27
3.7k
Optimizing for Happiness
mojombo
377
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
The Language of Interfaces
destraynor
157
24k
Code Reviewing Like a Champion
maltzj
522
39k
A better future with KSS
kneath
238
17k
How STYLIGHT went responsive
nonsquared
99
5.4k
Fireside Chat
paigeccino
37
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!