How to update your portfolio from the tools you already use (2026)
Your work is made in Figma, Procreate, Photoshop, Illustrator or Canva. This guide shows, tool by tool, the shortest path from the file you made to a page on a site you own, and what each path can and cannot do today.
By Merav Shaked, designer and art director · Updated October 18, 2026
The short answer
Your design tools do not need to sync with your site. You export the work, as you already do, and the site you own takes it from there: in its folder, Claude Code or Codex builds a case study around your exports, and reads Figma frames from a link when Figma's MCP server is connected. On both ways, your site is also in the Promtfolio studio, where a PDF of a project becomes a new project page, with its text and its pictures, Figma and Canva pages included. Then you publish: drag the folder onto your host, or, from the studio, one click.
Connect Figma's MCP server and paste a link: Claude reads the frames and saves them to the folder. Or export PNG.
Paste a public link: it becomes a project with the live file. Or upload a PDF from Figma: each frame comes in as a picture of the whole page, with its text.
Render H.264 video into the folder. A long film is lighter on Vimeo or YouTube.
The studio does not take video today.
Formats and steps as each tool's own help pages give them, checked on : Figma, Photoshop, Illustrator, Procreate, Canva, Blender and After Effects. Each name links to the page.
Five steps
Export the work from your tool. PNG or JPEG for images, MP4 for video. A layered file such as PSD, AI or a .procreate file does not go on a web page.
Put it in your site's folder. Inside assets/, in a folder named for the project. With Figma's MCP server connected, skip the export: paste the link and ask Claude to save the frames there.
Ask for the case study. For example: "Turn the files in assets/rebrand into a case study." Claude Code or Codex follows the extract-case-study skill that came in your folder.
Answer a short round of questions. The draft marks what your files cannot say as a question for you, never as a sentence written for you.
See it, then publish. Look at the page in a local preview, then drag the folder onto your host. In the studio, upload a PDF or replace an image; with Go live with us, select Publish my latest changes.
What does not happen
Your tools and your site do not sync. A change in Figma reaches your site when you bring it in.
The folder and the studio are two separate ways. A change in the folder stays in the folder, and a change in the studio stays in the studio.
The studio does not turn a Figma link into images, take video uploads, or take SVG, PSD or AI files. A PDF brings its text from every page, and up to eight pictures, from its first 30 pages.
Procreate has no connection to AI tools, by its own choice. Your work comes in as the files you export.
The skill that does the work in the folder is extract-case-study. It came in your download, with the steps for each tool and each vendor's own page, and it never asks for a password or an access token in the chat. To start from your Claude conversations instead of files, the folder has a skill for that too.
Already own your site? The Learning Center has the steps for the folder and for the studio.
Figma, Procreate, Photoshop, Illustrator, After Effects, Canva, Blender, Claude and Codex are trademarks of their respective owners. Promtfolio is not affiliated with or endorsed by them. Facts were checked on the date above, unless a different date stands next to them, and can change; confirm with each vendor.
Questions people ask
Can Claude Code read my Figma designs?
Yes, through Figma's own MCP server. Figma runs it at mcp.figma.com/mcp and documents how to add it to Claude Code and to Codex; you sign in with your Figma account in the browser. Once it is connected, Claude can read a file's structure, take a screenshot of a frame, and export frames as PNG, JPG, SVG or PDF. Figma limits the calls by seat: on a View or Collab seat, up to 20 a month. In a folder from Promtfolio, the extract-case-study skill uses that connection when it is there, and asks for exported images when it is not.
Can I connect Procreate to Claude or to my portfolio site?
Not as a live connection. Procreate states that it does not use generative AI and that it has no access to your art, by design, and we found no official connector for AI tools as of October 17, 2026. Your work comes in as files: share the artwork as a PNG or JPEG, and the process as a video from Actions, Video, Export Time-lapse video. Put the files in your site's folder and ask Claude Code or Codex for a case study. In the Promtfolio studio, whichever way you choose, a PNG or JPEG can replace any image on your site.
Can I update my portfolio with one click?
Publishing can be one click; bringing in the new work is still yours to do. With Go live with us, Promtfolio publishes your site, and after you change it in the studio, Publish my latest changes puts the new version online in one click. With Take it with you, you change the folder with Claude Code or Codex and drag it onto your host again. Your design tools do not update the site on their own: you bring the new work in, as an export or, for Figma, through its MCP server, and you decide when it goes live.
Does Canva work with Claude?
Yes. Canva makes a connector for Claude, listed in Claude's connector directory, and Canva's help center names Claude among the assistants it connects to. Canva says the connector works on every Canva plan, Free included, and that some actions depend on the plan; once connected, it can search your designs, read them and export them. For a portfolio site, the export is what matters: a PNG or JPG of a design goes into your site's folder, where Claude Code or Codex builds the case study around it. A PDF downloaded from Canva can also be uploaded in the Promtfolio studio, whichever way you choose, where it becomes a new project page with its text, and each page drawn as vector art comes in as a picture of the whole page.
How do I add Photoshop or Illustrator work to my portfolio website?
Export it as an image first. Photoshop's Export As saves PNG, JPG, GIF or SVG, and Illustrator's Export for Screens saves PNG, JPEG, SVG and WebP, among other formats. A layered PSD or AI file does not go on a web page. In a site you own as a folder, put the exports in assets/ and ask Claude Code or Codex for the case study. In the Promtfolio studio, whichever way you choose, click an image to replace it with a JPEG, PNG, WebP or GIF. An SVG works in the folder; the studio does not take one today.
Where these facts come from
Read on and , each on the company’s own page. These pages change; if one says something else today, it is the one to trust.