ブラウザでのスケッチ

設計システムを使用しているチームに尋ねると、利点が明確であることがわかります。設計者と開発者の生産性が向上し、製品の一貫性が向上し、分野間のコミュニケーションが明確になります。

ただし、ほとんどの設計システムには依然として根本的な欠陥があります。デザイナーと開発者は、まったく異なる媒体で働き続けます。その結果、それらの同期を維持するための一定の手作業の努力なしに、私たちのコードと設計資産は絶えずますます離れています。

設計システムを使用する企業にとって、業界は本質的に間違った媒体用に設計された設計ツールにこだわっているようです。次の設計ラウンドに開発作業を完全に戻すことはできません。

幸いなことに、これはすべて変更されようとしています。

SEEKスタイルガイドのホームページ

設計システムの旅

SEEKでは、成長し続けるReactコンポーネントのスイートを使用して、1年以上にわたってリビングスタイルガイドに取り組んでいます。ご想像のとおり、これによりビジュアルデザインに対する考え方が根本的に変わりました。

突然、コードで簡単にインストールできる単一の真実のソースがあり、多数の異なるプロジェクトでブランドがどのように表示されるかを定義しました。

当然、私たちの設計システムの仕事はブラウザで始まりませんでした。私たちは、デザインスタイルをより静的な形式で定式化するために、すでに多くの時間を費やしていました。これは、生活スタイルガイドが存在するずっと前からです。

静的PDFとして始まったものは、最終的にSketchスターターキットに取って代わりました。標準化されたシンボル、色、テキストスタイルは、新しい設計作業の出発点として簡単に活用できます。

オリジナルのスケッチスターターキット

しばらくして、InVisionのSketchプラグインのスイートであるCraftを試しました。最も有名なのはライブラリプラグインです。

これにより、ドキュメントの境界とチームの境界の両方でSketchシンボルを共有し、組織全体の共有シンボルライブラリを構築できました。

Craftのライブラリプラグイン

すぐに明らかになったのは、特に新しいパターンと既存のパターンが製品全体で絶えず進化している場合、このライブラリを最新の状態に保つために必要な膨大な作業量でした。

開発者は、多くの場合デザイナーとペアを組んで、コードを変更して視覚デザインに劇的な影響を与える可能性がありますが、静的デザインライブラリは完全に手つかずのままです。起こらなかった。

一方、フェンスの向こう側でもまったく同じ一貫性の問題が発生していました。開発者には、コードの設計に関する明確な真実の情報源がありませんでした。

Reactからreact-sketchappへ

この頃、最初のReactプロジェクト(サーバーレンダリング、webpack、CSSモジュール(途中で共同作成を支援しました))の作業を開始し、最終的には生活スタイルガイドの作成に至りました。

Reactのコンポーネントへの唯一の焦点は、この移行をほぼ不可避にしました。リリース以来、世界中の数え切れないほどの企業で同様のストーリーが展開されているのは驚くことではありません。

コンポーネントのかなりのコレクションを構築すると、新しいプロジェクトに取り組んでいる他のチームはすぐに作業を活用できました。ただし、スタイルガイドはReactコンポーネントとLessスタイルで構成されていたため、デザイナーにとってはほとんど役に立ちませんでした。しかし、これは当面の問題として目立っていませんでした。デザイナーと開発者の間の技術的な切断は古くからの問題です。長い間業界に存在していたため、私たちはそれを無視するように大きく訓練されています。

もちろん、react-sketchappを見るまではそうでした。

React-sketchapp
「Sketchではシンボルとオーバーライドを使用し、Reactではコンポーネントとプロパティを使用します。概念は非常に似ているので、それらを統一しないのは愚かに思えた。」
ジョン・ゴールド、Airbnb

私たちの目は信じられませんでした。ここに、実際のReactコードがあり、Sketchに直接レンダリングしました。開発者と設計者の両方が、最終的に設計システムの単一の真実の情報源を活用できるように思われました。

設計ルールをコードで一元的に定義することで、本番アプリケーションを強化できるだけでなく、デザイナーがすでに使用しているツールに作業をフィードバックすることもできます。デザインルールが進化し続けると、手動でSketchに戻ることなく、デザイナーを自動的に最新の状態に保つことができます。

