12. A complete example
login.design: a "Screens" page with a login frame in vertical auto layout, a "Components" page with a button component, a theme collection with two modes and two variables, a text style, an instanc…
Esta página está em inglês; a tradução está a caminho.
login.design: a “Screens” page with a login frame in vertical auto layout, a “Components” page with a button
component, a theme collection with two modes and two variables, a text style, an instance of the button, and a
flow. The tree was consolidated at event 12; the WAL has six events since: a text edit by Ada, a padding change
by Ada, a grouped change by Claude, a comment by Grace and a named version.
json
{
"$schema": "https://raw.githubusercontent.com/arthurafarias/vscode-extension-ui-designer/master/schemas/design-1.0.schema.json",
"$comment": "SoftForge UI Designer design file (FMT-001). Do not edit `tree`. To change the design, append one event per line to `wal`, starting the line with a comma, or use the `ud` command.",
"designVersion": "1.0",
"tree": {
"seq": 12,
"document": {
"id": "doc-5e1a7c3b9d20",
"name": "Login",
"createdAt": "2026-10-05T14:02:51.330Z",
"updatedAt": "2026-10-05T16:38:12.004Z"
},
"pages": {
"pg-0a1b2c3d4e5f": {
"type": "PAGE",
"name": "Screens",
"index": "a0"
},
"pg-6f7e8d9c0b1a": {
"type": "PAGE",
"name": "Components",
"index": "a1"
}
},
"nodes": {
"nd-4c6e8a0b2d1f": {
"type": "FRAME",
"name": "Login",
"parent": "pg-0a1b2c3d4e5f",
"index": "a0",
"width": 390,
"height": 844,
"fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1}}],
"layoutMode": "VERTICAL",
"itemSpacing": 16,
"paddingLeft": 24,
"paddingRight": 24,
"paddingTop": 24,
"paddingBottom": 24,
"primaryAxisAlignItems": "CENTER",
"boundVariables": {
"itemSpacing": {"type": "VARIABLE_ALIAS", "id": "vr-3e5a7c9b1d2f"}
},
"explicitVariableModes": {"vc-2c4e6a8b0d1f": "md-1a2b3c4d5e6f"},
"devStatus": {"type": "READY_FOR_DEV", "at": "2026-10-05T16:30:00.000Z"},
"traces": [{"file": "planning.pb", "item": "REQ-12"}]
},
"nd-9f1b3d5c7e2a": {
"type": "TEXT",
"name": "Title",
"parent": "nd-4c6e8a0b2d1f",
"index": "a0",
"characters": "Welcome back",
"fontName": {"family": "Inter", "style": "Bold"},
"fontSize": 28,
"lineHeight": {"unit": "PIXELS", "value": 34},
"textAutoResize": "HEIGHT",
"layoutSizingHorizontal": "FILL",
"accessibility": {"role": "heading", "headingLevel": 1}
},
"nd-e7a9c1b3d5f0": {
"type": "INSTANCE",
"name": "Sign in",
"parent": "nd-4c6e8a0b2d1f",
"index": "a1",
"componentId": "nd-8a3f1c5e7b92",
"componentProperties": {"Label#a41c": "Sign in"},
"layoutSizingHorizontal": "FILL",
"reactions": [
{
"trigger": {"type": "ON_CLICK"},
"actions": [{"type": "URL", "url": "https://softforge.dev/app"}]
}
]
},
"nd-8a3f1c5e7b92": {
"type": "COMPONENT",
"name": "Button",
"parent": "pg-6f7e8d9c0b1a",
"index": "a0",
"x": 40,
"y": 40,
"height": 48,
"fills": [{"type": "SOLID", "color": {"r": 0.231, "g": 0.357, "b": 0.965}, "boundVariables": {"color": {"type": "VARIABLE_ALIAS", "id": "vr-7b9d1f3a5c7e"}}}],
"cornerRadius": 8,
"layoutMode": "HORIZONTAL",
"layoutSizingHorizontal": "HUG",
"paddingLeft": 24,
"paddingRight": 24,
"primaryAxisAlignItems": "CENTER",
"counterAxisAlignItems": "CENTER",
"componentPropertyDefinitions": {
"Label#a41c": {"type": "TEXT", "defaultValue": "Button"}
},
"description": "Primary action button.",
"codeMap": {
"component": "Button",
"source": "src/ui/Button.tsx",
"language": "tsx",
"props": {"Label#a41c": {"prop": "children"}}
}
},
"nd-2b7d9e4f6a10": {
"type": "TEXT",
"name": "Label",
"parent": "nd-8a3f1c5e7b92",
"index": "a0",
"characters": "Button",
"fontName": {"family": "Inter", "style": "Medium"},
"fontSize": 16,
"lineHeight": {"unit": "PIXELS", "value": 24},
"textStyleId": "st-4d6f8a0c2e1b",
"fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1}}],
"componentPropertyReferences": {"characters": "Label#a41c"}
}
},
"styles": {
"st-4d6f8a0c2e1b": {
"type": "TEXT",
"name": "Body/Medium",
"index": "a0",
"fontName": {"family": "Inter", "style": "Medium"},
"fontSize": 16,
"lineHeight": {"unit": "PIXELS", "value": 24}
}
},
"variableCollections": {
"vc-2c4e6a8b0d1f": {
"name": "Theme",
"index": "a0",
"modes": {
"md-1a2b3c4d5e6f": {"name": "Light", "index": "a0"},
"md-6e5d4c3b2a10": {"name": "Dark", "index": "a1"}
},
"defaultModeId": "md-1a2b3c4d5e6f"
}
},
"variables": {
"vr-7b9d1f3a5c7e": {
"name": "color/action/primary",
"variableCollectionId": "vc-2c4e6a8b0d1f",
"index": "a0",
"resolvedType": "COLOR",
"valuesByMode": {
"md-1a2b3c4d5e6f": {"r": 0.231, "g": 0.357, "b": 0.965, "a": 1},
"md-6e5d4c3b2a10": {"r": 0.506, "g": 0.588, "b": 0.984, "a": 1}
},
"scopes": ["ALL_FILLS", "STROKE_COLOR"],
"codeSyntax": {"WEB": "var(--color-action-primary)"}
},
"vr-3e5a7c9b1d2f": {
"name": "space/md",
"variableCollectionId": "vc-2c4e6a8b0d1f",
"index": "a1",
"resolvedType": "FLOAT",
"valuesByMode": {"md-1a2b3c4d5e6f": 16},
"scopes": ["GAP"],
"codeSyntax": {"WEB": "var(--space-md)"}
}
},
"libraries": {},
"flows": {
"fl-5a7c9e1b3d2f": {
"pageId": "pg-0a1b2c3d4e5f",
"name": "Sign-in flow",
"index": "a0",
"nodeId": "nd-4c6e8a0b2d1f"
}
},
"comments": {},
"versions": {},
"assets": {},
"deletedComponents": {}
},
"wal": [
{"seq":12,"at":"2026-10-05T16:40:00.000Z","op":"wal.base","epoch":"ep-9b7d5f3a1c0e","treeHash":"sha256:6f1e2d3c4b5a69788796a5b4c3d2e1f00f1e2d3c4b5a69788796a5b4c3d2e1f0"}
,{"seq":13,"at":"2026-10-06T09:12:30.412Z","by":"Ada","op":"node.update","id":"nd-9f1b3d5c7e2a","set":{"characters":"Sign in to SoftForge"}}
,{"seq":14,"at":"2026-10-06T09:20:04.118Z","by":"Ada","op":"node.update","id":"nd-4c6e8a0b2d1f","set":{"paddingTop":48}}
,{"seq":15,"at":"2026-10-06T10:02:11.904Z","by":"Claude","op":"node.create","group":"tx-6d8f0a2c4e1b","note":"Add a forgot-password link","nodes":[{"id":"nd-1c3e5a7b9d0f","type":"TEXT","name":"Forgot password?","parent":"nd-4c6e8a0b2d1f","index":"a2","characters":"Forgot password?","textStyleId":"st-4d6f8a0c2e1b","fontName":{"family":"Inter","style":"Medium"},"fontSize":16,"lineHeight":{"unit":"PIXELS","value":24},"textAlignHorizontal":"CENTER","layoutSizingHorizontal":"FILL","textAutoResize":"HEIGHT","fills":[{"type":"SOLID","color":{"r":0.231,"g":0.357,"b":0.965},"boundVariables":{"color":{"type":"VARIABLE_ALIAS","id":"vr-7b9d1f3a5c7e"}}}]}]}
,{"seq":16,"at":"2026-10-06T10:02:11.904Z","by":"Claude","op":"node.update","group":"tx-6d8f0a2c4e1b","id":"nd-4c6e8a0b2d1f","set":{"paddingBottom":32}}
,{"seq":17,"at":"2026-10-06T10:30:45.120Z","by":"Grace","op":"comment.add","comment":{"id":"cn-8b0d2f4a6c1e","message":"Should this button be full width on desktop too? @Ada","anchor":{"nodeId":"nd-e7a9c1b3d5f0","offset":{"x":120,"y":24}},"mentions":["Ada"]}}
,{"seq":18,"at":"2026-10-06T10:45:00.000Z","by":"Ada","op":"version.save","version":{"id":"vs-2a4c6e8b0d1f","title":"Login v1","description":"Ready for the first review.","treeHash":"sha256:3c5e7a9b1d2f40617283948a5b6c7d8e3c5e7a9b1d2f40617283948a5b6c7d8e"}}
]
}What a reader computes from it:
- Pages in order: Screens, Components.
- The Login frame’s children in flow order: Title (
a0), Sign in (a1), Forgot password? (a2). Their positions are derived from the auto layout: padding 24 left and right, 48 at the top (event 14), 32 at the bottom (event 16), gap 16 fromspace/mdin the Light mode chosen on the frame. - The title reads “Sign in to SoftForge” (event 13).
- The Sign in instance shows the Button component with the label “Sign in”, filled with
color/action/primaryin the Light mode, stretched to the frame’s width. - The history panel shows four entries since the consolidation: Ada’s two edits, Claude’s group “Add a
forgot-password link”, Grace’s comment; and the named version “Login v1” at event 18, whose
treeHashnames the document after events 13 to 17. - The tree hash of the tree is the marker’s
treeHash(the file was consolidated, not hand edited), and the epochep-9b7d5f3a1c0enames that consolidation.
Applying the earlier example lines of section 5.11 (numbered there for illustration) would continue from event
19, the largest seq in the file plus one.