Import a design turns your agency's design into a Mount Olympus site made of real sections, text and widgets you can edit, not a picture of the design. Use it when you've designed a site in Figma or another design tool and want it built.
How to import a design
- Go to Websites, click Import, then Import a design.
- Source (Where's the design?): click Figma link or Upload images or a PDF. You go straight to the next step.
- Client (Which client is this for?): click a client (use Search clients… to find one), or click New client, type the business name and click Create client. You go straight to the pages step.
- Pages: add the design (see the two sections below), name each page and set its phone version. The first page is the homepage.
- Click Continue.
- Cost: check the page count, the time and the credits, then click Build the site.
- Build: Zeus builds the pages one by one, with a tick next to each finished page. You can close the page. We email you when it's done.
When it's done, the site opens in the editor with Zeus's chat showing what to check before you publish.
Pages from Figma
- Connect Figma (see Connecting Figma below).
- Under Figma file or frame link, paste the link to the file or one of its frames (
https://www.figma.com/design/…) and click Find frames. - Tick the frames to build. With 8 or fewer desktop frames they're all ticked; with more, tick the ones you want. If you linked one frame, only that frame is ticked.
- Each frame shows its page, name and size, and a Page name box. The first ticked frame is the homepage.
- Under each frame, pick its phone frame, or leave No phone frame (Zeus makes the phone layout). Phone frames named like their page (for example "Home — Mobile") are paired for you.
From Figma, the words, colors, sizes and weights come exactly from the file, and frames that use auto layout become containers with the same direction, spacing, padding and alignment.
Pages from images or a PDF
- Drop files on Drop design frames here, or choose files, or click it to choose them.
- Use PNG, JPG or WebP, one image per page (1× or 2× exports are both fine), or a PDF (see below).
- Type each page's name in Page name, or click Zeus, suggest page names.
- To add a page's phone design, add its image and set it to Phone version of that page in the dropdown next to it (the other choice is A page). Phone-shaped images named like a page ("About mobile") are paired for you.
- Use the arrows to change the order. The first page shows Homepage.
When you click Continue, the images upload. After that you can still rename pages, but you can't remove or add images. To change the files, start a new import.
PDFs
A PDF can be either of these, and we tell them apart from what's on the sheets:
- Frames or slides exported from a design tool: each sheet is its own page.
- A website mock-up printed to PDF (for example, your browser's Save as PDF): a long web page runs over several paper sheets. Its sheets are put back together into one page, in order, with the print margins and page-break gaps taken out. A new page starts wherever the site's header (logo and menu) appears again.
As soon as the PDF is read, Zeus names its pages from what's on them: the first is Home, and the others take their name from the design's menu or main heading. Change any name before you go on.
Connecting Figma
- When Figma sign-in is set up on your platform, click Connect Figma and sign in to Figma to give read-only access to your files.
- Or paste a personal access token in the box (Or use a personal access token, or Figma personal access token when sign-in isn't set up). In Figma, open Settings → Security → Personal access tokens, click Generate new token, and set File content to read-only. Paste it and click Save.
- Once connected you see Figma connected, with the account name. Click Disconnect to remove it.
- The connection belongs to your agency, and the token is stored encrypted.
- The Figma account needs to be able to open the file.
What Zeus does with a design
- Text is real text you can edit. From an image or PDF, Zeus reads the words from the picture, and their sizes, line spacing and colors are measured from the design's pixels. Headings, labels, button text and words in a decorative font are always text, never a picture of the words.
- Headings get sensible levels: one main heading per page, then section and card headings.
- Layout: designs are rebuilt by Zeus and checked against the design. Columns stay side by side, and small pills and buttons keep their own width.
- The header: the design's own header becomes the site header, on one row: the logo, one menu linking to the imported pages with the same names, then the links and buttons on the right.
- The header on tablets and phones: when the design has no phone frame, tablets and phones show the logo, the main button (like "Start free trial") and a menu button. The menu button opens the menu, which lists the menu items and the header's other links and buttons (like "Log in"). The desktop header stays as designed.
- Icons: checkmarks, checkboxes, arrows, play buttons, chevrons, stars and other small symbols become Icon widgets in the design's color and size. Icons drawn in Figma become icons too.
- Decorative shapes (color swatches, progress bars) become Shape and Divider widgets.
- Buttons, menus and cards become button, menu and container widgets.
- Photos are cut out of the design (from Figma, the original photos) and saved to the client's media in a folder named after the design. A screenshot of an app, a device mock-up or a chart stays one picture. A logo is cut out together with its brand name.
- The theme comes from the design: brand colors, button style and fonts, matched to the closest Google Font when the design uses one the site can't load.
- Phone layout: from the phone frame when the page has one. Otherwise Zeus makes it.
The list of things to check
Anything Zeus had to guess is listed in the editor's Zeus chat and in the import's notes. For example:
- a font matched from a picture, or swapped for the closest Google Font;
- a phone layout the design didn't have;
- a menu item with no page in the design (it links nowhere until you add the page or remove the item);
- placeholder text left in the design;
- text too small to read with certainty;
- a background photo with the design's text drawn on it;
- hover looks and the phone menu, which a design doesn't show.
Click an item to go to its page. Tick items off as you check them.
Examples
- A five-page Figma design for a law firm: paste the file link, keep the five desktop frames ticked, pair each with its mobile frame and build. Text, colors and spacing come straight from the file.
- A homepage mock-up from another design tool: export it as one PNG, add the phone version as a second image and set it to Phone version of Home.
- A client's old brochure site saved as a PDF: print each page to PDF in the browser, upload the one file, and let the sheets be put back together into pages.
Limits and what it can't do
- Up to 30 pages per import. Phone versions don't count toward the 30.
- Files: PNG, JPG, WebP or PDF, up to 40 MB each.
- Find frames shows up to 60 frames of a file. For a frame that isn't shown, paste a link to that frame.
- Very long designs are rebuilt up to about 16,000 pixels tall at desktop width. The rest is noted.
- Hover looks, the phone menu and anything else a still design doesn't show are made by Zeus and listed to check.
- Clients can't import designs.
Credits
- Each page costs credits (10 credits a page at the standard price). The price shows on the Cost step and on Build the site.
- Phone versions are free: they're part of their page.
- Zeus, suggest page names is free.
- You need enough credits for every page to start. Each page is charged as it finishes, and a page that fails is free. Once started, the build always finishes.
Who can use it
Agency people with the Mount Olympus tool. A team member limited to some clients can import only into those clients.
Troubleshooting
- "file is over 40 MB": export the design smaller, or split a PDF into parts.
- "file isn't a PNG, JPG, WebP or PDF": export it again in one of those formats.
- "Couldn't read file: …": the PDF couldn't be opened. Export it again, or export the pages as images.
- The Continue button is grayed out: the hint under the list says why: "Add at least one page", "Name every page", "Two pages have the same name" or "A phone frame points at a page that was removed".
- "Zeus couldn't suggest names right now — name the pages yourself": type the names in yourself.
- "You're going too fast — try again in …": page names were asked for too many times in a row. Wait the time shown, or type the names yourself.
- "Paste a Figma file or frame link (figma.com/design/…)": the link isn't a Figma file or frame link. Copy it from Figma's address bar or Copy link.
- "Connect Figma first": connect Figma or save a token, then try again.
- "That doesn't look like a Figma personal access token" or "Figma didn't accept that token — check it was copied in full and has the "File content: read" scope": generate a new token with File content set to read-only and paste the whole thing.
- "The Figma connection has expired — reconnect Figma" (or "Figma refused access — reconnect Figma…"): click Reconnect Figma next to the message and approve Figma again. If you connected with a personal access token, the button reads Enter a new token: click it and paste a new token.
- "No frames were found in that file — designs need to be in frames": in Figma, put each page design in a frame, then click Find frames again.
- "A design image didn't finish uploading — add it again" or "A design image is missing — add it again": an upload didn't finish. Start the import again and add the images.
- "Label needs N credits — you have M. Buy credits to continue.": buy credits, or build fewer pages.
- "This page lost touch with the build. It carries on in the background — you'll get an email when it's done.": your connection dropped. Nothing is lost. Wait for the email.
- "The build stopped": click Retry from where it stopped, or open the import again from the email and retry there.