もちろん、少し掘り下げてみると、react-sketchappにはいくつかの要件があることがわかりました。

  1. コンポーネントはReactで構築する必要がありました(明らかに)。幸いなことに、すでにReactを使用していたため、これは問題ではありませんでした。
  2. JavaScriptでスタイルを定義する必要がありました。私たちのケースでは、デザインシステムがCSSモジュールで構築されていたため、すでに少しハードルがかかっていました。私たちはCSS-in-JSの大ファンですが、少なくとも急いでではなく、エコシステム全体でスタイルをオーバーホールしようとしていませんでした。
  3. コンポーネントは、ブラウザプリミティブではなく、一般的なプリミティブ(View、Text、StyleSheet)を使用し、react-primitivesなどを使用する必要がありました。基本的に、react-sketchappはバニラReactよりもReact Nativeに近かった。繰り返しになりますが、これは私たちが適切に移行できるものですが、多くの作業が必要であり、おそらく途中でいくつかのトレードオフが必要になります。

したがって、react-sketchappは心からお勧めする素晴らしいプロジェクトですが、残念ながらその技術的要件により、短期間から中期的にそれを使用することはできません。

コンポーネントライブラリの移行を決定した場合でも、当面は別の回答が必要でした。

設計をバージョン管理する

既にご存知かもしれませんが、設計ツール内でバージョン管理を使用できるツールが利用可能になりましたが、これは完全に逆です。

設計ツールをバージョン管理に持ち込む必要がありますが、その逆ではありません。独自の壁に囲まれた庭でホストされる、設計中心のサイロに保存されていない他の資産タイプと並んで配置する設計資産が必要です。

そこで、私たちは別のことを試しました。

Kactusといくつかのカスタムノードスクリプトを使用して、Sketchファイルをスタイルガイドリポジトリにコミットする実験を行いました。

Kactus、Sketchファイルのgit diffを表示

これを技術的に達成することはできましたが、少なくともユースケースでは、ワークフローが期待したとおりに機能しなかったことに失望しました。根本的に異なる2つのフォーマットを同期させることは、非常に面倒でエラーが発生しやすく、レビューが困難でした。

コードとSketchファイルを同じ場所に保持することで問題を明確にすることができたかもしれませんが、実際に問題を解決するのにはあまり役立ちませんでした。さらに悪いことに、スタイルガイドの貢献者にとっては、一見ほとんど利益が得られないという大きな摩擦が生じました。 Sketchファイルはすぐに無視されました。私たちにとっては、失敗した実験でした。

しかし、その後、同じプロジェクトでデザイナーと開発者を結び付けることに希望を失ったと感じたときに、html-sketchappが登場し、すべてを変えました。

html-sketchappの出現

react-sketchappを既存の技術スタックに統合するのに苦労しているのは私たちだけではないことが判明しました。

「これらの制限を迅速に回避できなかったため、html-sketchappを作成しました。」
Konrad Dzwinel、Brainly

html-sketchappでは、根本的に異なるアプローチを採用しました。

名前が示すように、html-sketchappを使用すると、通常のHTMLコンテンツからSketchファイルを生成できますが、react-sketchappとは異なり、アプリケーションの技術選択に制限はありません。

Preact、Vue、Angular、Backbone、jQuery、またはRubyやPHPでアプリを構築できます。

もちろん、Reactを使用することもできますが、プロジェクトに適したプリミティブを使用して、好きなようにスタイル設定できます。

契約は非常に簡単でした。HTMLを生成する限り、Sketchにインポートできます。

スケッチファイルの生成

一見、これは魔法のように見えましたが、ボンネットの下を見ると、それほど複雑ではないことがすぐにわかりました。

html-sketchappの仕組みを理解するには、まずSketchのファイル形式を理解する必要があります。驚いたことに、Sketchファイルは実際には単なるZipファイルです。

一度圧縮すると、SketchファイルのほとんどはJSONファイルで作成され、通常のテキストエディターで開くことができます。

これらのファイルの内容を見ると、それは比較的少数のネストされたクラスから本質的に作成された比較的単純な形式であることがわかります。

最下位レベルでは、html-sketchappを使用すると、これらのクラスのインスタンスをプログラムで生成し、JSONに変換できますが、それ以上のことができます。

