【Figma】Code Connect を使ってアクセシブルなコンポーネントを作成する

はじめに

みなさんは、アクセシブルなコンポーネントをFigmaで作りたいと思ったことはありますか？

UI周りの仕様をFigma内で完結させようとした時、コメントやアノテーションを使って aria-label とかを指定してもなかなか気がつきにくいものです。

そのため、この記事では、Code Connect を使って、 role属性や WAI-ARIAを意図的にデザイン上で表現する方法を解説します。

Code Connectとは？

Code Connectについてこちらの記事で紹介しているのでぜひご覧ください！

Code Connect を使ってアクセシブルなコンポーネントを作成する

この記事では、スイッチボタンをベースに説明していこうと思います

スイッチボタンのアクセシビリティについては、こちらをご覧ください！

① Figmaのコンポーネントを準備する

以下の画像のようなコンポーネントを用意します。

アクセシブルなコンポーネントをFigmaで作るに当たって、非表示の aria-label 用のテキストを テキスト プロパティで作成しています。

また、他のプロパティには、スイッチボタンのON/OFFを切り替える Checked というプロパティと disabled 状態を示す Disabledを入れています。

② コード上のコンポーネントを準備する

いかのような toggle コンポーネントを作成します。

Toggle.tsx

import { InputHTMLAttributes } from "react"

interface props extends InputHTMLAttributes<HTMLInputElement> {
  checked: boolean
  disabled: boolean
}

export const Toggle = ({
  checked,
  disabled = false,
  ...props
}: props) => {
  return (
    <input
      className={`toggle-style ${checked && "is-checked"}`}
      type="checkbox"
      disabled={disabled}
      {...props}
    />
  )
}

③ コードコネクト用のファイルを生成する

以下のコマンドを入力し、コードコネクト用のファイルを生成します。

npx figma connect

生成されたファイルを以下のように修正します！

Toggle.figma.tsx

import { Toggle } from "./Toggle"
import figma from "@figma/code-connect"

figma.connect(
  Toggle,
  "https://www.figma.com/design/2NoYIOk55maQuNYSvCmKFp/qiita-design%231841---Figma-Plugins%E7%94%A8-issue?node-id=10008%3A606",
  {
    props: {
      checked: figma.boolean("Checked"),
      disabled: figma.boolean("Disabled"),
      ariaLabel: figma.string("aria-label"),
      ariaChecked: figma.boolean("Checked"),
    },
    example: (props) =>
      <Toggle
        checked={props.checked}
        disabled={props.disabled}
        aria-label={props.ariaLabel}
        aria-checked={props.ariaChecked}
      />,
  },
)

④ Figmaのコンポーネントに紐付ける

以下のコマンドをターミナル入力することで、コード上のコンポーネントをFigmaのコンポーネントに紐付けます。

npx figma connect publish

紐付けに成功すると、FigmaのDevモードのインスペクトパネルで以下のように表示されます。

上記の画像のように、表示されることで、aria-label　を忘れたりすることは少なくなるでしょう！

ただ、表示される内容が、
aria-label=表示する → aria-label="表示する"
aria-checked=true → aria-checked={true}
といった感じに表示してもらえると、コピペでそのまま使え、嬉しいのになと感じました。

まとめ

この記事では、Code Connect を使ってアクセシブルなコンポーネントを作成する方法をまとめした。

ぜひこの記事を参考にコード上でも、Figma上でもアクセシブルなコンポーネントを作るようにしてみてはいかがでしょうか？

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。