App BuilderでFigmaデザインを HTML コードに変換する

​App Builder ™のようなローコードツールはゲームチェンジャーです。デジタルトランスフォーメーションに向けた戦略的な動きとして認識するだけでなく、ここ数年でますます多くの企業が、FigmaデザインをHTMLに変換するというより実用的なアイデアでそれらを採用し始めています。

• 市民開発者はよりシンプルなプロジェクトをゼロから処理し、経験豊富な開発者はアプリのロジックとミッションクリティカルなアプリの作成を管理できます。
• プロセスを刷新し、市場投入までの時間を短縮するには、開発者が最初にアプリを構築し、次にアプリを構築するテクノロジーを決定できるようにします。
• エラーが発生しやすい手作業によるコーディングやサイロ化を排除し、設計ファイルをこれまで以上に迅速に量産可能なコードに変換
• ローコード + AI でタスク (画像やデータ ソースの生成など) を自動化します。

では、早速本題に入りましょう。静的なFigmaファイルがあり、それをピクセルパーフェクトで本番環境に対応した HTML コードに変換したい場合は、この記事でその手順を説明します。

始めましょう。

Figmaとは何ですか?

Figmaは、ウェブサイト、アプリケーション、インタラクティブな UI プロトタイプ、ロゴ、ベクターグラフィックスを作成するための最も強力で人気のあるデザインツールの1つです。最近の統計によると、約400万人が を使用しており、その中にはDropbox、Slack、 のようなハイテク大手も含まれている。そして興味深いことに、デザイン・スタートアップでありながら、昨年100億ドルという驚くべき評価額を獲得することに成功した。Figma Twitter

数多くの機能を搭載したFigma、シンプルで簡単なプロトタイピングのためのツール、リアルタイムのプロジェクト更新を監視および処理する機能を提供し、ユーザーがデザインレビューを受け取ったり提供したり、洞察に満ちたフィードバックを収集したりできるようにします。

ただし、Figma (プラグインなし) はユーザー インターフェイスとデザインの作成にのみ適しています。コードの処理は通常、別途行われます。

Figmaから HTML コードへは何ですか?

さて、Figmaデザインをコードに変換するのは別の話です。基本的には、Figmaで作成されたデザインファイルを、実際の使用可能なコードを持つ実用的なアプリケーションに変換するプロセスを指します。ほとんどの場合、Figma-to-HTML プロセスは、Figma HTML ジェネレータまたはFigma-to-HTML プラグインによって実行されます。

しかし、チームがこのフェーズに到達する前に、通常は他のサブフェーズまたはステップが最初に実行されます。

• アートボードとビジュアルモックアップの作成
• ステークホルダーとのPOCのコミュニケーション
• デザイナーと開発者の間で仕様書のハンドオフを交換
• プロトタイプのユーザーテストとユーザビリティテストの実施
• フィードバックの収集、設計のやり直し、開発の修正の処理
• 最終的に完成し、承認され、バグのないコードと完全に機能するアプリになりました

開発プロセスの自動化 - デジタル時代の生き残りをかけた戦いの象徴

ここでは、デザイン ファイルをアプリに変換するアプリ メーカーの使用が活発化していることについて説明します。しかし、この激化につながったのは正確には何だったのでしょうか?ここ数年は、インフレ、市場の不況、パンデミック後の影響、さまざまな国での継続的な労働力不足など、激動の年月が続いています。1970年代のスタグフレーションに逆戻りしているのではないかという恐怖さえありました。幸いなことに、多くのセクター(ITを含む)での最初の価格ショックと不安定性の後、状況はすでに緩やかになっているようです。

なぜ私はこれらの出来事について言及しているのでしょうか?

なぜなら、それらはソフトウェアの世界と、その後のプロジェクト、アプリ、人材、プロセスの取り扱い方に大きな影響を与えたからです。そのため、企業は進化する必要がありました。

合理化と自動化は、彼らの生き残りにとって重要になりました。そして、ローコードツールはそれを達成するための手段に変わりました。

その空白を埋めるために、App Builderのようなローコードツールは、イノベーションやデジタルトランスフォーメーションの促進から開発チームの役割の再定義まで、さまざまなレベルで企業、CTO、開発チームリーダー、開発者に力を与える程度に成熟しています。

これにより、Web サイトのデザイン、プロトタイプ作成、完全なデザイン ファイルの本番環境対応アプリへの数回のクリック操作から、データの書式設定、コードの民主化など、デザインと開発のすべてを処理するリソースを確保できます。これらすべてを非常に簡単で直感的な方法で、自分でコードを書く必要はありません。

App Builderを使用してFigmaデザインをHTMLコードに変換する方法

WYSIWYG ローコード ファイルを使用すると、Figmaデザイン ファイルからレスポンシブ HTML CSS コードとライブで完全に機能するアプリを簡単に生成できるようになりましたApp Builder。前述したように、Figmaで作成するすべてのものはIndigo.Designと呼ばれるデザインシステムを使用しているため、すべてのスタイリング仕様とテーマは実際のUIコンポーネントと一致します。

ただし、開始する前に、いくつかの前提条件があります。

• アカウントにログインするか、App Builderの無料トライアルを開始してください  
• ​Figma Indigo.Design UIキットのコピーを入手し、Indigo.Design FigmaプラグインをFigmaプラグインに保存します。ゼロから始めたくない場合は、サンプルアプリの1つを入手してください。 

アカウントの種類に応じて、Figma UI キットの使用を開始するには、次の手順に従うか、以下の手順に従ってください。

最初のステップには、Open App Builder、次に「Creteの新しいアプリケーション」、最後に「アセットの取得」が含まれます。

Figma Proユーザーアカウント

Professional Figmaアカウントをお持ちの場合の手順は次のとおりです。

ステップ1: FigmaコミュニティからUIキットの複製を作成します。ファイルを複製(Get a copy)すると、「最近使ったファイル」に配置されます。

ステップ2:ファイルを開き、ファイル名のすぐ横にあるシェブロン矢印を使用して、ファイルをチームスペースに移動します。

ステップ3:ファイルが移動されたら、ファイルを開いてアセットパネルに移動します。チームライブラリのアイコンをクリックすると、このファイルをライブラリとして公開でき、すべてのスタイル、タイポグラフィ、コンポーネントがチームの他のメンバーに配布されます。

今後は、プロジェクトを開始するたびに、またはチームスペース内の既存のプロジェクトに引き続き取り組むたびに、このライブラリをアクティブ化して、プロジェクト内で直接使用できるようになります。アクティベーションはアセット>チームライブラリアイコンから行われる>、スイッチを使用してライブラリをアクティベートすることに注意してください。

Figma無料ユーザーアカウント

「無料アカウント」のユーザーの場合、UIキットの使用方法は非常に似ています。

ステップ1: Figmaコミュニティからファイルを複製したら、最近使用したファイルからチームスペースに移動する必要があります。

ステップ2:ファイルを開き、ファイル名のすぐ横にある山形の矢印を使用して、ファイルをチームスペースに移動します。

​Free Figmaプランを使用すると、最大3つのプロジェクトを持つことができ、各プロジェクトには3つのファイルしか含めることができないことに注意してください。

ステップ3:ファイルが移動されたら、ファイルを開いてアセットパネルに移動します。チームライブラリのアイコンをクリックすると、このファイルをライブラリとして公開でき、カラースタイルとタイポグラフィのみがチームの他のメンバーに配布されます。

今後は、プロジェクトを開始したり、チーム スペース内の既存のプロジェクトで作業を続けたりするたびに、このライブラリをアクティブ化して、プロジェクト内で直接使用できるようになります。アクティベーションは、アセット>チームライブラリアイコンから行う>、スイッチボタンを使用してライブラリをアクティベートします。

最後に、なぜプロセスを自動化するのか：理由と利点

人間のプログラミング スキルはソフトウェア開発の原動力ですが、その効率性を推進し最大化する原動力となるのは、自動化と設計からコードまでのソリューションです。ピクセル パーフェクトで高品質な HTML コードを瞬時に生成する機能を備えた当社のApp Builderなどのツールは、アプリ開発プロセスを数週間や数か月ではなく数日に短縮します。

App Builderを使用してFigmaデザインをHTMLにエクスポートすると得られる主な利点は何ですか?

• 手動の HTML 変換プロセスをスキップします。
• コードアセットを生成するコンポーネントを完全に制御します。
• ターゲット フレームワーク間でコンポーネントと機能の同等性を実現します。
• アプリのプレビューをパブリックに共有する機能。
• データ バインディングをより効率的に処理します。
• すべてがドラッグ アンド ドロップで実行され、真の WYSIWYG 開発エクスペリエンスを実現します。
• ツールボックスには実際の UI コンポーネント、いくつかの種類のビュー レイアウト、ビュー間のナビゲーション/構造があります。
• アプリ開発サイクルのどの段階にも参加できる開発者、デザイナー、PM、関係者間のコラボレーションを促進する、唯一の真実のソースとして機能します。
• 共通アプリケーション モデルを使用することで、フレームワークに依存しない方法でアプリケーションを記述できます。
• 完全なデザイン システムである Indigo.Design を統合し、UX、製品管理、製品開発を統合します。
• ​App Builder AIでAI機能を提供します。

方程式 –App Builder + Sketch / Figmaでデザインからコードまでを実現

開発チームがもたらした最新の製品アップデートと機能強化により、App Builder、すべてに対応する究極のDesign-to-Codeツールに生まれ変わりました。Sketchのサポートはすでに利用可能で、11月のApp Builderリリースでは、まったく新しいFigma Indigo.Design UI Kit for Material が追加されました。

これを使用すると、自動化と、コンポーネント、パターン、スタイル、カスタマイズ オプションの強力なセットを利用して、完全なアプリを開発するために必要なすべてのツールを入手できます。最も優れている点は、すべての静的なFigmaデザインが、クリックするだけで、実際の UI コンポーネント、ブランディング、スタイルを備えたインタラクティブでレスポンシブなアプリになることです。

興味があれば、「Sketchデザインをコードに変換する方法」の詳細をお読みください。