eBay / figma-include-accessibility-annotations

Include is a tool built to make annotating for accessibility (a11y) easier—easier for designers to spec and easier for developers to understand what is required.
https://include.ebaydesign.tech
Apache License 2.0
77 stars 9 forks source link
a11y accessibility annotations color-contrast design development figma figma-plugin react
include logo # Include an accessibility annotation Figma plugin [Docs](https://include.ebaydesign.tech) ∙ [Try in Figma](https://www.figma.com/community/plugin/1208180794570801545/Include%3A-an-accessibility-annotation-tool) ∙ [Roadmap](#roadmap) ∙ [Contribute](#contributing)

Intro

plugin version 14

The eBay Include accessibility annotation Figma plugin is a tool to make annotating for accessibility (a11y) easier — easier for designers to spec and easier for developers to understand what is required.

The plugin was developed by members of the accessibility and design teams at eBay and is released for public use on Figma. You can view and install the latest version of the plugin here.

Roadmap

Near term bug fixes & improvements

Future explorations

Installation

npm i

Development

npm run dev

To open Inspect mode

⌘ Command + ⌥ Option + I

With the iframe of web app in a Figma plugin, hot-reloading doesn't really work, so to re-start the plugin quickly:

⌘ Command + ⌥ Option + P

To open the plugin in development mode on Figma, map the manifest file at the root of this project.

import manifest of Figma plugin

See docs for more details on the project file structure and Figma layer methods used in this project.

Contributing

The main purpose of this repository is to provide a jumping-off point for developers and designers who want to expand upon or customize the plugin's accessibility annotation functionality. We welcome pull requests, feature ideas, and bug reports.

License

Apache 2.0 - See LICENSE for more information.