ElmonyDocs

Integrations

Figma

Connect Figma to import accessible files, frames, or layers into Elmony's design workflow. The current integration is read-only: it does not write Elmony changes back to Figma.

Connect Figma

  1. Open Settings → Integrations and find Figma.
  2. Select Connect Figma.
  3. Authorize the account that can view the source file.
  4. Return to Elmony and confirm that the Figma row shows Connected.

The design editor can also start the same connection flow when an import requires Figma access.

Import a design

  1. Start or open a Mobile App or Website design project.
  2. In the design chat, enter /figma followed by a Figma file, frame, or layer URL that the connected account can read.
  3. Review the imported layout, fonts, images, and responsive behavior.
  4. Save the design, then continue to Builder Step 2 when it is ready to become code.

Import is a starting point, not a permanent two-way sync. Later Figma edits are not automatically merged into an Elmony design or generated code project.

Prepare the source file

  • Use clear frame and layer names and keep related screens together.
  • Prefer consistent spacing, reusable components, and explicit layout constraints.
  • Verify that the connected user can open the exact URL before importing it.
  • Review image licensing and remove sensitive data from example content.

Troubleshooting

  • Reconnect Figma if the authorization expired or the wrong account was used.
  • Confirm the URL points to a file, frame, or layer and that the account has view access.
  • If an import is incomplete, import a smaller frame and simplify unsupported effects.
  • Disconnecting Figma does not remove designs that were already imported into Elmony.

See the design-to-builder guide for the rest of the workflow.