ご存知のように、製品開発者の仕事の一部は、設計を Figma から選択したフレームワークを使用してコードに変換することであり、プロジェクトが重要な場合は複雑になる可能性があります。デザイナーから開発者への引き継ぎの本質は、開発者がデザインの画面を正確でピクセルパーフェクトなコンポーネントに実装することです。 この記事では、AWS Amplify Studio の機能を拡張して Figma からアプリケーションを構築し、コンポーネントを React にインポートします。 Amplify の助けを借りて Figma と React を接続すると、再利用可能な React コンポーネントが作成され、時間を節約し、長いコード行を書く必要がなくなります。 Figma からコードへの変換プロセスはシームレスであり、開発者はより効率的にビルドを効率化できます (これがおそらく、    理由です)。 Abode が数十億ドルで Figma を買収した 前提条件 このガイドを理解して完了するには、次のものが必要です。 フィグマのアカウントです。サインアップは です 無料 パッケージのインストール用にローカル マシンにインストールされた Node >= 14.0.0 および npm >= 5.6 コードエディター ターミナルに AWS Amplify CLI をインストールします。次のコマンドを実行します。    npm install -g @aws-amplify/cli  JavaScript と React の知識 AWS アカウントを持っている。アカウント登録は こちら Figma でテンプレート UI キットを作成する UI キットから React コンポーネントを作成する前に、Figma プロジェクトをセットアップする必要があります。 Figma にアクセスしたら、アカウントを作成した後に にアクセスし を検索します。  AWS コミュニティ 、AWS Amplify UI キットの Figma ファイル  「コピーを取得」をクリックして、UI キットのコピーを複製または複製します。   Amplify UI キットには、事前に作成されたページがいくつかインストールされています。 : このページは、ビルド済みコンポーネントのすべてのスタイルを含む AWS Amplify Studio にバインドします。このページのコンテンツを変更すると、Figma コンポーネントの React UI ライブラリの外観に影響します。 プリミティブページ   : このページでは、コンポーネントを編集、変更、および作成するためのコントロールが提供され、ビルド済みのコンポーネントが付属しています。 My Components ページ サンプル : このページには、[マイ コンポーネント] ページからのいくつかのカスタム コンポーネントのサンプル デザインが表示されます。 ページ このチュートリアルでは、[マイ コンポーネント] ページの 2 つのコンポーネント (  と  UI) を使用します。  NavBar FormCheckout 増幅プロジェクトの作成 Figma でのセットアップが完了したら、AWS コンソールに移動して、新しい Amplify プロジェクトを作成します。 にログインし、AWS Amplify を検索します。  アカウント サービスのリストから AWS Amplify を選択します。 [ ] ダッシュボードで、[ ] ボタンをクリックし、ドロップダウンから [ ] を選択します。  すべてのアプリ 新しいアプリ アプリのビルド アプリに名前を付け、[展開の確認] をクリックしてアプリを作成します。   Amplify プロジェクトをデプロイしたら、新しい React アプリを作成しましょう。  React アプリの作成 新しい React アプリをスキャフォールディングするには、ターミナルに移動して次のコマンドを貼り付けます。    npx create-react-app no-code このコマンドは、美しくスケーラブルな Web アプリケーションを構築するために必要なすべてのファイルとフォルダーを解凍します。  Amplify Studio を起動 React アプリをインストールしたら、プロジェクトを起動します。ローンチ スタジオをクリックして、ノー コードのステージングを表示します。  のステージング環境を示すページに移動するので、スタジオの起動ボタンをクリックします。  ノーコード ここでは、データ モデルの作成や認証など、さまざまなことができます。ただし、ここでは [デザイン] タブの UI ライブラリに焦点を当てます。  [開始する] ボタンをクリックします。   Figmaと同期。このダイアログ ボックスでは、 から Figma ファイル リンクを貼り付けることができます。  マイ コンポーネント ページ この手順を初めて実行する場合は、Figma アカウントにアクセスするために認証が必要になる場合があります。  Figma からコンポーネントを取得する Figma からプルされたコンポーネントのすべての変更を受け入れます。   Amplify Studio で Figma ファイルからすべての UI コンポーネントを表示できます。   Figma のインポートされたコンポーネントからの は、Amplify Studio で表示されるものと同じです。 FormCheckout  React でフェッチされたコンポーネントを操作する Amplify Studio で取得した UI コンポーネントを取得したので、React アプリケーションにすべての UI コンポーネントを含める必要があります。 アプリを Amplify Studio に接続するには、ローカル セットアップ手順のリンクを使用してコンポーネントをソース コードに取り込み、プロジェクトのルート フォルダーからコマンドを実行する必要があります。  このコマンドを機能させるには、前提条件セクションに記載されているように、AWS Amplify CLI をグローバルにインストールしてください。 コマンドを実行すると、プログラムに認証メッセージが表示されます。   [はい] をクリックして、React アプリにアクセス許可を付与します。その後、コンポーネントをプルするときに一連のプロンプトが表示されます。質問に対するデフォルトを受け入れます。 ターミナルで課題やエラー ログ メッセージが表示される場合は、AWS を構成していない可能性があります。 この課題に直面している場合は、 を確認してください。 このガイド インストールにより、  ディレクトリに新しいフォルダー が作成されます。このフォルダーには、Amplify Studio からプルされたすべての UI コンポーネントが含まれています。  src ui-components  Amplify UI ライブラリの使用を開始する Amplify UI React ライブラリは、他のすべての CSS ユーティリティ ライブラリと同様に、アプリのスタイリングの目的に不可欠です。 次のコマンドを実行します。    npm install @aws-amplify/ui-react aws-amplify スタイル アプリケーションのエントリ ポイントである index.js ファイルで、CSS ファイルをインポートします。アプリのルック アンド フィールを担当する次のコードを使用して、index.js ファイルをコピーして更新します。                                   root.render(           ); // src/index.js 
 import  React from   'react' ; import  ReactDOM from   'react-dom/client' ; import  App from   './App' ; import   '@aws-amplify/ui-react/styles.css' ; // add this 
 const  root = ReactDOM.createRoot( document .getElementById( 'root' ));    < React.StrictMode > 
      < App  /> 
    </ React.StrictMode > 
 フォント Amplify UI は、Amplify UI の依存関係のインストール中にデフォルトのフォント で出荷されます。の中に ファイル内の次の Google フォント CDN リンクをコピーして貼り付けます。 エレメント：  Inter public/index.html   <head>   ... <head>                                 </head> ... // public/index.html 
 < link   rel = "preconnect"   href = "https://fonts.googleapis.com"  /> 
 < link   rel = "preconnect"   href = "https://fonts.gstatic.com"   crossorigin  /> 
 < link 
    href = "https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap" 
    rel = "stylesheet" 
 /> 
 コンポーネントの表示 コンポーネント および を表示するには、 ファイルを作成し、すべてのコードを削除します。 FormCheckout NavBar   src/App.js 次に、次のコードでファイルを更新します。                     ); }   // src/App.js 
 import  { FormCheckout, NavBar } from   './ui-components' ; const  App = () =>  {    return  (      <> 
        < NavBar  /> 
        < FormCheckout   marginTop = '5em'  /> 
      </> 
 export   default  App;  margin-top プロパティは、ナビゲーション バーとチェックアウト フォームの間に上部の余白を与えます。 CSS 値は、コンポーネントで Amplify UI のスタイルを使用する方法の一部です。 開発サーバーを起動する React には、ファイルが更新されるたびに更新されるホット リロード機能が付属しています。 次のコマンドを実行します。    npm start 開発サーバーは次の場所で実行されます  .  http://localhost:3000 この React アプリを Web にデプロイしたいですか? AWS Amplify を使用して段階的にガイドする を確認してください。 このリソース 結論 Amplify Studio が提供するのは、コードがゼロまたはまったくないローコード ツールです。コンポーネントをゼロから作成したり、デザイナーから画面を実装したりすることなく、作業の一部が行われるため、このツールは開発者としての作業をエキサイティングにします。 デザイナーから開発者への引き継ぎはシームレスであると断言できます。 この記事では、Amplify Studio の助けを借りて Figma コンポーネントを作成および統合し、コンポーネントを作業アプリとして機能する React コンポーネントに接続する方法を説明しました。 完全なソース コードは、この にあります。 GitHub リポジトリ

This story contains new, firsthand information uncovered by the writer.

Amazon

Google

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

設計者から開発者への引き継ぎ: Figma 設計ファイルから React コンポーネントを構築する方法

設計者から開発者への引き継ぎ: Figma 設計ファイルから React コンポーネントを構築する方法

About Author

コメント

ラベル

この記事は

Related Stories

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

暗号通貨の成長: 効果的なユーザーペルソナの作成

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

フロキのヴァルハラがインドのスリランカツアーのアソシエイトスポンサーに加わる

暗号通貨の成長: 効果的なユーザーペルソナの作成

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps