この記事では、インターフェース構造をどのように編成するかを示します。これにより、製品の新しいセクションを簡単に作成し、将来それらのデザインを変更できます。



figmaおよびその他の最新のツールを使用すると、要素間の関係を指定して、個々のコンポーネントまたは画面全体の編集を簡素化できます。 それらをコンポーネントライブラリにグループ化し、目的のアクセス権を付与します。



これらの原則は現在、設計言語または設計システムと呼ばれています。 すべてのグラフィックモジュールの開発アルゴリズムを配置し、あらゆる種類のデバイスと画面解像度に合わせてプロジェクトを無限にスケーリングできます。



アトミックデザインの方法論によれば、私は原子から始め、より複雑なコンポーネントに進みます。 私はFigで作業し、Sketchが深刻な競争相手であることを示します。





そのため、最新のツールはデザイナーの仕事を本格的な開発に変えます。 設計システムの概念は、概念的なルールと美しいイラストを備えたUIキットのセットだけを意味するものではありません。 これは主に、特定の方法で順序付けられた視覚的アーキテクチャのシステムです。 製品設計の概念は、それと密接に関連しています。 設計システムは、1つの組織内の複数の製品をカバーし、独自の「設計言語」を使用して最終消費者に提示します。 有能な読者はこのアプローチの利点を長い間知っていると思います。

ちなみに、Figmaを使用する場合は 、 既製の設計システムに注意することをお勧めします 。 フリーランサーが1か月あたりの注文を増やすのに役立ち、プログラマーは自分で美しいアプリケーションを作成できます。また、チーム作業用の既製の設計システムを使用して、チームが「スプリント」スプリントを迅速にリードします。



また、深刻なプロジェクトがある場合、当社のチームは、ベストプラクティスに基づいて組織内に設計システムを展開し、Figmaを使用して特定のタスクに合わせて調整する準備ができています。 Web /デスクトップ、および任意のモバイル。 また、React / React Nativeにも精通しています。 Tへの書き込み： @kamushken

「デザイン言語」という概念があるため、「話す」ことができます。 さらに良いことに、書いてください。 単語はフレーズを形成します。 文はフレーズで構成されます。 そして、提案から章全体がすでに構築されています。 これはアトミックデザインの比differentであり、私はそれがより好きです。 今年7月にFigma 2.0がリリースされたとき、このツールがそのような言語を書くのに理想的であることがすぐに明らかになりました。 または必要に応じてシステム。 小規模企業は、追加のアドオン/プラグインに頼らずに、複数の製品の有能なデザイン管理を整理し、1つのグラフィックエディターの境界を超えないようにする機会があります。 しかし、大企業も、多元主義の荒野にあまりにもひどく、再建するのが非常に困難になっているという理由だけで。 これは、チームプレイではスケッチだけができないという事実についてです。 ここでは、Craft、InvisionApp、Marvel、Zeppplin、およびおそらく聞いたことがない他の多くの呪い。



Figmaの2番目のバージョンは、Sketchに近いことで私を買収し、Win Mazdaのもとで働きました。開発者のハンドオフは特に興味深いものでした。 これは、開発者専用のエディター拡張機能です。 開発者はブラウザでソースを開き、すべてのインデントを確認して、CSS、Swift、またはAndroid XMLの任意の要素のコードを取得できます。 デザイナーと開発者のコ​​ラボレーションはさらに効果的になりました。 設計の統合のパフォーマンスは2〜4倍に加速されます。 個人的に確認。 最小限の編集。 インデント、フォント、寸法に関するバグはありません。 プログラムはすべてを生成します。 文書にいくつかの斑点を書く必要は過去にありました。 そして、あなたが独立したデザイナーであり、複数のクライアントと仕事をしている場合、顧客のスタッフの開発部門との効果的なコミュニケーションを確立することがはるかに簡単になりました。



練習しましょう。 この出版物の本質は、特定の視覚開発アルゴリズムを示すことです。 簡単に言えば、最小限のアクションでカスタマイズ/編集できるようにインターフェースを設計します。 その結果、コンポーネントライブラリが作成され、そのプロパティはそれに関連付けられた要素に拡張されます。 そこに変更-どこでも変更。 また、開発者は「更新」をクリックする必要さえありません。画面にリアルタイムの変更が表示されます。 上で言ったように、「フレーズ」はあらゆるデザイン言語の「単語」から形成され、「文」は「フレーズ」から構築され、章全体がそれらで構成されています。 要約すると、別の章の「単語」を別の章にすばやく置き換える機能が必要です。

言葉。 基本的な要素

