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
440
デザインファイルにおける継続的インテグレーション
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
510
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.3k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
410
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
750
サイレントヒーローを作らない取り組み
jaxx2104
1
180
開発組織のメンバーからリーダーになって
jaxx2104
0
130
Nikuman
jaxx2104
0
420
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
340
Vue.jsとLambdaの導入
jaxx2104
0
380
Other Decks in Design
See All in Design
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
0
210
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
140
Installing and Running decksh/pdfdeck
ajstarks
1
830
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
アクセシビリティに取り組むメリット
magi1125
1
240
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
400
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
700
decksh object reference
ajstarks
2
1.3k
portfolio.pdf
onof003
0
140
minpaku-community-scrum-patterns
norinity1103
1
230
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
470
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Docker and Python
trallard
45
3.5k
A better future with KSS
kneath
239
17k
Why Our Code Smells
bkeepers
PRO
338
57k
RailsConf 2023
tenderlove
30
1.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Gamification - CAS2011
davidbonilla
81
5.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
A Tale of Four Properties
chriscoyier
160
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!