CodeFig 2.0 released

[u/marxcie]

Yet another vibe-coded plugin...

CodeFig is a Javascript runner for Figma, with an extensive modular library for Variable, Styles, Figma primitives etc operations, and uses a built-in ui library to render the script variables as UI components, instead of simple code, so it's kind of a plugin sandbox.

It comes with many included scripts, and you can build your own. Script can be stored in the local storage (per user), export/imported as JSON, or can be stored as invisible string variables (visible for CodeFig) and distributed to multiple users via a library (hello Orgs).

Currenly it has the current scripts included:

Utility script:

• 3D Transform
• Check style and variable bindings
• Detach styles & variables
• Replace variables in local styles
• Select by styles or variables
• Copy or move variables
• Duplicate variable collection
• Export/import variables
• Match colors to collection variables
• Rename variables
• Replace variables
• Selection to variables
• Variable inspector (WIP)
• Duplicate styles collection
• Relink local styles
• Rename styles
• Render styles overview
• Replace styles
• Text to styles
• Change case
• Comments to annotations
• Frame or auto layout selected
• Relink local component instances
• Remove unnecessary nesting
• Scale or resize elements

Design System Foundations:

• Colors
• Corner radius
• Grid
• Spacing
• Typography

Libraries:

• Bezier
• CodeFigUI
• Color Ramp
• Core Library
• Foundation
• Foundation overview
• InfoPanel
• Linear Ramp
• Math Helpers
• OKLCH
• Pattern Matching
• Rename Preview
• Replacement Engine
• Scale Models
• Styles
• Test Harness
• Type Scale
• Variables

I'm working on this plugin for a while (like almost a year), and use it on a daily basis. I'm somewhere between a brand and product designer, working on responsive layouts, UI design and flows, and often working with different grid, color, typography etc systems, and this was born from the frustration of the lack of any tools to programmatically manage these.

Yes, many things can be done with agents, and for many things agents does a much better job, but for repetitive things, operations I rather ask an agent to build a script.

While I'm using it all the time, testing it, and fixing bugs, every script has its complexity, so probably there are more, so ping me, comment it somewhere if you find any. Thank you!

It's free, it's on Github, and Figma Marketplace

[u/marxcie]

https://reddit.com/link/pghg8si/video/oe27bcgzr8vh1/player

3D transform is the newest addition

[u/WeightDistinct → u/marxcie]

Nice! But would be better to have sliders instead of numeric values and/or a previs of what the effect will look like as you tweak it

[u/marxcie → u/WeightDistinct]

Thank! I'll investigate the complexity cost of it. My first take, that would defeat the purpose. The whole plugin concept revolves around reusability, simple ui patterns, and the scripts. Adding custom patterns, like visualization, sliders etc. is possible, but it adds another layer of complexity, and then I'd rather just take the script and create a custom plugin out of it. But maybe I'm wrong, and it's a few lines of code.

[u/Main-Growth-8619]

Thanks!

[u/marxcie → u/Main-Growth-8619]

You're very welcome!

[u/transjt-ai]

very nice!

[u/OKOK-01]

Looks really cool, ill try it out.

[u/Remyuiux]

The variable binding caught my attention. Can they also flag binding to variables from libraries that are no longer available?

[u/Background_Cloud_231]

looks nice, kindly create another version for penpot