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
450
デザインファイルにおける継続的インテグレーション
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
520
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.3k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
420
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
770
サイレントヒーローを作らない取り組み
jaxx2104
1
180
開発組織のメンバーからリーダーになって
jaxx2104
0
130
Nikuman
jaxx2104
0
440
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
350
Vue.jsとLambdaの導入
jaxx2104
0
390
Other Decks in Design
See All in Design
DESIGNEAST 2025 A-3
_kotobuki_
0
100
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
510
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
460
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
120
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.7k
役立つシステムを作るためのAI活用
kanzaki
0
110
「UXとUIの違い」v2
shirasu3
0
250
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
310
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Thoughts on Productivity
jonyablonski
70
4.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Facilitating Awesome Meetings
lara
56
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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
デザインの受け渡しで手作業の部分はありませんか? デザインの受け渡しで手作業の部分はありませんか? 継続的インテグレーションで自動化しましょう 継続的インテグレーションで自動化しましょう
ありがとうございました! ありがとうございました!