4,223 測定値

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

に Teri5m2022/09/23

長すぎる; 読むには

AWS Amplify を使用すると、Figma からアプリケーションを構築し、コンポーネントを React にインポートできます。このツールは Amplify を利用して再利用可能な React コンポーネントを作成し、時間を節約し、長いコード行を記述する必要がなくなります。このチュートリアルでは、Figma UI キットの 2 つのコンポーネント (NavBar と FormCheckout UI) を使用します。 Amplify UI キットを使用して、React のすべての UI コンポーネントを表示できます。アプリケーションを操作するには、Amplify Studio を使用してすべてのコンポーネントをアプリに含める必要があります。

Companies Mentioned

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

ご存知のように、製品開発者の仕事の一部は、設計を 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 つのコンポーネント ( NavBarとFormCheckout UI) を使用します。

増幅プロジェクトの作成

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 のインポートされたコンポーネントからのFormCheckoutは、Amplify Studio で表示されるものと同じです。

React でフェッチされたコンポーネントを操作する

Amplify Studio で取得した UI コンポーネントを取得したので、React アプリケーションにすべての UI コンポーネントを含める必要があります。

アプリを Amplify Studio に接続するには、ローカルセットアップ手順のリンクを使用してコンポーネントをソースコードに取り込み、プロジェクトのルートフォルダーからコマンドを実行する必要があります。

このコマンドを機能させるには、前提条件セクションに記載されているように、AWS Amplify CLI をグローバルにインストールしてください。

コマンドを実行すると、プログラムに認証メッセージが表示されます。

[はい] をクリックして、React アプリにアクセス許可を付与します。その後、コンポーネントをプルするときに一連のプロンプトが表示されます。質問に対するデフォルトを受け入れます。

ターミナルで課題やエラーログメッセージが表示される場合は、AWS を構成していない可能性があります。

この課題に直面している場合は、このガイドを確認してください。

インストールにより、 srcディレクトリに新しいフォルダーui-componentsが作成されます。このフォルダーには、Amplify Studio からプルされたすべての UI コンポーネントが含まれています。

Amplify UI ライブラリの使用を開始する

Amplify UI React ライブラリは、他のすべての CSS ユーティリティライブラリと同様に、アプリのスタイリングの目的に不可欠です。

次のコマンドを実行します。

 npm install @aws-amplify/ui-react aws-amplify

スタイル

アプリケーションのエントリポイントである index.js ファイルで、CSS ファイルをインポートします。アプリのルックアンドフィールを担当する次のコードを使用して、index.js ファイルをコピーして更新します。

 // 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' )); root.render(  < React.StrictMode >
    < App />
  </ React.StrictMode >
);

フォント

Amplify UI は、Amplify UI の依存関係のインストール中にデフォルトのフォントInterで出荷されます。の中に

public/index.html

ファイル内の次の Google フォント CDN リンクをコピーして貼り付けます。

 <head>

エレメント：

 // public/index.html
... <head> < 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,[email protected],100..900&display=swap"
  rel = "stylesheet"
/>
</head> ...

コンポーネントの表示

コンポーネントFormCheckoutおよびNavBarを表示するには、

 src/App.js

ファイルを作成し、すべてのコードを削除します。

次に、次のコードでファイルを更新します。

 // src/App.js
import { FormCheckout, NavBar } from './ui-components' ; const App = () => {  return (    <>
      < NavBar />
      < FormCheckout marginTop = '5em' />
    </>
 ); } export default App;