Overview Problem The Work Process Decisions Impact
Noah Koshy
Designer · Sydney
Case № 02 Industry

Centelon Solutions

I single-handedly owned the end-to-end creation of a zero-code platform (ZCP) solution, which facilitated two-way conversion between Figma designs and Angular code, to accelerate the iterative process between design and development. It also provided a solution for designers to handle early-stage development; and allowed developers to handle early-stage and low- to mid-fidelity design.

RoleUX/UI Designer
TeamSolo
Timeline
I ownedIdeation, UI/UX Design, Development, Testing & Delivery
Note to self
A demo of the proof of concept of the solution built.
Play the video to hide the "Note to Self" sticky.
The sixty-second version
Problem
There was no existing solution to support the iterative handover between designers and developers, and no accelerator to support project delivery in place.
What I did
I developed a working proof of concept of a solution, presenting it to senior internal management and stakeholders in the business.
Result
I built this PoC single-handedly and remotely in under 4 months, checking in and conducting verifications with my manager throughout.
Single-handedly completed
I handled the full end-to-end process entirely by myself.
Built and demonstrated a PoC
Conducted regular check-ins to confirm successful progress.
<4 months
Achieved a successful result within a short timeframe.
↓ More details below if you want the reasoning.
§ 01

The Problem

There was no direct way to move work between Figma designs and Angular code, in either direction.
"A zero-code platform that functions as an accelerator would allow project iteration and delivery to be sped up significantly."
What I couldn't change
01 Completing the PoC and delivering it within the August – November 2025 timeframe.
02 Angular code was new to me, and the finalised solution had to be implemented through it.
03 Each stage needed approval before moving on to the next, from the plan to the low- and mid-fidelity designs.
§ 02

The Work

The proof-of-concept running end to end, from Figma to Angular and back again. The images are taken from the demo video at the top of the page.
Step 4 of the converter, mapping each Figma screen to an Angular file path, with the option to create a new component or update an existing one.
Plate 01. Mapping each Figma screen to an Angular file, and choosing whether it creates a new component or updates an existing one.
Step 7, the side-by-side preview: each Figma frame beside the Angular path it will create, and the template, styles and logic it will change.
Plate 02. The side-by-side preview, showing every mapped screen next to the Angular path it will create, before any code is generated.
Angular → Figma Export: a list of Angular components, with the selected component's details, the design tokens it uses, and the bundle to import into Figma.
Plate 03. The reverse path, exporting Angular components back into Figma as a bundle, so the design file can be kept in line with the code.
§ 03

How I got there

From the first plan to the working proof-of-concept, with each stage approved before moving on. The images are taken from the demo video at the top of the page.
Low-fidelity
Designed a low-fidelity mockup of the intended user flow on both conversion paths.
Additional images cannot be included.
Dead end
Prompting Replit directly, before all of the requirements had been gathered. Then pivoted to using ChatGPT to help to plan the approach, and using Replit to help implement it.
Mid-fidelity
After the low-fidelity mockup was approved, I developed it into a mid-fidelity version.
Additional images cannot be included.
Commit Plan Summary: 3 new components to create and 0 to update, listing each TypeScript, HTML and SCSS file before it is committed and pushed.
Fig. 01 — reviewing the commit plan before pushing.
The Angular → Figma Importer plugin in the ZCP Figma file, importing an exported bundle back onto the canvas.
Fig. 02 — importing the components back into Figma.
Kept
Two-way conversion. Every version had to work from Figma to Angular, and from Angular back into Figma.
…then it worked in both directions.
Keep scrolling — the wall moves sideways
§ 04 — Decisions & trade-offs

Determining what was needed for building a PoC and what would be left for a finalised build was a key consideration.

Two decisions, from planning the build through to how the conversion works.
01
/ 02
Decision 01

Getting each stage approved

Chose
Had the plan, the low-fidelity design and the mid-fidelity design each approved before moving on, and kept my manager informed of all plans and decisions.
Gave up
Some speed, as each stage waited on approval.
Why
It kept the output in line with the expectations of the project goals and intended functionalities, leading to a working proof-of-concept that I demonstrated to more senior executives.
Decision 02

Using Replit entirely for building

Chose
Used ChatGPT to identify and gather all of the requirements first, then as a prompt engineer to have Replit build the proof-of-concept.
Gave up
Time up front, spent gathering requirements before anything was built.
Why
Segmenting the workload across multiple tools used for specific purposes, supported better management of planning, context windows and task execution.
§ 05

Impact & what I'd change

A working proof-of-concept, demonstrated to senior executives.
Looking back

I successfully built a working proof-of-concept, demonstrating it to my manager and more senior executives, and received a positive LinkedIn recommendation from my manager as a result. With more time, I would have tested it throughout the process, with the designers and developers who would be using it.

— Noah
Consulting · UX/UI Designer Zero-Code Platform ChatGPT, Replit, Figma
Next case
Case № 03 →
Apple Foundation Program - Student
All projects →
© Noah Koshy, 2022-2026.
Centelon · Scrapbook-styled Portfolio