Docs

Design

Paste from Figma

Copy frames in Figma and paste them onto the Velork canvas as editable layers, with components, variables, and comments.

Velork reads Figma's clipboard directly. Copy a frame in Figma, paste it on the canvas, and you get editable layers with their styles intact. No plugin or export step is needed.

Copy in Figma

  1. Select one or more frames, components, or layers.
  2. Press Cmd + C.

Paste on the canvas

  1. Open Canvas in Velork.
  2. Click the canvas so it has focus, then press Cmd + V.

The layers appear on the current page and in the Layers section of the Design sidebar.

What comes across

  • Layers and styles: frames, auto layout, shapes, vectors, text, fills, strokes, and effects
  • Components and instances: the components behind the pasted instances come along, in a Components section on the page. Pasting the same component again does not duplicate it.
  • Variables and styles: color and type tokens are added to the design, and Velork lays them out on the page in a Design Tokens section, as a spec sheet

Build it in code

Select the pasted frame and ask Agent in Develop mode:

Build this frame as React + Tailwind. Reuse the components we already have.

Agent works from the layer tree and your repo together.

Figma comments on the canvas

Connect your Figma account to see a file's comments on the layers you pasted from it.

  1. Open Actions on the canvas toolbar and choose Figma….
  2. Click Connect Figma account and finish the authorization in your browser.

After that, pasting from a Figma file pulls in its comments as pins on the matching layers. You can reply, react, and resolve them from Velork, and the changes go back to Figma. Velork checks for new comments in the background.

If Figma stops accepting the connection, the panel shows Reconnect Figma. Click it to authorize again. To disconnect, open Figma… and click Logout.

Pasting works without a connected account. You only need it for comments. See Figma account.

Tips for clean pastes

  • Use auto layout in Figma. It maps to auto layout in Velork and to flex or grid in code.
  • Name layers by what they are. Agent uses the names when it writes code.
  • Define colors and text styles as variables or styles so they arrive as tokens.

Limits

  • Pasting is a one-time copy. When the Figma file changes, copy and paste again.
  • Velork does not import a Figma file from its URL.

Next steps

Canvas

Edit the layers after you paste

Figma account

Connect Figma for comments

Chat

Prompt patterns for building from a design

Still stuck?

Ask us anything, or see what changed in the latest release.

Changelog