Editing Vue in Dev Mode

#What this is for

In Figma Dev Mode, developers often want to quickly view or patch a .vue file linked to the selected Figma component without switching to a code editor. The Code tab in Dev Mode does this directly in the plugin window.

Requires a connected repository (see Git integration). Changes are committed straight to the configured branch.

---

#What's available

#.vue file tree

On the left, a tree browser over the Vue components folder (set under Code → Repository connection → Vue components path).

• Folders load lazily — contents are fetched from Git when first expanded
• Files already bound via Code Connect show a "linked" mark
• Refresh clears the tree cache and re-reads the repository

#Code editor

On the right, a Monaco editor:

• Syntax highlighting (.vue uses the HTML grammar — sufficient for SFCs)
• Line count and language are shown in the bottom status bar
• Uncommitted / Synced with repo indicator tells whether the buffer matches the current repository content

---

#Save & Publish

The Save & Publish button creates one atomic commit on the configured branch.

• Default commit message: [SXL Studio] Update <path>
• After a successful commit, the plugin automatically fetches the new blob SHA — this prevents a 409 sha mismatch when you save again from the same window
• If the commit fails (conflict, network, permissions), the error is shown in a toast and the buffer stays dirty

#Preflight conflict check

Before publishing, the plugin silently re-reads the remote file:

• If the remote SHA matches the one you opened — the commit goes through with no extra UI
• If the remote SHA diverged (someone updated the file on the server) — a "Remote has changed since you opened this file" dialog opens with a side-by-side diff of remote vs. your buffer:
  • Overwrite remote (danger) — force-commit on top of the updated remote using the fresh SHA
  • Reload from remote — discard local edits and take the latest remote into the editor
  • Cancel — nothing changes; decide how to proceed

#View diff button

Next to Save & Publish there's a View diff button: it opens a read-only Local vs Remote Monaco side-by-side comparison without attempting to commit. Handy for quickly confirming the exact changes you're about to publish.

#Shortcut

Ctrl + S (Windows/Linux) or Cmd + S (macOS) inside the editor triggers the same Save & Publish. The browser's "Save page" fallback is suppressed.

#Unsaved-changes guard

If the current file has unsaved edits and you open another .vue, the plugin asks for confirmation. Cancel — you stay on the current file; accept — you switch (edits are lost).

---

#Bind to a Figma component

The Connect button next to Save binds the open .vue to the currently selected Component or Component Set in Figma:

• A Code Connect entry is created with framework vue3
• The entry is saved into diff-code-connect.json — it will reach the repository on the next push via the design-file Tokens tab
• Dev Resources on the node pick up the entry after you open the file in Design Mode (Figma API limitation: Dev Resources cannot be written from Dev Mode)

Connect is disabled if:

• No Component / Component Set is selected in Figma
• Repository URL is not set

---

#Limitations

• Only files from the connected repository can be edited
• Creating new files from the editor is not supported — the flow is focused on editing existing .vue components
• No runtime preview — this is a source editor, not a component sandbox

---

#Related

• Code Connect & Storybook
• Git integration
• Dev Mode overview