Login

Build and Embed an Interactive Process Within SharePoint

    Ever wished your SharePoint intranet could show off more than just static content? In this guide, I’ll show you how to create an interactive process map in Figma, complete with animations, clickable elements, and resource buttons—and embed it seamlessly into your SharePoint site.

    Best part? No code needed, just a little design magic.

    🎯 What You’ll Learn

    • How to build an animated, clickable process flow in Figma

    • How to create reusable buttons with hover states and links

    • How to embed your Figma prototype into SharePoint with updated embed settings

    🧱 Step 1: Create the Process Map in Figma

    Start by creating a frame in Figma (recommended size: 1200x675). Think of it like a PowerPoint slide.

    Build Your Process Flow:

    • Use circles for process steps

    • Connect them with dashed arrows

    • Add labels and icons beneath each step

    🔁 Want a return loop? Use the pen tool to create curved lines, then adjust stroke styles and arrowheads.

    Use consistent spacing and group icons + circles together for easy movement.

    🧭 Step 2: Create Detail Slides for Each Step

    Each process step (e.g., Research, Ideation) gets its own frame. Copy the main frame, then:

    • Keep the main icon in the corner

    • Add a big title and description

    • Insert resource buttons (linked docs, templates, etc.)

    To animate between slides, use Figma’s Smart Animate:

    1. Create a rectangle background shape for each slide

    2. Copy and rotate it onto the main frame (make it tiny and hidden)

    3. Set transitions between frames to “Smart Animate”

    🎉 Now when a user clicks a step, the shape animates into place like magic.

    🔘 Step 3: Build Reusable Resource Buttons

    Design a button:

    • White fill with colored border

    • Icon + title (e.g., “Stakeholder Map”)

    Then create a Figma component and add variants:

    • Default state

    • Hover state (colors inverted)

    💡 Add multiple color variants to match different slides (e.g., purple, orange). Use the Component Properties panel to manage states and color options.

    Make the buttons interactive:

    • On hover → change to hover state

    • On click → open external link (e.g., SharePoint doc, template)

    🔄 Step 4: Add Navigation Elements

    Add clickable “X” buttons to close detail views and return to the main process map. Use Smart Animate again for a seamless transition.

    You can also add back buttons or callouts to improve the experience.

    🌐 Step 5: Embed the Figma Prototype in SharePoint

    Important: Use the Right Embed Code!

    Figma recently changed how embed codes work.

    DO NOT use the embed from the regular Share modal. Instead:

    1. Click Play on your prototype

    2. Click Share Prototype

    3. Copy the longer embed code

    Add It to SharePoint:

    1. Go to Site Settings > HTML Field Security

    2. Add figma.com to allowed domains

    3. Edit your SharePoint page, insert the Embed web part

    4. Paste the embed code

    5. At the end of the src= URL, add &hide-ui=1

    6. Set border to 0 for a clean look

    Done! Your interactive experience is now live.

    ✨ Final Tips

    • Set backgrounds to white in Figma for seamless embedding

    • Use Figma’s prototype preview to test all interactions before embedding

    • Design with mobile in mind (consider a landscape layout that scales well)

    ✅ Use Cases

    This method works great for:

    • UX Process Maps

    • Training journeys

    • Onboarding experiences

    • Campaign or initiative landing pages

    If you can design it in Figma, you can embed it in SharePoint.

    🎥 Watch the Full Build Walkthrough

    See the full process in action—animations, embed tricks, and UI tips to make your SharePoint site shine.