Portfolio Case Study
Building My Own App with AI
Learning how to turn my Figma designs into real, working products by using AI as a development guide throughout the process.
Core Principle
AI helps guide the process, while I stay responsible for the product direction, design decisions, and final experience.
Section 2
From Design to Working Product
My goal is to better understand what happens after a design leaves Figma and how design, code, logic, testing, and release work together.
01
Product Planning
Define the problem, users, core features, and minimum product scope.
02
AI as Project Manager
Use AI to break the project into steps and guide me on what to work on next.
03
Figma to Development
Connect Figma MCP with Claude or ChatGPT so AI can understand the design structure.
04
AI-Assisted Coding
Use AI to help translate UI designs into front-end code inside VS Code.
05
App Logic
Learn how navigation, states, data, APIs, and interactions connect with the UI.
06
Testing & Debugging
Use AI to help understand errors, troubleshoot issues, and improve implementation.
07
Design QA
Compare the coded app with the original Figma design and refine visual details.
08
App Store Release
Learn how to prepare, test, and eventually publish an app to the Apple App Store.
Section 3
From Figma to Functional App
A clear 10-step workflow showing how AI supports each stage of the product journey.
01
Define the App Idea
I start by defining the problem, target users, core features, and the minimum version of the product I want to build.
PRODUCT BRIEF
Problem
Users
Core Features
MVP
02
AI AS PROJECT GUIDE
Plan
→
Design
→
Build
→
Test
→
Release
What should I work on next?
Define the minimum scope, then map the core user flow. You decide the priorities.
AI as Project Guide
I use AI like a project manager to break the project into manageable steps, set priorities, and guide me on what I should do next.
03
Design in Figma
I create the user flow, screens, components, and interaction direction in Figma before moving into development.
Wireframe
Components
Button
Card
Final UI
04
DESIGN CONTEXT CONNECTION
Figma
→
MCP
→
Claude / ChatGPT
Screens · Components · UI details
Connect Figma MCP
I connect Figma MCP with tools such as Claude or ChatGPT so AI can understand my design structure and UI details more accurately.
05
Translate Design into Code
I use AI to help translate my Figma designs into front-end code and guide the implementation inside VS Code.
Figma Screen
→
AI Assistance
→
VS Code
→
Working UI
VS Code / App.tsx
01
02
03
04
Working UI
06
UI CONNECTED TO APP LOGIC
UI screen
→
Navigation
States
Data
APIs
User interactions
Business logic
Build App Logic
I learn how the interface connects with Navigation, States, Data, APIs, User interactions, Business logic.
07
Test & Debug
I test the working app, identify problems, and use AI to help explain errors and suggest possible fixes.
TESTING & DEBUGGING LOOP
Test
→
Find Issue
→
Ask AI
→
Fix
→
Test Again
↶ Repeat until the experience works as intended
08
Figma Design
↔
Working App
↳ Adjust spacing & typography
Components · Interaction states · Responsive behavior · Visual hierarchy
Compare Design vs Build
I compare the coded product with my original Figma design and refine Spacing, Typography, Components, Interaction states, Responsive behavior, Visual hierarchy.
09
Prepare for Release
I’m learning how to prepare the app for production, including App settings, Icons and assets, Testing, Build configuration, App Store requirements.
RELEASE PREPARATION CHECKLIST
□
App settings
□
Icons and assets
□
Testing
□
Build configuration
□
App Store requirements
10
PUBLISH, LEARN & IMPROVE
Build
→
Test
→
App Store
→
Learn
→
Improve
The goal: learn the complete release process and iterate based on real usage.
Publish & Iterate
The final goal is to understand the complete process of publishing an app to the Apple App Store and improving it based on real usage.
Section 4
AI as My Development Guide
Eight ways AI supports the process without replacing my role as the product designer.
01
Project Planning
Break complex development work into smaller steps.
Breakdown
02
Technical Explanation
Explain coding concepts in a way that is easier for a designer to understand.
Explain
03
Code Assistance
Generate, review, and explain front-end code.
Code
04
Debugging
Help identify errors and suggest possible solutions.
Debug
05
Figma Interpretation
Understand screens and components through Figma MCP.
MCP
06
Implementation Guidance
Suggest what to build next and how different pieces connect.
Guide
07
Design-to-Code Comparison
Help identify differences between the intended design and implementation.
Compare
08
Release Guidance
Explain the steps involved in preparing an app for publishing.
Release
Section 5
AI vs My Responsibility
A clear division of labor: AI supports the technical execution while I maintain creative and strategic ownership.
AI Supports
Breaking projects into steps
Explaining technical concepts
Generating code suggestions
Reviewing code
Troubleshooting errors
Reading Figma through MCP
Suggesting implementation approaches
Guiding the release process
I Decide
Product direction
User needs
Feature priorities
UX flow
UI design
Design system
Product quality
Final implementation choices
Final release decisions
Section 6
Understanding What Happens After Figma
01
Product Idea
→
02
UX/UI Design
→
03
Code
→
04
App Logic
→
05
Testing
→
06
Release
→
07
Iteration
By building my own app, I’m learning how design decisions affect development and how development constraints can influence better product design.
Section 7
Final Takeaway
Design → Build → Test → Learn → Improve
My goal is not simply to generate an app with AI. It is to understand how the products I design actually work, so I can make better product decisions as a designer.
AI =
Development Guide
Designer =
Product Direction & Final Decisions
Let’s Create Impact Together
Have something in mind? Feel free to reach out.
Let’s connect, exchange ideas, and create something impactful together.
Project
© Bhaswara Maralaut 2026. All rights reserved.
Created by Bhaswara Maralaut