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
420
デザインファイルにおける継続的インテグレーション
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
500
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
390
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
730
サイレントヒーローを作らない取り組み
jaxx2104
1
160
開発組織のメンバーからリーダーになって
jaxx2104
0
110
Nikuman
jaxx2104
0
390
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
340
Vue.jsとLambdaの導入
jaxx2104
0
370
Other Decks in Design
See All in Design
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
600
セブンデックス カルチャーブック
sevendex
1
14k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
650
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.5k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
330
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
270
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
110
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
270
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
640
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.6k
Social Anxiety
ksmith2024
0
220
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
880
Gamification - CAS2011
davidbonilla
81
5.3k
Writing Fast Ruby
sferik
628
61k
4 Signs Your Business is Dying
shpigford
183
22k
Scaling GitHub
holman
459
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
740
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!