OpenBridge CSS Token Exporter

About this plugin

Streamline your design-to-development handoff with the OpenBridge CSS Token Exporter. This plugin is designed specifically to bridge the gap between OpenBridge Figma files and your codebase, ensuring 100% consistency in naming conventions and variables.

Key Features:

•CSS Token Export: Instantly generate a CSS file containing all your OpenBridge CSS variables. No more manual copying of hex codes or values.

•Instant Palette Switching: Easily switch your view between Day, Dusk (Dark Mode), Night, and Bright palettes to test your designs in all lighting conditions.

•Figma Dev Mode Integration: Inspect your designs directly in Dev Mode with the correct OpenBridge naming conventions automatically applied.

•Precision Handoff: Ensure the variables in your code match the OpenBridge system perfectly.

Why use this plugin?

OpenBridge relies on strict standardization for maritime and industrial safety. This plugin ensures that the variable names in your front end match the design system tokens perfectly, reducing errors and speeding up implementation.

This plugin work with the OpenBridge Figma files, found here: https://www.figma.com/@ocean_lab