How to export designs to code

How to export designs to code

Export to Code lets you turn Visily screens into developer-ready code that you can download and use as a starting point for development.

Before you start

  1. Export to Code is a paid feature. Make sure your workspace is on a paid plan that supports code export (Pro and Business).
  2. Currently, only screens can be exported to code.
  3. Visily supports these code formats: React, Vue, and HTML

How to export designs to code

You can export your Visily designs to code in several ways. Open the board that contains the screens you want to export, then follow one of the methods below.

From the Export to Code dialog

  1. Click Export in the top-right corner.


  2. Select Export to Code from the menu to open the dialog.


  3. In the Code format section, choose the format you want to export.


  4. In the Layout mode section, choose your preferred export mode:
    1. AI layout: Generates responsive layout code with AI. This uses 15 AI credits per screen and may take longer.
    2. Static layout: Uses static, fixed layout conversion. This is faster and does not consume AI credits. 
  5. Select the screens you want to export.  You can export up to 10 screens at a time


  6. Click Export to download the ZIP file.

From the canvas

  1. On your board canvas, select the screen or screens you want to export.
  2. Access the export option in either of the following ways:
    1. Right-click the selected screens and choose Export to code from the menu

    2. Use the Export option in the selection toolbar, then choose Export to code.


  3. Choose whether to enable AI Layout.
  4. Select the code format you want to export. The ZIP file will download automatically after you select the code format.

From Inspect mode

  1. Switch your board to Inspect mode.

  2. Select the screens you want to export.
  3. Open the Code section in the Inspection panel.

  4. Choose whether to enable AI Layout, then select the code format you want to export. The ZIP file will download automatically after you select the code format.

How to use the exported files

After the export is complete, Visily downloads a ZIP file that includes the development files and a README file.
  1. Open the README file to follow the step-by-step instructions to run and preview the exported design in your browser.
  2. You can then continue working with the development files in your preferred development environment.

Notes

  1. When exporting multiple screens, each screen is packaged as a separate subfolder in the ZIP file.
  2. If your design uses custom fonts, you may need to add those fonts to your project after exporting so the design displays correctly.
  3. Exported code is intended as a development starting point. You may still need to review and adjust the code based on your project setup.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to export designs as PDF

      This article explains how to export designs as PDF in Visily. You can export design elements, screens, sections, or your entire board as a single PDF file. Export as PDF from the Export dialog Open the board that contains the designs you want to ...

    • How to export designs as images

      This article explains how to export your Visily designs as images. You can export design elements, screens, sections, or your entire board in PNG, JPG, or WebP format to use in documents, presentations, mockups, or share outside Visily. Export as ...

    • How to export designs from Visily to Figma

      This article explains how to export designs from Visily to Figma using the Visily plugin. You can transfer designs from Visily to Figma either by copying them directly or by exporting them as a `.vis` file. Once imported into Figma, the designs are ...

    • How to import designs from Figma into Visily

      This article explains how to import Figma designs into Visily using the Visily plugin for Figma. You can bring your designs into Visily by copying them directly or by exporting them as a `.vis` file. Once imported, your Figma designs become editable ...

    • How to inspect design details

      Inspect Mode lets you review design properties, measurements, CSS details, and assets from your Visily board. This is useful when preparing designs for developer handoff. What you can inspect You can inspect design and CSS properties in Visily, with ...