最も単純な要素から始めます。 「単語」には、見出しH1、H2、H3以降、テキストの段落、およびアイコンが含まれます。 uiキットの一部であり、将来「フレーズ」を作成できるシンプルな要素。 私は注文に慣れようとしているので、要素の命名を監視します。 これは、他のデザイナーや開発者がライブラリを使用する場合に特に重要です。 優れたデザイナーは、ユーザーだけでなく同僚にとっても便利になり始めます。







次に、各要素から、いわゆる「コンポーネント」（Ctrl-Alt-K）を作成します。 figmaのコンポーネントは、同様のインターフェイスユニットまたはセクション全体の間にリンクを作成する機能です。 このようなプロパティ、たとえばテキストの段落を使用して、インターフェイスの特定の画面（コピー>貼り付け）で使用する場合、マスターコンポーネントを編集して、変更がすべての画面に広がるようにするだけで十分です。 このような階層の使用は、この記事の本質です。 この図では、左の列のすべての「コンポーネント」が紫色になっています。

フレーズ。 複数のコンポーネント

「フレーズ」は、2つ以上の単純な要素で構成できる、より複雑なモジュールのメタファーです。 たとえば、ボタン。 少なくとも、背景（ほとんどの場合長方形）と碑文（ラベル）で構成されています。 または、テキストを入力するためのフォーム（入力）。 背景、見出し、プレースホルダーがあります。 ここで、「幽霊のような」ボタンだけに制限します。 塗りつぶしのない長方形とH3ヘッダーコンポーネントで構成されます。



なぜそう 製品が複数の異なるボタンまたは状態（プライマリ、セカンダリ、代替、無効など）を使用する場合、それらは多くの画面に配置され、フォントを変更する必要があります。1か所で変更を加えるだけで十分です。 H3ヘッダーの「単語」コンポーネントのフォントを変更すると、これらの変更がライブラリ全体とインターフェイスのすべての画面に自動的に配布されます。 そのため、最初に正しい視覚開発アルゴリズムを確立することが重要です。



階層を視覚化するために、より複雑なモジュールを右側に描画します。 その結果、左から右に移動すると、単純からより複雑になります。 「言葉」から「章」全体へ。







上の図ですでに気づいたように、ボタンは強調表示され、コンポーネントに変わります。 左に曲の構成を確認できます。 ダイアグラムを使用すると、コンポーネントを別のコンポーネントに埋め込み、いくつかのレベルの階層を作成できます。各レベルにブランチを作成できます。 それはすべて、作成される製品の設計モジュールの複雑さに依存します。 たとえば、同じH3ヘッダーコンポーネントを持つライブラリで5種類のボタンを使用する場合、グローバルとローカルの両方で変更を加えることができます。 グローバル変更の場合、H3は第1レベルで編集され、ローカル変更の場合は、特定のボタン内に既に埋め込まれているコンポーネントを編集し、そのようなボタンが存在する画面についてのみ変更を取得します。 わかりやすくするために、ビデオを録画しました。最初にボタンのラベルをグローバルに変更し、次に特定のタイプのローカルに変更します。





そして、ここでツールの特定の論争の特異性がポップアップします。ボタンの目的のカテゴリでローカルに変更を加えると、Figmaはそれらを優先と見なします。 次のステップでコンポーネントをグローバルに変更しようとしても、結果は得られません。

オファー。 フレーズからアクションまで。

「フレーズ」と「単語」からもっと複雑なものを集める時が来ました。 第1レベルと第2レベルのコンポーネントを使用して、「文」を作成します。次の第3レベルです。 最近、eコマースで多くの開発が行われているので、このステップをモバイルオンラインストアのウィンドウ用のミニカードの例として考えてみましょう。







ミニカードは、H2（コスト）、H3（製品名）、Paragraph（短い説明）、BTN Ghost（追加ボタン）、アイコン、背景、写真のコンポーネントで構成されています。 構成全体が上の画面の左側にリストされています。 カードの幅は、スマートフォンの画面に2列に収まるように選択されます。 類推により、最初の「章」を書くためにコンポーネントに変換する必要があります。



このカードはモジュラーと呼ばれます。 最初の2つのレベルのコンポーネントが含まれています。 製品設計全体が、次のようにモジュール構造になっている場合があります。 構造が似ているコンポーネントから組み立てられます。 モジュール性は秩序を促進し、開発者を喜ばせます。 システムに作用するため、ライブラリから既製のミニカードを取り出して、スクリーンをブリッジするのがよいでしょう。 最後にアスペクト比、高さ、幅、フォントを変更できます。 簡単に言えば、ライブラリ内のさまざまなマスターカードのクローンを作成する必要はありません。クローンを作成すると、製品の開発時に失われます。 Ligmaを使用すると、簡単に編集できるように、小さな変更を加えてこのマスターリンクを保存できます。

文で構成される章

最も興味深いものに近い。 私が始めたメタファーでは、「章」は独立した本格的なアプリケーション画面が表示されるレベルです。