html-sketchappで最も強力な機能は「nodeToSketchLayers」です。これにより、単一のブラウザー要素をSketchレイヤーの配列に変換できます。これは、ブラウザスタイルを抽出し、それらを同等のスケッチに変換するためのすべてのロジックを含むため、ほとんどの魔法が発生する場所です。

これを本当に統合するのが「SymbolMaster」クラスです。これにより、Sketchシンボルを動的に生成できます。シンボルはSketchライブラリの基礎を形成するため、基礎となるコードに直接基づいて、デザイナーに一連のコンポーネントを選択的に公開することができました。

残念ながら、現在のSketch形式にはテキストスタイルのエンコード方法に関する制限があるため、生成されたドキュメントは有効なSketchファイルではありません。そのため、html-sketchappのSketchプラグインを使用して手動でインポートする必要があります。ありがたいことに、このプロセスはそれほど難しくありません。

これらのすべての手順をまとめて配線することは、最初はやや難しいように思えましたが、既存のスタイルガイドをSketchドキュメントに変換する方法を示すGitHubのサンプルプロジェクトが既にあることが判明しました。

これを見てすぐに、実験を始めるのに長い時間はかからず、本当に驚くべき結果を見るようになるまでに驚くほど短い時間がかかりました。

html-sketchappの実験

まず、何が可能かを把握するために、スタイルガイドのウェブサイトのホームページでそれを指摘しました。

次に、「ボタン」コンポーネントから最初のシンボルの生成を開始し、いくつかの異なるバリエーションをレンダリングしました。

これを実現するために、各コンポーネントフォルダー内に特別なJavaScriptファイル(例:Button.sketch.js)を追加し、エクスポートするシンボルを定義する規則を思い付きました。

各ファイルは、シンボル名とそれに対応するReact要素を定義するオブジェクトをエクスポートします。

