Zebra

Note:

⚠️ If you are looking to follow along with the v1.0 tutorial you can find that here⚠️

Zebra is a lightweight, APCA color contrast plugin

What is APCA?

APCA(Advanced Perceptual Contrast Algorithm) is a modern color contrast algorithm that aims to be be perceptually uniform. It is currently being evaluated as a part of the WCAG 3 draught process.

Note: Because APCA is still being evaluated, it is likely that some aspects of the algorithm and scoring system will change between APCA versions.

More info here

---

Local Development:

Step 1

Download or clone the repo and run npm install

Step 2

• To build: npm run build
• For production: npm run build:production
• For development: npm run dev.

Step 3

Open Figma and in the menu go to Plugins -> Development -> New Plugin.

Step 4

Choose Link to Existing Plugin and find the zebra manifest.json

---

How stuff works

This plugin uses a few key dependencies:

• react for rendering the UI.
• apca-w3 for APCA contrast calculations.
• chroma-js to help with some color conversions.
• stitches for css in JS.
• radix-ui for UI components.
• zustand for state management.

There are two dependencies entirely for building and bundling:

• vite - A dev server that takes all the frontend code in ./ui-src and spits it out into ./dist/index.html via a script tag.
• esbuild - a bundler that takes all the Figma side code in ./plugin-src and spits it our into ./dist/code.js