10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

みなさんは、アクセシブルなコンポーネントを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=truearia-checked={true}
といった感じに表示してもらえると、コピペでそのまま使え、嬉しいのになと感じました。

まとめ

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

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


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

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

10
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?