How to Connect Figma to UniLink (Showcase Your Design Portfolio)
How to Connect Figma to UniLink (Showcase Your Design Portfolio)
Embed interactive Figma prototypes directly on your UniLink page so clients and recruiters can explore your work without downloading a file.
- Add an Embed block in Dashboard → Add Block → Embed, paste your Figma prototype URL, and the interactive design renders inline.
- Enable "Allow embed" in Figma's Share settings — this single toggle is all that stands between your design and a live, interactive portfolio.
- Visitors can click through your prototype in real time on your UniLink page without a Figma account or any software installation.
For designers, the gap between "great work" and "visible work" is often a frictionless way to share it. Sending a Figma link in an email requires the recipient to have an account or at minimum tolerate a login prompt. Embedding the prototype directly on your UniLink page removes every barrier — visitors land, see the design, and can interact with it immediately. That immediacy is the difference between a portfolio that gets skimmed and one that gets remembered.
What Figma Does
Figma is the leading browser-based interface design tool used by product designers, UX designers, and creative teams worldwide. Beyond static mockups, Figma supports interactive prototypes: screens connected by hotspots, transitions, and overlays that simulate the behavior of a real app or website. These prototypes can be shared and embedded publicly, making them ideal for portfolio showcases and client presentations.
When embedded in UniLink, a Figma prototype loads the full interactive experience inside an iframe on your page. Visitors can click through screens, trigger transitions, and experience the interaction design exactly as you built it. For client presentations, this is substantially more impressive than screenshots — and for job applications, it shows hiring managers the quality of your thinking, not just the visual output.
Figma's embed also works for static design files and high-fidelity mockups when you do not need interaction. A visual reference to a brand identity system, a set of UI components, or a completed screen design can all be embedded as view-only Figma files. The level of interactivity you provide is controlled entirely by whether you link to a Prototype view or a standard file view.
How to Get Started
- In Figma, open the file or prototype you want to embed. Click the Share button in the top toolbar. In the sharing panel, toggle Allow anyone to view to on, and also enable Allow embedding. Copy the Prototype link (not the editor link) — it contains
/proto/in the URL. - In the UniLink dashboard at app.unilink.us, open your page editor and click Add Block. Select the Embed block.
- Paste the Figma prototype URL into the Embed URL field. UniLink will generate an iframe using the correct Figma embed endpoint.
- Set the block Height to match your prototype's screen dimensions. For a mobile prototype, 700–800px works well; for a desktop prototype, 600–750px is typical.
- Click Save and preview your page on both desktop and mobile to confirm the prototype loads and is interactive, then publish.
How to Use Figma
- For a UX portfolio, create a Figma project with your best case studies. Build a prototype that connects an overview screen to individual project screens. Embed this on your UniLink page so recruiters get an interactive portfolio tour rather than a static PDF.
- For client presentations, embed a specific prototype relevant to the client's brief directly on a dedicated UniLink page. Share that page URL in your proposal email — clients click the link and immediately see the interactive concept with no login required.
- For design system showcases, embed a view-only Figma file that displays your component library. Potential employers or clients can browse your design language and assess your systematic thinking before a formal review.
- Use Figma's Starting Frame setting in prototype sharing to control which screen loads first. Choose a full-cover splash screen or a clear navigation entry point so the first impression is intentional, not arbitrary.
- Add a Button block on your UniLink page linking to the full Figma file URL (view-only) alongside the embedded prototype. This lets detail-oriented visitors open the full file in a new tab to inspect spacing, typography, and component details.
Key Settings
| Setting | What It Does | Recommended |
|---|---|---|
| Allow Embedding (Figma) | Enables the Figma file to be rendered inside an iframe on external sites | Must be on — the embed will not load without this setting enabled in Figma's Share panel |
| Embed URL Type | Whether you paste a prototype (/proto/) or a view-only file link | Use /proto/ links for interactive prototypes; use standard share links for static file views |
| Block Height | Sets the iframe height on your UniLink page | 700–800px for mobile prototypes, 600–750px for desktop prototypes |
| Starting Frame (Figma) | Determines which prototype screen loads first in the embed | Set to your most compelling or clearest entry-point screen for the best first impression |
| View-Only Access (Figma) | Controls whether viewers can see design layers or only the rendered prototype | Keep view-only enabled to prevent unauthorized file duplication |
Get the Most Out Of Figma
Your UniLink page functions as a curated portfolio front door. Rather than embedding every project, be selective. Choose the one or two prototypes that best demonstrate your range and quality. A single exceptional interactive prototype that visitors spend two minutes exploring is far more memorable than six static mockup embeds that get scrolled past in fifteen seconds.
Use Figma's Prototype Sharing Analytics (available on paid Figma plans) alongside UniLink's link analytics to understand the full visitor journey. You can see how many visitors opened your UniLink page, how many interacted with the embedded prototype, and which screens they spent the most time on. This combination of analytics helps you understand whether your portfolio is resonating and where to focus your next design projects.
For freelancers who regularly pitch to new clients, consider creating a separate UniLink page for each major industry or service type — one page for e-commerce clients, one for SaaS products, one for mobile apps. Embed prototypes specific to each context so the work visitors see feels directly relevant to their project. Share the appropriate page URL in each proposal rather than always sending to your generic portfolio link.
Keep your Figma prototypes tight and purposeful. A 60-second interactive walkthrough that demonstrates a single core user flow leaves a stronger impression than a 40-screen prototype that tries to show everything. If a visitor reaches a dead end in your prototype (a hotspot that goes nowhere), it reflects on your attention to detail — do a full walkthrough before embedding.
Troubleshooting
| Problem | Cause | Fix |
|---|---|---|
| Embed shows "Figma requires you to sign in" | Allow Embedding is not enabled in Figma's Share panel | Open the file in Figma → Share → enable "Allow anyone to view" and "Allow embedding," then reload your UniLink page |
| Prototype loads but is not interactive | The URL used is a view-only file link, not a prototype link | In Figma, switch to Prototype view and copy the URL from the Share button — it should contain /proto/ in the path |
| Embed is too small or crops the design | Block height is set lower than the prototype screen dimensions | Increase Block Height in UniLink — try 800px and adjust until the first prototype screen displays fully without scroll |
| Embed does not load on mobile | Some mobile browsers restrict iframe autoplay and interaction | Add a fallback Button link below the embed that opens the Figma prototype directly in a new tab for mobile visitors |
- Visitors interact with fully live prototypes in the browser with no Figma account required
- Makes a dramatically stronger impression than static screenshots or PDF portfolios
- No additional tools needed — Figma's native sharing handles everything once "Allow embedding" is on
- Works for both interactive prototypes and static view-only design files
- Large or complex prototypes can be slow to load on mobile or slow connections
- Allow Embedding must be manually enabled in Figma for every file — easy to forget when sharing new projects
- Figma embed performance and behavior can change with Figma product updates outside UniLink's control
Frequently Asked Questions
Do visitors need a Figma account to view the embedded prototype?
No. With "Allow anyone to view" and "Allow embedding" both enabled in Figma's Share settings, any visitor can interact with your embedded prototype without signing in to Figma. The prototype runs entirely in the browser through the embed.
Can I embed a Figma design file (not a prototype)?
Yes. Use the standard view-only share link from Figma instead of a prototype link. Visitors will see the design file in a view-only mode where they can zoom and inspect but not click through interactive flows. This works well for brand guidelines, component libraries, and completed mockups.
Will the embed update automatically if I edit the Figma file?
Yes. Because the embed links to the live Figma file, any changes you make and publish in Figma are reflected in the UniLink embed immediately. You do not need to update the UniLink block — the iframe always loads the current state of the shared file.
Is the Embed block available on the free UniLink plan?
Yes. The Embed block that supports Figma is available on all UniLink plans. You can embed Figma files on the free plan without restrictions tied to your UniLink subscription. Figma's own plan limits (like access to certain prototype features) still apply on the Figma side.
How do I make the embedded prototype look good on mobile?
For mobile prototypes, set the block height to match the prototype's screen height (typically 700–800px) and enable full-width layout. For desktop prototypes, add a note or button below the embed that opens the prototype in a new tab, since desktop layouts often do not translate well to small screens in an iframe.
- Enable "Allow embedding" in Figma's Share panel before pasting the URL — the embed will not work without it.
- Use the /proto/ prototype link for interactive designs; use the standard share link for view-only file embeds.
- Set block height to 700–800px for mobile prototypes and 600–750px for desktop prototypes to avoid cropping.
- Add a one-line interaction hint above the embed so visitors know the prototype is clickable and how to navigate it.
- Changes made and published in Figma update the UniLink embed automatically — no need to re-embed.
Turn your UniLink page into a live design portfolio that clients can interact with. Open your dashboard, add an Embed block, and paste your Figma prototype link. Not on UniLink yet? Create your free page in minutes.
Create Your Free Link-in-Bio Page
Join thousands of creators using UniLink. 40+ blocks, analytics, e-commerce, and AI tools — all free.
Get Started Free