AmplifyGen2でログイン画面をカスタマイズする
西村です。
AmplifyGen2でも、ログイン画面にはやはりAuthenticatorを使用する場面が多いと思います。
デフォルトのAuthenticatorの見た目も悪くはないですが、最初に見る画面なのでかっこよくしたいですよね！
カスタマイズが何かと難しいAmplifyUI、もといui-reactですが、今回はFigmaを「少しだけ」使用して、右のログイン画面を作っていきましょう。
AmplifyGen2になり、公式ドキュメントのFigma-to-Reactのページはいつまで経ってもハリボテの状態で、Gen2からはあまりFigmaを使った開発は想定されていないような気がします。
AmplifyStudioの消滅とともに散ってゆきましたね…。
しかし、そんなFigma-to-Reactですが、現在でも一部便利な使い道があります。
それは。。。
Amplify UI (ui-react) のテーマ設定です！！
Figmaで作成したテーマをThemeProviderで設定、それだけのために使用します！
※生成されるコードもよく見ると手で書けますが今回は見なかったことにします。
下準備編
※プロジェクトのセットアップは割愛します。
まずはCustomization | Amplify UI for Reactのページを参考に、お好みのヘッダーやフッターを用意して、Authenticatorに設定します。ついでに日本語化もしておきましょう。
ここまでの画面がこちら。
うーん、、、公式ドキュメントと同じ状態ですが、なんだかまだバラバラな印象です。
Figmaでテーマを作成する
UIKitの用意
ここでようやくFigmaの出番です。
AWS Amplify UI Kit | Figma
Amplifyが用意しているFigmaのUIKitをFigmaで開きます。
テーマの設定
Figmaで開くと以下のような画面が開きます。
特に何も編集せず、Amplify UI Builder pluginを開きましょう。
この画面で基本テーマを設定していきます。
まずはプライマリ、セカンダリカラーを設定します。（お好みで）
これはui-react全体に適用されるので、アプリのテーマカラーに合わせて設定しましょう。
同じようにお好みでspace、fontsizeなど設定してください。
次にcomponentタブに移動して、コンポーネントごとのテーマを設定します。
filteroptionに「authenticator」と入力すると、各項目が出てくるので、お好みでAuthenticatorのボーダー、シャドウ、背景を変更します。（alpha0にする等）
設定が完了したら、「Update theme」をクリックし、テーマを適用し、「Download component code」をクリックします。
ui-components.zipを適当な場所に保存し解凍します。（もしかして解凍ってもう言わない？）
中にはいろいろとデフォルトのコンポーネントが入っていますが、今回はstudioTheme.jsのみ使用します。（ただのjsなので使いまわすことができます。）
型定義の作成とThemeProviderの設定
studioTheme.jsをプロジェクト内の適当な場所に設置します。
これをThemeProviderを使用して設定を行いますが、実はこのままだと型定義でTSに怒られます。
そこで、studioTheme.jsを配置しているフォルダ内に、
studioTheme.d.tsという型定義ファイルを作成し、以下のように設定しTypeScriptの型情報のみを提供します。
import { Theme } from "@aws-amplify/ui-react";
declare const theme: Theme;
export default theme; App.tsxで以下の通り設定を行います。
~略
import { ThemeProvider } from '@aws-amplify/ui-react'
import theme from './theme/studioTheme'
<ThemeProvider theme={theme}>
~略
</ThemeProvider>
完成！
AmplifyUIをカスタマイズしようとTheming | Amplify UI for Reactのページを見たことのある方はわかるかと思いますが、かなり複雑な構造をしているので、Figma（Amplify UI Builder plugin）で簡単に設定できるのはいいですね！
カスタマイズの参考になれば幸いです!!
参考
Figma-to-React – React – AWS Amplify Gen 2 Documentation
