danhollick/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

danhollick / zebra