Figma Auto Layout とApp Builderを使用してデザインからコードまでのスピードアップを図る
簡単なコツをご紹介します。ローコードのApp BuilderとFigma Auto Layout を使用すると、デザインからコードまでのプロセスを加速できます。その方法をご覧ください。
ジョージ・アブラハム
6分で読む
自動レイアウトは、ビジュアル デザイン仕様の作成によく使用されるベクター デザイン ツールであるFigmaで人気の機能です。自動レイアウトが人気の理由の 1 つは、レイアウトのサイズの変更に応じて自動的に適応またはサイズ変更できるデザインを作成できることです。デザイナーはサイズ変更の機能を高く評価していますが、開発のためにハンドオフ アーティファクトを共有する場合にもメリットがあります。
この記事は、ハンドオフに取り組んでおり、設計からコードまでのプロセスに関するツールを活用して、これまで以上に迅速に提供したいと考えている UI/UX デザイナーと Web アプリ開発者を支援することを目的としています。
ハンドオフの問題
ハンドオフ アーティファクトは、開発チームが最終的なソリューションを構築するために使用する UX 仕様を表します。ただし、設計チームが作成したアーティファクトと開発者の要件の間には常に摩擦がありました。この摩擦 は、設計ツールで作成された静的なレイアウトと仕様と、実装用の適応型レイアウトに起因しています。この摩擦 は、開発チームが静的な仕様に基づいて手動で設計を (再) 実装することでさらに悪化します。これにより、実装が設計仕様と一致しているかどうかを確認するための非効率的なレビュー プロセスが発生します。
App Builder TMソリューション
自動レイアウトは、UI レイアウトを指定する際に、デザインと開発の 2 つの世界の橋渡しをします。UI 要素の動的なサイズ設定と相対的な配置を使用することで、Figmaのデザインは期待される Web レイアウト (つまり、CSS Flexbox) に近づきます。しかし、これではデザインを (再) 実装しなければならないという問題が解決されるわけではなく、App Builderが役立ちます。
App Builder、ソフトウェア・チームは、Angular、Blazor、WebComponent用のウェブ・アプリケーションをゼロから迅速に設計・生成することができます。Figmaで作成されたデザインに対して、App Builderは、デザインを手動で実装する必要性をなくすことで、フォース・マルチプライヤーとして機能します。デザインがIndigo.Design UI kit for Figmaを使用して作成されている場合、App Builderで編集可能なピクセルパーフェクトなアプリとして公開できます。つまり、静的な仕様や面倒なレビューから解放されます。さらに一歩進んで、Figmaから作成されたアプリは、プロフェッショナルな UI コンポーネント、一貫したテーマのためのデザイントークン、オートレイアウト設定に基づく CSS Flexbox レイアウトを利用します。
Figmaの自動レイアウトとは何ですか?
自動レイアウトを使用すると、デザイナーはレイアウトやコンテンツのサイズ変更にすばやく対応できる適応型デザインを作成できます。これにより、デザインされたコンテンツは、一貫した間隔と配置を維持しながら、必要に応じて拡大または縮小されます。
ユーザーがブラウザ ウィンドウの幅を制御することを考慮すると、必要がない限り、固定の高さと幅の使用は避けるのが最善です。代わりに、利用可能なスペースに基づいてコンテンツが再フローできるように、流動的なサイズ設定と相対的な間隔を考慮することをお勧めします。自動レイアウトを統合する最も基本的な例の 1 つは、追加されたテキストに基づいてボタンのサイズを拡大または縮小できるボタンです。
Figmaで自動レイアウトを使用するには？
自動レイアウトを有効にするには、UI 要素をFigmaのフレームに追加する必要があります。フレームは、Web レイアウトの DIV のようなものです。自動レイアウトを有効にすると、フレーム内の UI 要素は、絶対位置 (x, y) ではなく、互いに相対的に配置されます。UI 要素を互いに相対的に配置すると、間隔を調整せずに要素の順序を変更するのが簡単になります。
自動レイアウトが有効になっている場合に利用できる機能の概要は次のとおりです。
方向 |
コンテナー内で子レイヤーを水平に積み重ねるか、垂直に積み重ねるかを定義します。
|
アライメント |
配置は、フレーム内で子要素を配置する方法を制御します。絶対位置を使用して、任意の子要素の配置設定を上書きできます。配置プロパティには、次の値を指定できます。
|
間隔 |
方向に基づいて垂直または水平の間隔を設定でき、各子要素間の間隔を定義します。 |
パディング |
オブジェクトの周囲の空白を決定し、上下、左右、カスタムにすることができます。 |
サイズ変更 |
フレームの子項目の場合は垂直と水平にすることができ、次の 3 つの値が可能です。
|
自動レイアウトはApp Builderでどのように機能しますか?
前述のように、自動レイアウトは CSS Flexbox コンテナー (DIVS) と同等です。また、App Builderキャンバスはネイティブで Flexbox レイアウトを使用します。App App Builderによって提供される主な価値は、静的なデザインをクラウドで編集できる Web アプリに変換することです。最良の結果を得るには、デザインが次の 4 つの基本要件を満たす必要があります。
- すべてのレイアウトは、Figma自動レイアウト (フレーム付き) を使用して作成されます。
- デザインはIndigo.Design UIキットのコンポーネントを使用して作成されます。
- タイポグラフィと色はUIキットトークンに基づいて設定されます
- UIの一部をベクターイラスト（SVG）として抽出するには、Figmaでエクスポートするレイヤーをマークします。
最後に、デザインを完成したアプリとしてエクスポートするには、Indigo.Design Figmaプラグインが必要です。デザインからコードまでのプロセスについて説明した以前のブログ投稿をご覧ください。
設計からコードまでのプロセスを加速
Figma自動レイアウトは、デザイナーが UI デザインをより速く簡単に作成できるようにする機能です。この機能は次の方法で実現します。
- レイアウト サイズまたはコンテンツに基づいてオブジェクトのサイズを自動的に調整します。
- デザインが複雑になっても、デザイン内の間隔が一定であることを確認します。
- UI 要素を相互に相対的に配置することで、デザインはすべてのデバイスで適切に機能します。
- 特に Web デザインの場合、設計仕様が期待どおりになるので、開発者も満足するでしょう。
App Builderは、設計の再実装の必要性を排除することで、ハンドオフ・プロセスに付加価値を与えます。これにより、デザインからコードへのプロセスがより速く、より信頼性の高いものになります。Indigo.Design plugin for を使用してデザインが公開されると、 。Figma App Builder静的なデザインをウェブアプリに変換します。
結果として得られる Web アプリには、次のようないくつかの利点があります。
- CSS Flexbox レイアウトを利用します。
- 静的コンポーネントは、本番環境対応の UI コンポーネントに置き換えられます。
- グローバル テーマにリンクされた色とタイポグラフィの変数。
- 開発者が Web アプリを編集し、Blazor、Angular、Web Componentsのアプリ ソース コードを生成できるようにします。
試してみる準備はできましたか?
