Figma to Live: The Deployment Workflow

1. What We Are Learning

Today's learning outcome is to describe the complete workflow: from a Figma update to a live deployment.

This is the capstone lesson where we'll bring every skill you've learned together into a single, repeatable process. We will walk through the entire iteration loop, the same one that professional developers use every day:

1. Update a design in Figma.
2. Regenerate code using an AI tool.
3. Integrate and verify the new code on your local machine.
4. Commit and push the changes to GitHub.
5. Confirm the automated deployment and test the live site.

2. Why This Matters

This workflow is the ultimate goal you set out to achieve. It closes the infamous gap between design and development. For you, it means you're no longer just creating static design files that you hand off into a black box. Instead, you are now in the driver's seat, able to push your own design changes from your canvas all the way to a live, production website.

This process gives you speed, autonomy, and a powerful new way to bring your ideas to life. It's a workflow that many in the industry are now adopting, as it keeps the design tool (Figma) as the source of truth while leveraging AI for the translation work.

This article from UX Tools perfectly captures the philosophy behind this modern workflow.

3. Step-by-Step Instructions

Let's imagine that during the "Phone Test Ritual" from our last lesson, you noticed that the main headline on your landing page feels too large on a small mobile screen. Let's fix it by going through the full loop.

Step 1: Make the Design Update in Figma

Before touching any code, you return to the source of truth: your Figma file.

1. Open your project in Figma.
2. Select the text layer for your main headline.
3. Instead of just changing the font size directly, you should ideally be updating a text style or a component property. This ensures consistency and is a best practice that helps the AI understand your design system's logic.
4. For our example, let's say you reduce the font size of the mobile headline style from 48px to 36px.

Making structured, intentional changes in Figma, as you've learned, is key to getting clean, predictable code from the AI.

Step 2: Regenerate the Code with AI

Now we use AI as our translator. You'll take your updated design and ask the AI to generate the new CSS for it.

The exact method depends on the tool (Copilot, v0, etc.), but the principle is the same. You provide the updated Figma frame/link and prompt the AI to regenerate the code, or in more advanced tools, to sync the changes. This video shows a great example of an AI tool detecting and applying design changes.

For your project, your process would be:

1. Open VS Code and your project files.
2. Activate your AI tool (e.g., GitHub Copilot Chat).
3. Provide the Figma link and a prompt like: "Here is my updated Figma design. Please generate the CSS needed to update the headline for the mobile view."
4. The AI will provide a new CSS snippet.

Step 3: Integrate and Verify Locally

The AI has given you a block of code. Don't trust it blindly. You need to integrate it into your project and test it on your local machine first.

1. Copy the new CSS rule from the AI.
2. Paste it into your styles/style.css file, replacing the old headline style.
3. Check your Live Server. VS Code should automatically refresh the browser tab running your local site.
4. Use Chrome's Device Toolbar (as you learned in the last lesson) to switch to a mobile view and confirm that the headline font size has indeed been corrected.

This is your private, local feedback loop. It's fast, free, and ensures you don't push broken code to the live site.

Step 4: Commit and Push the Changes with Git

Once you've confirmed the fix works locally, it's time to save a permanent snapshot of your work and share it with the world.

1. Open the Source Control panel in VS Code (the icon with three connected dots).
2. You will see your changed file, styles/style.css.
3. Stage the change by clicking the + icon next to the file name.
4. Write a clear, concise commit message in the text box at the top. A good message explains what and why. For example: Fix: Reduce headline font size on mobile.
5. Click the checkmark to Commit, and then click the button to Push (or "Sync Changes") your commit to GitHub.

This push is the trigger for the final, most satisfying step.

Step 5: Automatic Deployment and Final QA

The moment you pushed your code to GitHub, you set off a chain reaction.

1. Open your Vercel dashboard. You should see a new deployment for your project is "Building."
2. After a minute or so, the status will change to "Ready."
3. Your site is now live with the changes!
4. Perform one final "Phone Test Ritual." Open the live URL on your actual phone to confirm that the headline looks correct in the real world.

And that's it! You've successfully completed the full design-to-deployment loop.

4. What Could Go Wrong

• The AI-generated code doesn't work or introduces a new bug.
  • Reason: AI isn't perfect. It might misunderstand the context or generate faulty code. This is normal and expected.
  • Fix: Don't panic. You can either:
    1. Undo the changes in VS Code and try again with a more specific prompt.
    2. If it's a very small error (e.g., a wrong color value), try making the manual edit yourself. Your "code literacy" will grow with each small fix.
• The Vercel deployment fails.
  • Reason: For a simple static site, this is rare. It usually happens if you accidentally delete a file, misname something, or create a syntax error that the build process can't handle.
  • Fix: Vercel provides error logs. The next step in your learning journey would be to learn how to read these logs. Often, they give you a clear clue about what went wrong (e.g., "file not found: /images/logo.png"). You can even paste these errors into an AI chat to ask for an explanation.

5. Mini Exercise

Time to run the loop yourself.

1. Open your project's Figma file.
2. Make one small but obvious visual change. For example, change the background color of a section, change the text of a button, or add a border to your images.
3. Follow the 5-step workflow you just learned:
   • Use your AI tool to generate the updated code.
   • Integrate the code and verify it locally with Live Server.
   • Commit the change with a clear message and push it to GitHub.
   • Watch the deployment happen on Vercel.
   • Verify the final change on the live URL with your phone.

Completing this exercise means you have successfully mastered the core objective of this entire course.

6. Checklist Before Moving Ahead

• I can describe the 5 phases of the iteration workflow: Design → AI Gen → Local Verify → Git Push → Live Deploy.
• I understand that I should always verify AI-generated code locally before committing.
• I know that pushing to GitHub is the trigger for my Vercel deployment.
• I have successfully completed the mini-exercise and pushed a live update to my site.

Conclusion: Your Journey as a Builder

Congratulations! You have officially completed the journey from being a designer with zero coding experience to a builder capable of taking an idea from a Figma canvas to a live, global website.

The workflow you learned in this lesson is not just a training exercise; it's a powerful, modern, and highly effective way to build for the web. You've built a solid foundation, and this is just the beginning.

What's next?

• Practice: The best way to get better is to keep building. Start a new, slightly more ambitious landing page project from scratch.
• Explore: Experiment with more complex AI prompts. Try asking the AI to add animations, create different layouts, or explain the code it wrote.
• Deepen Your Knowledge: You can now explore more advanced topics like using Figma's Code Connect feature to map your designs to a component library, or learning to debug failed deployments by reading Vercel's logs.

You have a powerful new skill set. The web is your canvas. Go build something amazing.