Product · SaaS
PortfoliYo
PortfoliYo lets anyone build and publish a portfolio at their own /username page, from templates, a block editor, custom code, or an existing Figma design. It converts Figma frames into responsive HTML and CSS, and can read an uploaded .fig file directly without the Figma API.
- Role
- Creator & developer
- Client
- Own product
- Timeline
- 2 weeks, May – Jun 2026
- Year
- 2026
Figma frames converted to responsive HTML/CSS
Reads .fig files directly, no Figma API needed
Public /username portfolios with templates and autosave
Overview
Designers often have a portfolio already designed in Figma and no time to rebuild it as a website. PortfoliYo turns that design into a live page, and gives everyone else templates and an editor to start from.
What I built
A Next.js and Supabase app with per-user public pages. The hardest part is the Figma import: one path walks the Figma REST API's node tree and maps frames, auto-layout, and text to responsive HTML and CSS; the other reads an uploaded .fig file locally by unzipping it and decoding Figma's binary schema, so no API token is needed. Image placeholders let users swap in their own photos after import.
Key features
Figma REST node trees converted to responsive layouts using container-query units
Native .fig parser: unzips the file and decodes Figma's kiwi binary format
Image slots ({{image:KEY}}) so imported designs and templates take the user's own photos
Block editor, templates, and a custom-code editor
Autosave, onboarding tour, and Supabase sign-up and login
Built with
Have a project like this?
I take products from first sketch to shipped, design, build, and the AI in between. Tell me what you’re working on.
