🕌

[Amplify-Figma#01] Figmaコンポーネントを作ってText Fieldのエラー時の赤の色を変更してみる

2023/10/11に公開

AWS

Figma

Amplify

tech

はじめに

今回は、せっかく figma が使えるので、figma を使ったコンポーネントを作成していきたいと思います。
その中で、主にカラー設定のところを見ていきます。
どの設定をいじるとどこに影響するのか。この辺りが少しわかってくるといいなぁと思います。

Figma でコンポーネント

かんたんですが、前に実装したものと同じようなものを、今度は figma で作ってみようと思いました。

fimga で作ったコンポーネントはこちらです。

figma を作成したら、Sync with Figmaを実行します。

コンポーネントがAmplify Studioに取り込まれたので、ローカルに落とし込みます。

amplify pull -y

これで取り込みは完了。
次にisDisabledのイベント発火とText Fieldをエラー状態にしておきたいので、エラー状態にするように、取り込んだコンポーネントをオーバーライドする形で実装を加えていきます。

import { useState } from "react"
import { TestComponent } from "../../ui-components"

export default function TestPage() {
  const [isDisabled, setIsDisabled] = useState(false)
  return (
    <TestComponent
      overrides={{
        ActiveControlSwitchField: {
          isChecked: isDisabled,
          onChange: () => {
            setIsDisabled(!isDisabled)
          },
        },
        DefaultButton: {
          isDisabled: isDisabled
        },
        DestructiveButton: {
          isDisabled: isDisabled
        },
        LinkButton: {
          isDisabled: isDisabled
        },
        PrimaryButton: {
          isDisabled: isDisabled
        },
        WarningButton: {
          isDisabled: isDisabled
        },
        DefaultTextField: {
          isDisabled: isDisabled
        },
        QuietTextField: {
          isDisabled: isDisabled
        },
        ErrorDefaultTextField: {
          errorMessage: "エラーメッセージ",
          hasError: true,
          isDisabled: isDisabled,
        },
        ErrorQuietTextField: {
          isDisabled: isDisabled,
          errorMessage: "エラーメッセージ",
          hasError: true,
        }
      }}
    >
    </TestComponent>)
}

これをローカルで動かしてみると、こうなります。

ここからちょっとカスタマイズしていきたい

エラー時の赤をもう少し明るめにしたいんですよね。
あと、文字も弱いのでもう少し太めにして目立たせたい。
テキストボックスの赤い枠ももう少し太くしたほうがいいかしら。

とちょっと欲が出てきたので、このあたりから攻めていきたいと思いますよ。
まずは、色を変えてみますか。

エラー状態にすると、テキストボックスには、下記の CSS が有効になるようです。

.amplify-input--error {
    border-color: var(--amplify-components-fieldcontrol-error-border-color);
}

border-colorなので、まさしくエラー時の罫線に当たる部分の色の設定になりますね。

--amplify-components-fieldcontrol-error-border-colorをもう少し深掘りしていきます。
--amplify-colors-border-error

--amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);

というわけで、amplify-colors-border-errorに設定されている色味を変更すればよさそうです。でも、名前から察するに、ここが設定されている部分の色が変わってしまうってことですよね！？
ちゃんと理解して使わないと怖いです・・

figma 上では、ハイフン区切りをピリオド.、または/で置き換えればよさそうです。
figma 上でamplify.colors.border.errorを探してみましょう。

おおぅ、これっすね。
{colors.red.80.value}という記載になっているので、figma 上で定義されている赤色を使ってそうです。

ここでは、直接色を指定して変更しちゃいましょう。
ChatGPT にエラー時のおすすめ赤を提案してもらいました。
#FF0000とのことなので、これを指定してみます。

エラー表示におすすめの赤い色は、通常、注意を引きやすくするために明るく鮮やかな赤色が使われます。以下は16進数で表現した赤色の提案です。

色: #FF0000

この色がおすすめされる理由は次の通りです：

視覚的な注意: 赤色は一般的に人間の視覚に対して非常に目立ち、注意を引きます。エラーメッセージや警告の表示に赤色を使うことで、ユーザーが問題や注意事項に注意を向けるのに役立ちます。

標準的なカラーコード: #FF0000 はHTMLやCSSなどのウェブデザインにおいて一般的に使用される標準的な赤色のカラーコードです。このカラーコードは広く認識されており、使いやすいです。

感情的な意味合い: 赤色は危険やエラーなどのネガティブな感情や状況を示すのに適しています。ユーザーにとって、エラーや警告があることを知らせるのに赤色を使うことで、情報を素早く理解しやすくなります。

ただし、赤色を使う際には、適切なコントラスト比を確保し、視覚的なアクセシビリティを考慮することが重要です。特に、赤色は一部の視覚障害者にとって認識が難しいことがあるため、十分な対策を講じることが必要です。