ゼファーネットのロゴ

バックライトを使用した設計システムの構築、出荷、および保守

日付:

最近の設計システムは完全な仕事です。 それらを作成するために代理店が雇われます。 社内チームがそれらを処理するために形成され、他のチームがそれらを使用できるようにそれらを出荷し、それらを確実に使用できるようにします。 デザインシステムは流行ではなく、デジタルデザインが行われる方法の前向きな進化です。 バックライト は、設計システム向けの究極のオールインワン開発ツールです。

最後にこれについて考え始めるのは面白いと思います。 ウェブサイトのデザインシステムの最良のシナリオは何ですか? バージョン管理されたデザインシステムをnpmに公開したときだと思います。 そうすれば、チームはそれをプロジェクトへの依存関係として取り込み、使用することができます。 どうやってそれをしますか? デザインシステムはGitHubにあり、そこから公開します。 どうやってそれをしますか? GitHubにプッシュする開発環境を通じて設計システムに取り組みます。 バックライトとは何ですか? それがその開発環境です。

完全な設計システムを数秒で起動します

私がそれをするのを見たいですか?

あなたはそうしない 持ってる スターターテンプレートを選択しますが、すべての可能性を確認することは啓発的です。 バックライトは、システムにどのテクノロジーを使用したいかについて特に意見が分かれていません。 点灯およびWebコンポーネント? 素晴らしい。 反応と感情? いいね。 ただVue? すべて良い。 NunjucksとSass? それはうまくいきます。

スターターデザインシステムを持っていることは本当にあなたにここに足を踏み入れることができます。 既製のものを使用してそれをカスタマイズすることに慣れている場合は、すぐに使用できます。 あなたが理解して落ち着くのに数週間かかるとあなたが思うかもしれない何かが瞬時に行われます。 そして、あなたがすべてについて100%カスタムになりたいのなら、それはまだ完全にテーブルの上にあります。

GitHubまでキックアップ

まだテストしているだけでも、GitHub(またはGitLab)リポジトリを作成して、数回クリックするだけでプッシュできるのは、驚くほど簡単で印象的だと思います。

私にとって、これはそれが本当に現実になる瞬間です。 これは、すべての人が100%使用することを余儀なくされ、永久にロックされているサードパーティのツールではありません。サードパーティのツールを購入する場合にのみ非常に役立ちます。 バックライト 非常に業界標準の慣行を採用し、それらをより簡単かつ便利に操作できるようにします。

次に、それをレジストリにキックします。

冒頭で述べたように、これはどの設計システムにとっても大きな瞬間です。 あなたがそれを次のようなパッケージレジストリに送るとき npm or GitHubパッケージつまり、設計システムを使用したい人は誰でも、それをインストールして、他の依存関係と同じように使用できるようになります。

バックライトでは、これはいくつかのボタンをクリックするだけです。

PROメンバーシップを使用すると、スコープを独自の組織に変更できます。 間もなく、メジャー、マイナー、パッチバージョンを含む、すべてのデザインシステムリリースをここから処理できるようになります。

コンポーネントを作成する

私はこれまでバックライトを使用したことがなく、誰も助けてくれませんでした。また、(堅牢な)ドキュメントも読んでいませんでした。 クリックするだけで、新しいコンポーネントを簡単に作成できました。 ここでの私の場合、私は新しいNunjucksを作りました macro、いくつかのSCSSスタイルを作成し、ストーリーブックの「ストーリー」としてそのデモを作成しました。 私が行ったのは、既存のコンポーネントを参照して、すべてがどのように機能するかを確認することだけでした。

もちろん、CodePenの作成者のXNUMX人として、私はこれらすべてに対するブラウザー内のIDEの品質を高く評価しました。 コードの変更(Viteプロセスのように見えます)を非常に迅速に再構築し、エラーがあれば警告します。

これは非常に現実的な設計システムであるため、この新しいコンポーネントを直接プッシュすることはしません。 master 私たちのリポジトリでは、最初にブランチになり、次にそれをコミットします。 これを実現するためにGitについて何も知る必要はありません。それがいかに簡単かを見てください。

ハウディ、利害関係者!

設計システムは、技術的な関心事であると同時に、人々の関心事でもあります。 設計システムについて話し合う必要があります。 ログインしていなくても、誰とでもバックライトを共有できる方法に本当に感謝しています。共有リンク(誰も推測できない)をコピーするだけで、すぐに利用できます。

ここにはたくさんあります。

ここで設計システム全体を管理できます。 アトミックトークンレベルからサンプルページの作成やシステムの結合に至るまで、物事を管理しています。 あなたは文字通り、バックライトでテンプレート、ストーリー、テストを含むこれらすべてのものを構築するためのコードを書いています。

地元の開発環境を離れるように説得することが本当にできないチームの人々はどうでしょうか。 バックライトはこれを理解します、そしてそれは彼らに強制しません! バックライトは CLI これにより、サーバーを起動してアクティブな作業をプレビューするなど、ローカル開発が可能になります。

しかし、それだけではありません。 バックライトですべてのドキュメントを作成できます。 多くの場合、設計システムは言葉で最もよく説明されます。 また、デザインシステムは、Figma、Sketch、Adobe XDなどの完全にデザインに焦点を当てたソフトウェアで実際に開始(または並行して)する可能性があります。 バックライトでデザインドキュメントをリンクすることが可能で、見つけやすく、より整理されたものになります。


感動しました! その世界全体がどれほど複雑かを知っていたので、最初は設計システムの完全なツールになりたいツールをどうすればよいかわかりませんでしたが、 バックライト 特にフロントエンドの開発者、デザイナー、マネージャーの役​​割から、非常に満足のいく方法で提供します。

スポット画像

最新のインテリジェンス

スポット画像