ZeplinのExtensionを開発して生産性を上げる

こんにちは。Wantedlyでエンジニアインターンをしている新谷哲平です。

Wantedlyではエンジニアとデザイナーのコミュニケーションコストを下げ、生産性を上げるためにZeplinを導入しています。

Zeplinとは、

  • デザインリソースを簡単に共有
  • 自由な場所にコメントをつけることができるのでエンジニアとデザイナーの行き違いを減らせる
  • Sketch, PhotoshopのファイルからCSSを生成してくれる

など、とても便利な機能をたくさん持つデザイン共有ツールです。

いままで

現在、WantedlyのフロントエンドはReactを用いた開発をしている部分が多く、
Reactのスタイリングを行う方法としてstyled-componentsを採用しています。

Zeplinは直接CSSを取り出すことができ、とても便利なのですが、

  1. styled-componentsの構文への機械的な書き換え
  2. デフォルト値に設定されているCSS Attributeの除去
  3. Wantedlyで定められている独自ルール

などエンジニアが生成されたCSSを毎回修正しなければならない状態でした。

今日(2/22)、Zeplinからユーザーがextension開発をできるようになったという発表がありました!


これは作るしかない!と思い、styled-componentsを生成するextensionを

作成しました!!



機能は以下の画像の通りです。

構文の書き換えとCSSのデフォルト値に設定されているものは表示しないようにしました。
まだまだ荒削りですが日々利用することでどんどん最適なものにしていき、最終的にはコピペでstyled-componentsの実装を終わらせることを目標にしています。

これから

この機能によって単純作業が軽減され、より本質的な作業を行うことができるようになり生産性が上がることを確信しています!

具体的なExtension開発の書き方はまた今度書きます!

Zeplinを使っているみなさん、生産性を上げるために自分好みのExtensionを作ってみてはいかがでしょうか?

Wantedly, Inc.'s job postings
Anonymous
9349e1fe bbd3 434b 96fb 8eeeb8c62097?1539262686
C70a2ac2 410f 43de b3b5 5eeb367f3545
Picture?1522981710
E034683e 8dd7 4ff1 a489 d8afc6b75e17?1530492828
Picture?1523160977
33 Likes
Anonymous
9349e1fe bbd3 434b 96fb 8eeeb8c62097?1539262686
C70a2ac2 410f 43de b3b5 5eeb367f3545
Picture?1522981710
E034683e 8dd7 4ff1 a489 d8afc6b75e17?1530492828
Picture?1523160977
33 Likes

Weekly ranking

Show other rankings

Page top icon