ReactからReactをインポートします。
'./Button'からボタンをインポートします。
エクスポートconstシンボル= {
  'ボタン/ピンク':

次に、スタイルガイドサイトで特別な非表示ルートを作成し、「。sketch.js」で終わるファイルをインポートして、指定されたReact要素を画面にレンダリングしました。このアプローチにより、すべてのSketchコンテンツを1ページに公開することで、変換プロセスを大幅に簡素化することができました。

各シンボルインスタンスは、名前がデータ属性で定義されているdiv要素にラップされていたため、ページ上のすべてのシンボルを簡単に選択して名前を付けることができました。

  ...

このパターンは非常に効果的であることがわかり、すぐにテキストスタイルとドキュメントの色を含めるように拡張しました。

スタイルガイドは応答性が高いため、ブラウザーウィンドウのサイズを変更し、さまざまな画面サイズでシンボルスナップショットを取得するプロセスを自動化しました。

これで、1つの場所でビューポートサイズを追加、削除、および名前変更でき、すべてのシンボルがこれらの新しい値を反映して再生成されます。一挙に、レスポンシブスケッチライブラリを維持する際の最も退屈な問題の1つを解決できたようです。

すべてが驚くほどスムーズに進みましたが、Sketchをサポートするために、バグのあるブラウザー実装をサポートするのと同じ方法でいくつかの回避策を追加する必要がありましたが、単一のファイルにローカライズすることができました。

実験から生産まで

小規模な実験として始まったものは、すぐにミニフレームワークのように雪だるま式になりました。この時点で、標準のビルドプロセスの一部として実行するスタイルガイドに適切に統合するのに、多くの作業は必要ありませんでした。

ただし、プルリクエストを見ると、概念的にシンプルな単一のタスクを達成しようとしていたにもかかわらず、多くの余分な配線コードと依存関係を含める必要があることがわかります。

Sketchライブラリを生成するには、次の手順を実行する必要がありました。

  • 要素を選択および変換するためのhtml-sketchappおよび付随するロジックを含むwebpackを使用して、ブラウザースクリプトをコンパイルします。
  • 使用可能なポートで静的Webサーバーを起動します。
  • Puppeteer(Chromiumのヘッドレスバージョン)を開きます。
  • 正しいURLに移動します。
  • コンパイルされたスクリプトを実行中のPuppeteerインスタンスに挿入します。
  • ブラウザウィンドウのサイズを複数回変更し、コンパイル済みスクリプトで定義されている関数を呼び出して、構成された各画面サイズでスナップショットを取得します。
  • 結果のJSONファイルをディスクに書き込みます。
  • 静的Webサーバーをシャットダウンします。
  • ヘッドレスブラウザーをシャットダウンします。

これは1つのコマンドで簡単に合理化できることは明らかでした。1つのコマンドを使用すると、URLを指定してスナップショットの作成を開始できます。

それが私たちのやったことです。

html-sketchapp-cliの公開

最初にhtml-sketchappをスタイルガイドに統合してから1か月も経たないうちに、ソースコード化されたhtml-sketchapp-cliを開きます。これは、この配管コードをすべて手に入れる小さなコマンドラインユーティリティです。

これで、単一の依存関係と単純な宣言型構成ファイルで同じことを実現できました。

module.exports = {
  提供:「docs / dist」、
  url: '/ sketch-exports'、
  outDir: 'dist / asketch'、
  ビューポート:{
    「デスクトップ」:「1024x768」、
    「モバイルプラス」:「414x736」、
    「モバイル」:「320x568」
  }
};

当然のことながら、スタイルガイドでhtml-sketchapp-cliを使用すると、多くのコードを削除できました。

継続的な設計パイプライン

このすべてのツールは標準の継続的デリバリーパイプラインの一部であるため、開発者コミュニティを超えて日々の作業でデザイナーをサポートすることで、コードの範囲を広げることができます。

スタイルガイドのビルドが成功するたびに(ghページを使用して)サイトをGitHubページに自動的に展開し、セマンティックリリースを使用してnpmにコンポーネントライブラリを公開するだけでなく、 'Almost Sketch'ファイルを自動的に生成します。インポートして、公式のSketchライブラリに変換する準備ができています。

このSketchライブラリは、デザインチームの共有ドライブを介して配信されます。つまり、Sketchが開いている間でも、デザイナーは常にライブラリの最新のコピーを持ち、リアルタイムで同期します。

Sketchの新しい組み込みライブラリサポートのおかげで、設計者は「SEEKスタイルガイドライブラリ」メニューをすぐに開き、コンポーネントの選択を開始できます。命名規則と視覚的なスタイルがチームの開発者の期待に一致することがわかります。

これが導入されて以来、コードに加えられた変更がSketchに流れ続けていることがあります。変更を加えた人がSketchをマシンにインストールしていない場合もあります。スタイルガイドはプロダクションアプリケーションに接続されているため、組織全体の人々から絶えず改善されており、これらすべての改善が引き続きSketchライブラリを最新かつ最新の状態に保つことを保証できます。

技術的にまだ異なる媒体で作業している場合でも、単一の統一された言語の錯覚を作成するために努力しています。

だから、ここからどこへ?

この開発は私たちにとって素晴らしいことでしたが、私たちはまだこれを暫定的な解決策としてのみ見ています。 WebコンテンツをSketchにレンダリングすることは非常に強力であり、私たちの旅の前進に必要な一歩ですが、業界はこれをさらに進める必要があります。

媒体間の境界線はぼやけているかもしれませんが、将来の設計ツールはこの境界線を完全に削除する必要があります。この可能性を真に実現するには、ターゲットメディアを模倣するだけでなく、実際に構築する必要がある設計ツールが必要です。

幸いなことに、現在この問題に取り組んでいる人たちは不足していません。 Compositor、Interplay、Alva、Haiku、Webflow、およびUXPinなどのツールは、設計ツールと基礎となるコードの間の技術的な壁を打破しようとしていますが、このようなツールがさらに増えています。

誰もが知っています。特に設計システムが現代の設計ツールキットの標準的な部分になり続けているため、関連性を保つために、従来の設計ツールがこのアプローチを採用することさえあります。

その間、設計システム時代を牽引する原則を真に取り入れる新しい設計ツールを待っている間、react-sketchappやhtml-sketchappのようなプロジェクトは、今日のこの新しい考え方に私たちを準備させる驚くべき仕事をしています。

率直に言って、始めるのにこれほど良い時間はありませんでした。