2018」の21日目の記事です。devblog.thebase.inはじめまして。2018年2月にBASE株式会社へデザイナーとして入社した小山です。技術ブログを書くのは初めてなのですが、今回は私が2月に入社してから今日までネットショップ作成サービス「BASE」で「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話について書こうと思います。私が入社した当時、デザインチームは人数が増え始めた時期で、大きな課題が2つありました。私が入社する前まではプロダクトに対してデザインデータを作るデザイナーが少なく、各デザイナーが個人のローカルでファイル管理をしていました。その為、誰がどの画面のデザインデータを持っていて、最新のデータがどれなのかを毎回メンバーに確認をして、最新のデータを送ってもらわないとデータを見ることができないという状況でした。ファイル管理については、Abstractの導入でファイル管理とバージョン管理の問題を解決しました。この内容については12月7日の「Abstractを用いたデザイン管理システムを導入して1年経ったお話」で北村が詳しく書いているので興味のある方はぜひ読んでみてください。デザインパーツの共通化もう一つはデザインパーツがデザイン的にもデータ的にも共通化されていなかったことです。当時のBASEは新旧のデザインが入り混じっており、どのパーツが最新のものでどのレイアウトに合わせて作っていいかが入社したての私には難しいものでした。コーディング用のスタイルガイドはあったものの、Sketch用のデータはなかった為、毎回パーツを作るかそのパーツを含むファイルを探してコピーしてくる必要がありました。コンポーネントプロジェクト」が立ち上がりました。コンポーネントとしての仕様決めを行っています。1ファイルでPC、SPの全てのコンポーネントを管理しており、pageもグループごとに分けていました。BASEの管理画面ではコンポーネントの数も多く、レイアウト側のデザインもファイル数が膨大になり、次第に管理が難しくなっていきました。機能を使って別のプロジェクトへリンクさせ、さらに1ファイルで管理していたコンポーネントはcommon、PC、SPの3ファイルで管理するように大改修しました。Designのレベル分けでグルーピングして参照しやすいものに変更しました。kit以外のデザインデータもグループ分けをしてプロジェクトを分けて管理することで、担当外プロジェクトのAbstractのシンクを切ることができます。(これによりAbstractとSketchが軽くなったような気がします。kitを別プロジェクトへ移行してファイルを分割する際に注意するべきことがいくつかありました。Organizerレイアウトされたシンボルを別ファイルのシンボルに一括で置き換えてくれるプラグインです。同じ名前のシンボル同士を置き換えるのでシンボルの名前を変更するタイミングには注意してください。Itコンポーネントの階層を整理したい時にシンボルの名前を一括変更できるのでとても便利なプラグインです。kitの階層も合わせて整理したのでとてもお世話になりました。kitの運用はこれで落ち着いています。Design的にここじゃないよねって思ったタイミングで適宜修正しています。コンポーネントを使うことができるのでデザイン作業が格段に早くなったと思います。kitの大改修もありましたが、毎日使うものだからこそストレスが少ないかたちで運用できる方が楽しく仕事ができるんじゃないかなと思います。)の開発チームによるブログです。Groupの大木です。Developerをしている東口です。Groupのマネージャーをしている山田です。12/1から始まっ...Archiveスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。