The Accessibility Design Tools Figma plugin offers a subset of annotations of the Accessibility Design Tools Figma library for designers. It is intended to annotate accessibility-relevant information in application and control visual and interaction design before handover to development.
The related Figma plugin, the Accessibility Design Tools Figma library and the full library documentation are also available now.
Please provide all feedback to this e-mail: a11ydesigntools@sap.com.
Each of the plugins contain a quick reference (Info "i") how to use them on existing Figma stencils within Application UI Design.
The plugin sources are located in the ACCAssets folder of this repository. They have to be installed in a typical project structure for Figma Plugin development with an IDE like VS Code.
Please note that the required Figma node _modules subdirectory in the ACCAssets folder to run the plugins is NOT part of this distribution and should be created as part of the code setup according to Figma plugin development documentation.
The Figma desktop app: Plugin development and testing requires the Figma desktop app. Figma will need to read your plugin code saved as a local file. You can download Figma from the Figma downloads page. If you already have the desktop app installed, make sure you’re running the latest version. Visual Studio Code: This is the development environment you’ll be using.
For setup of dev environment, please read the Figma Plugin QuickStart Guide:
- To test the general workflow, it is recommended to create a basic example plugin project from the scratch.
- For project dependencies, install then Node and Npm from Nodejs.org website. When you download Node, your download also includes npm.
- Install Typescript compiler tsc for Visual Studio Code if not automatically installed by Node.js Setup Wizard.
- Go to the root folder of your project. In the Visual Studio Code terminal type "npm install" and press Enter. This will create the node_modules subfolder in your test project.
As a final step, either replace the code in the basic plugin structure by file content of this project or install the project somewhere in the file system and execute a "npm install" in its root which will give you the node_modules folder as subfolder.
For more details, please contact the respective Figma plugin development documentation.
This project is open to feature requests/suggestions, bug reports etc. via GitHub issues. Contribution and feedback are encouraged and always welcome. For more information about how to contribute, the project structure, as well as additional contribution information, see our Contribution Guidelines.
If you find any bug that may be a security problem, please follow our instructions at in our security policy on how to report it. Please do not create GitHub issues for security-related doubts or problems.
We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone. By participating in this project, you agree to abide by its Code of Conduct at all times.
Copyright 2023 SAP SE or an SAP affiliate company and contributors. Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.