01.0

FIGMA / OVERVIEW

01.0

FIGMA / OVERVIEW

Figma

Figma

Figma

Designing the foundation for complexity and scalability that's missing from today's low-code digital product builders.

Type

Passion Project

Industry

Creative Tooling

Timeline

20 Weeks

Role

Research & Design

02.0

THE OPPORTUNITY

02.0

THE OPPORTUNITY

Today's innovators are racing to change product development,

02.1

THE OPPORTUNITY / COMP. RECON

02.1

THE OPPORTUNITY / COMP. RECON

Cursor

Lovable

Framer

Coding with natural language.

Cursor is an IDE (built on VS Code) overhauled with automation to streamline and make coding more accessible.

Pros / Cons

Deeply integrated in dev workflows (as an IDE)

Fully supports complexity, embracing the power of code

Requires code fluency to work well

No systems-level design thinking

Not visual, making it less accessible for non-devs

Designing with natural language.

Lovable is an AI UI builder that turns plain text prompts into screens.

Pros

Great for building alignment with PMs

Fast and simple exploration

Cons

No real logic or behavior

Poor scalability, falls apart under complexity

Generated designs don't become systems

Developing without code.

Framer gives designers the power to build polished, responsive sites without writing code.

Pros

Visual development is intuitive and accessible

Component based

Cons

No deep logic or branching flows

Lacks system perspective (still screen-by-screen)

Not built for complexity (no conditions, states, or BE)

Cursor

Lovable

Framer

Coding with natural language.

Cursor is an IDE (built on VS Code) overhauled with automation to streamline and make coding more accessible.

Pros / Cons

Deeply integrated in dev workflows (as an IDE)

Fully supports complexity, embracing the power of code

Requires code fluency to work well

No systems-level design thinking

Not visual, making it less accessible for non-devs

Designing with natural language.

Lovable is an AI UI builder that turns plain text prompts into screens.

Pros

Great for building alignment with PMs

Fast and simple exploration

Cons

No real logic or behavior

Poor scalability, falls apart under complexity

Generated designs don't become systems

Developing without code.

Framer gives designers the power to build polished, responsive sites without writing code.

Pros

Visual development is intuitive and accessible

Component based

Cons

No deep logic or branching flows

Lacks system perspective (still screen-by-screen)

Not built for complexity (no conditions, states, or BE)

02.2

THE OPPORTUNITY / OPP. STATEMENT

02.2

THE OPPORTUNITY / OPP. STATEMENT

but they all struggle with complexity and scalability.

I'll also be addressing collaboration, documentation, and version history.

Users are building from inside the product, but complex systems require perspective.

Inside a product

>

High-level view

>

Architecting a system

|

03.0

THE SOLUTION

03.0

THE SOLUTION

So how can Figma meet the need?

03.1

SOLUTION DEMO / PROCESS

03.1

SOLUTION DEMO / PROCESS

Primary Research

Critique

Usability Testing

How do professional designers work, and what's inhibiting them today?

I used surveys and interviews with professional product designers from industry leading orgs to learn…

Take-aways

Documentation is done differently everywhere

Onboarding and familiarizing with a new team's work is difficult

Current ai product builders are surface level

AI is the future of front-end engineering

Building basic knowledge of back end systems is invaluable to product feasibility

Designing for async critique.

I built slide decks at various stages in the project to send out to a handful of working product designers, allowing them to leave their feedback as comments at their own pace and convenience.

Testing with student designers.

I (painstakingly) prototyped Figma inside Figma to observe how designers at different experience levels navigated my features.

Take-aways

High-complexity flows are difficult to test without an excessively comprehensive prototype (in Figma)

Github vocabulary (pull, push, repo, etc.) were unintuitive

Testers found the proposed file-structure too rigid

Iteration

I find pushing designs through thorough iteration within a feedback loop works best for me.

Primary Research

Critique

Usability Testing

How do professional designers work, and what's inhibiting them today?

I used surveys and interviews with professional product designers from industry leading orgs to learn…

Take-aways

Documentation is done differently everywhere

Onboarding and familiarizing with a new team's work is difficult

Current ai product builders are surface level

AI is the future of front-end engineering

Building basic knowledge of back end systems is invaluable to product feasibility

Designing for async critique.

I built slide decks at various stages in the project to send out to a handful of working product designers, allowing them to leave their feedback as comments at their own pace and convenience.

Testing with student designers.

I (painstakingly) prototyped Figma inside Figma to observe how designers at different experience levels navigated my features.

Take-aways

High-complexity flows are difficult to test without an excessively comprehensive prototype (in Figma)

Github vocabulary (pull, push, repo, etc.) were unintuitive

Testers found the proposed file-structure too rigid

Iteration

I find pushing designs through thorough iteration within a feedback loop works best for me.

03.2

SOLUTION DEMO / PLANNING A PRODUCT

03.2

SOLUTION DEMO / PLANNING A PRODUCT

To show you, let's build an app, starting with planning.

Let’s make a tik-tok-style social media app that helps inform high-school student career choices.

03.3

SOLUTION DEMO / DEFINING A FLOW

03.3

SOLUTION DEMO / DEFINING A FLOW

Now let's focus on a single flow.

Animation, illustration, a personal design system, pro-bono local-business work, I almost always have something going on, don't hesitate to ask me about it.

03.3

SOLUTION DEMO / DEFINING A FLOW

03.3

SOLUTION DEMO / DEFINING A FLOW

With planning done, we can design our screens (I'll do this part for you).

Animation, illustration, a personal design system, pro-bono local-business work, I almost always have something going on, don't hesitate to ask me about it.

You can find some of this in my

04.0

MORE FEATURES

04.0

MORE FEATURES

You've got the big-picture, now what else?

Let's address the "other" problems.

04.1

MORE FEATURES

04.1

MORE FEATURES

Empowering complex, centralized product work with supportive features.

(extra features)

Collaboration

Documentation

Version history

05.0

REFLECTION

05.0

REFLECTION

The future of product work blurs the line between roles.

The tools that come out on top will blur these lines slowly, and with respect to each discipline, while making everything a bit more accessible to everyone.

06.0

OTHER WORK

06.0

OTHER WORK