開発者とデザイナーは、Uxpinを使用して単一の真実のソースに取り組んでいます-CSSチュートリアル-php.cn

開発者とデザイナーは、Uxpinを使用して単一の真実のソースに取り組んでいます

Web設計と開発ツールの間の対立は、常に業界で長年にわたる問題でした。通常、Webデザインの最終結果はモデルであり、開発者はWebサイトやデザイナーにWebサイトを「塗装作品」に作成していたモデルであり、この切断は大きな摩擦を生み出しました。真実の源はどれですか？

実際に単一の事実源がある場合はどうなりますか？設計ツールが制作Webサイトとまったく同じコードを使用している場合はどうなりますか？この長期にわたる議論の最新の章はuxpinです。

このすべてをよりよく理解できるように、最初にいくつかの事実を理解しましょう。

UXPIN：コードベースのブラウザー設計ツール

Uxpinは、特にデジタル画面ベースのデザインと高度なプロトタイピングに焦点を当てた、期待するすべての機能を備えた強力な設計ツールです。

それがコードに基づいているという事実は特に重要です。すべての視覚コンポーネント（実際にはコードに根付いている）を使用して、Webサイトを設計し、最終製品にデザインを近づけます。あなたのデザインは、ウェブサイトやアプリのように見えるだけでなく、ウェブサイトやアプリなども機能します。たとえば、アウトラインを備えた静的ボックスの代わりに、入力フィールドはテキストでそれを埋めるという本当の感覚を与えます。

コードベースのデザインは、このカードコンポーネントなど、各要素のすべての仕様を提供しています。場合によっては、開発者が使用するためのUIコンポーネントの正確なコードを抽出することさえ可能です。

AniaKubówは、Uxpinに関するビデオでこれを非常によく説明しています。

10年以上前、ジェイソンサンタマリアは、次世代のデザインツールがどのように見えるかについて真剣に考えていました。ブラウザを直接使用できますか？

ブラウザで十分ではないと思います。 Webデザイナーは、アーキテクトが木材を一緒にノックして測定するように、クリエイティブと情報転送の問題を解決する前にブラウザに飛び込みます。ツールは想像力を制限し、デザインの開始時の想像力やインスピレーションは、続くすべての基盤となります。

ジェイソン・サンタ・マリア、「本物のウェブデザインアプリ」

ブラウザを直接使用していないかもしれませんが、コードベースのツールはUIをWebサイトやアプリケーションのように機能させることができます。

Webページは動的で生活空間であり、訪問者の最小のやり取りにより、Webサイト全体の範囲を変更できます。 […]静的メディアを扱っていないため、インタラクションやWebページの変化する光景を設計できる必要があります[…]アプリケーションは、テキストの色やブロックではなく要素を表示する必要があります。 Photoshop、Illustrator、および花火には、この点でいくつかの低レベルの機能がありますが、より動的で非破壊的な処理の必要性は明らかです。

Uxpinで独自のReactコンポーネントを使用できます

これは、単一の事実源の魔法です。設計ツールが反応（または他のフレームワーク）コンポーネントを出力できる場合、それは1つのことです。これは賢いトリックです。しかし、それは一方通行旅行である可能性があります。現実世界のプロジェクトのコンポーネントは、完全に設計の分野にない他のコンテンツで満たされています。コンポーネントはフックを使用して現在のユーザーのアクセス許可を返します。アクセスできない場合は、ボタンが無効になります。無効なボタンには特定の設計要素がありますが、ほとんどのコードの場合はそうではありません。

設計ツールがそのコンポーネントの他のコードを尊重できず、基本的にそれを無視するだけでは、それは非現実的です。基本的に、設計ツールがコンポーネントをコードとしてエクスポートしますが、設計者が最初にこれらのUIコンポーネントをインポートすることを許可しない場合、それはあまり役に立ちません。

これは、Uxpin Mergeが入ってくる場所です。

今、公平を期すために、これにはセットアップに何らかの作業が必要です。完全なシステム設計を完了するには、数時間または数週間しかかからない場合があります。現在、UXPINはReactでのみ動作し、Webパック構成を使用してITを統合しています。

実行を開始すると、 UXPINで使用するコンポーネントは、実際には制作Webサイトを構築するために使用するコンポーネントです。

設計ツールが事前に構築されたコンポーネントを消化し、それらを真新しいキャンバスでのプロトタイピングに使用できるようにするのは本当に印象的です。

Uxpinは、次のようなプロジェクトにこの機能を実装するのに役立ちます。

独自のコンポーネントを統合するドキュメント
サンプルリポジトリ：uxpin-merge-boilerplate

予想どおり、コンポーネントの構築方法に影響を与える可能性があります

コンポーネントには、多くの場合、属性、属性制御設計、内部コンテンツなどの側面があります。 UXPINは、プロパティのUIを提供します。つまり、コンポーネントを完全に制御できます。

 <code><linechart ...="" barcolor="green" data="{[" height="200" showxaxis="false" showyaxis="true" width="500"></linechart></code>

ログイン後にコピー

これを知っていると、コンポーネントにプロパティインターフェイスを提供し、多くの設計制御を提供できます。たとえば、統合テーマスイッチ。

ストーリーブックでより速く

テストと構築のコンポーネントのためにJavaScriptコンポーネントフィールドで非常に人気のあるもう1つのツールは、ストーリーブックです。 Uxpinのような設計ツールではありません - コンポーネントの「動物園」のようなものです。セットアップした場合もあれば、ストーリーブックを使用することが価値があると思われる場合もあります。

良いニュースは何ですか？ Uxpin Mergeは、ストーリーブックと完全に機能します。統合は非常に高速かつ簡単になります。さらに、Angular、Svelte、Vueなどのフレームワークをサポートしています。

それがどれだけ速いかを見てください：

Uxpin CEOのMarcin Trederには強いビジョンがあります。