bfd364909e
- Move variables roadmap into the VitePress development docs - Replace the stale renderer profiler plan with current usage notes - Refresh eval scripting docs with the supported API surface
90 lines
3.1 KiB
Markdown
90 lines
3.1 KiB
Markdown
# Variables UI Roadmap
|
|
|
|
OpenPencil already supports local variable collections, modes, aliases, import/export, a variables dialog, color bindings, and several number bindings in the inspector. The remaining work should focus on making variables feel complete in day-to-day editing instead of expanding scope into remote libraries.
|
|
|
|
## Current status
|
|
|
|
Implemented:
|
|
|
|
- Local variable collections and modes.
|
|
- Color, number, string, and boolean variable values.
|
|
- Alias values and alias resolution.
|
|
- Variables dialog with collection tabs, mode columns, type picker, add/rename/delete flows, and mode duplicate/default/delete actions.
|
|
- Shared variable picker popover.
|
|
- Fill and stroke color bindings using `fills/{index}/color` and `strokes/{index}/color`.
|
|
- Number binding primitives via `VariableScrubInput` / `useNumberVariableBinding`.
|
|
- Number bindings for opacity, corner radius, independent radii, and size controls.
|
|
- .fig/.pen variable import/export paths and token/codegen helpers.
|
|
|
|
## Principles
|
|
|
|
- Inspector fields should bind variables directly; the variables table alone is not enough.
|
|
- Every bindable field should support direct, bound, and mixed states.
|
|
- Pickers should be filtered by variable type.
|
|
- Bound values should show the variable name plus the resolved preview/value.
|
|
- Variable mode behavior should match Figma where practical: the left-most mode is the default mode.
|
|
|
|
## Next useful work
|
|
|
|
### 1. Finish high-impact number bindings
|
|
|
|
Add bindings for remaining common numeric inspector fields:
|
|
|
|
- Auto-layout gap.
|
|
- Padding values.
|
|
- Stroke width.
|
|
- Font size.
|
|
- Line height.
|
|
- Letter spacing.
|
|
- Min/max width and height.
|
|
|
|
### 2. Improve variable management UI
|
|
|
|
The current dialog works, but it still feels like an early table UI. Next improvements:
|
|
|
|
- Move collections from top tabs to a left sidebar.
|
|
- Render slash-path groups, e.g. `color/text/primary`, as grouped rows.
|
|
- Improve type-specific value cells.
|
|
- Add clearer empty states for collection, search, and mode columns.
|
|
- Add copyable diagnostics for invalid aliases or unresolved bindings.
|
|
|
|
### 3. Complete mode operations
|
|
|
|
Mode operations exist, but should be made robust and undoable:
|
|
|
|
- Add mode reorder.
|
|
- Add undo/redo coverage for add, rename, duplicate, default, delete, and reorder.
|
|
- Ensure the first mode is always treated as the default mode in import/export and UI.
|
|
|
|
### 4. Add mode context
|
|
|
|
Allow pages, frames, and selected layers to choose modes per collection.
|
|
|
|
Resolution order:
|
|
|
|
1. Explicit mode on the node for the collection.
|
|
2. Parent-chain explicit mode.
|
|
3. Page explicit mode.
|
|
4. Collection default mode.
|
|
|
|
Inspector UI:
|
|
|
|
- Page variables section: collection → selected mode.
|
|
- Selected frame/layer Appearance section: collection → Auto/Default/specific mode.
|
|
|
|
### 5. Improve aliases and token workflows
|
|
|
|
- Add alias editing in value cells.
|
|
- Filter alias picker by same variable type.
|
|
- Show resolved value previews.
|
|
- Prevent alias cycles in editing flows, not only resolution.
|
|
- Add DTCG token import/export after local workflows feel solid.
|
|
|
|
## Non-goals for this roadmap
|
|
|
|
- Remote variable libraries.
|
|
- Publishing workflows.
|
|
- Team/workspace default modes.
|
|
- Prototype variable actions.
|
|
- Expressions.
|