「章」では、さまざまなフォームファクタなど、同じ種類の画面の多くを要約できます。 リグマを使用すると、制約をすばやく設定（適応性を調整）できるため、マスターコンポーネントとの接触を失うことなく、タブレットまたはデスクトップバージョンのミニカードを増やすことができます。 すべての開発者に加えて、モジュールの適応性が明らかになります。 質問は発生しません。







したがって、すべてのデバイスの変更の翻訳-さらに多くを取得します。 ところで、ごく最近、すべてのコンポーネントが便利に左側の別のセクションに配置されました。このセクションには、下のタブからアクセスできます。 モジュールは、ドラッグアンドドロップで追加できます。 それまでは、画面がたくさんあるときに、キャンバスに散らばっているコンポーネントを探すのに苦労しなければなりませんでした。

結果

このような設計管理を適用した結果、画面セットに変更を迅速かつ迅速に実装する機会が得られます。







これらの機能のみを使用しても優れた設計者にはならないが、設計管理に対する有能なアプローチをすでに実証していると言っておく価値はあります。 これにより、日常のタスクをより効率的に解決できるようになります。つまり、製品開発が確実に加速されます。 イチジクでは、非常にスマートなマスセレクト、ほぼ完璧なスナップ、最も先進的なペンツールの1つです。 そして、最適なチームゲームのためには、そのようなアーキテクチャの使用はすでに必要です。



読者の中には、このアプローチがすでに標準である人々がいると確信しています。 今日、多くの概念と原則が非常に自然に見えますが、昨日は「すごい」と言いました。 Figmaの場合の最後のすごい要因は、追加のツール、プラグイン、またはアドオンなしで、組織内で上記の原則に従って作成されたライブラリを使用できることだと思います。 すべてのコンポーネントを「チームライブラリ」に追加し、チーム内のすべてのデザイナーと開発者へのリンクを提供するだけです。 デザイナーは、このようなチームデザインライブラリのコンポーネントから新しいモジュールと画面全体を組み立て、開発者は即座に更新を受け取り、すべての要素をコードにエクスポートして、実稼働環境に実装します。 成功！

おわりに

近年、インターフェース開発におけるチームアプローチの概念は大きく変わりました。 設計システムに関する誇大広告が役割を果たしました。 文字通り毎週、別の西部のIT大手が独自の設計言語、独自のルールと原則をリリースするとき、設計ツールが必然的に同じ軌道に落ちることは明らかです。



現在、開発者はデザイナーにも帰属することができます。 なぜなら、彼らは体系的かつアルゴリズム的に行動し、適切なアーキテクチャを構築し、視覚的発展を特定の原則に従属させることにすでに慣れている、より効率的な環境を持っているからです。 ただし、コーディングにすべてのデザイナーを関与させるにはまだ程遠いです。



「デザイナーはコーディングする必要がありますが、したくないのです 。 」 設計者が自分の手でコードを書くことを好まないことは絶対に普通です。 私たちは主にビジュアルです。 デザイナーの間で技術が非常に少ない。 そして、私たちをコーディングに追い込むために必要なのは、プログラミングへの異なるアプローチを提供することです。 オブジェクトを目的の順序でドラッグアンドドロップするだけで、ループ、条件、計算、およびアニメーションが作成される視覚的な環境が必要です。



デザイナーツールの市場が長い間一方向に動いていることは注目に値します。 すでに山の頂上にあったスケッチには、すでに十分な選択肢があります。 現在、選択できるものはたくさんありますが、より高度な環境で作業するために設定を変更する必要はありません。 この市場の再分配は近づいています（おそらくすでに到着しています）。 大企業は堅実な注入と競合しています。 figmaは、この冬、さらに1,700万ドルの資金を調達しました。 また、2018年1月に、InvisionAppはSketchをリリースする予定です。 しかし、発表によって判断すると、彼らの「スタジオ」はデザイナーに新しいことを約束するものではありません。 しかし、これらのレースは私たちにとって非常に有益です。 つまり、遅かれ早かれ、さらに便利なワークフローが表示されますが、コインの裏側は、より頻繁に適応し、ツールからツールに移行する必要があるということです。



単一のツールでWebflowとSketchの組み合わせを最初にリリースすることで、市場は爆発的に拡大するでしょう。 この問題はまだ解決されていません。デザイナーはブラウザなどのタイポグラフィを見る必要があり、グラフィックエディタで理想的にはレンダリングされません。 特に、フォントデザインがショーを支配する場合。



ところで、あなたの理想的な設計ツールは何ですか？



PS：プロトタイプのソースは// BECAMEでした 。 habradesignersのおかげで、ブラウザで直接作成を続ける（ログインが必要）