Figma to Code.
Responsabilities
Design, Product & Documentation
/ Context
As a product designer and UI designer, I contributed to building a Figma to Code ecosystem that would improve significantly the hand-off process of one of the largest entertainment companies. This ecosystem aimed to streamline an automated process for exporting Figma designs into functional server driven UI.
/ The Problem
The
entertainment
company
faced
a
major
challenge:
streamlining
the
design-to-market
process.
The
industry
demands
rapid
iteration
and
continuous
feature
updates,
but
the
existing
workflow
was
too
slow.
Each
requirement
had
to
pass
through
multiple
stages:
analysis,
research,
design,
development,
QA,
and
deployment,
leading
to
long
turnaround
times
and
bottlenecks.
Our
task
was
to
find
a
solution
that
would
accelerate
this
process
without
compromising
quality.
Figma Plugin.
/ Design Export
As
part
of
this
initiative,
I
designed
a
Figma
plugin
that
streamlines
the
handoff
between
designers
and
developers.
The
plugin
enables
users
to
export
well-structured
Figma
screens
or
components
with
a
single
click,
generating
code
that
serves
as
the
foundation
for
further
transformation
into
SDUI.
/ Design Validation
To
ensure
designs
were
properly
structured
for
export,
a
validation
system
was
developed
within
the
Figma
plugin.
This
validator
checked
designs
against
predefined
rules,
ensuring
compatibility
with
the
tool
by
enforcing
proper
layouts,
design
system
compliance,
and
best
practices.
If
issues
were
detected,
the
plugin
provided
detailed
feedback
with
step-by-step
instructions
for
resolving
them
directly
in
Figma.
Documentation
was
also
provided
to
further
streamline
the
process,
outlining
common
errors
and
their
fixes.
Post Processing.
/ Challenge
As
the
plugin
became
adopted
into
the
workflows
of
designers
and
developers,
a
major
pain
point
emerged:
making
edits
after
export
was
frustrating
and
inefficient.
The
generated
code
structure
was
not
optimized
for
large-scale
adjustments,
making
post-processing
tedious
and
demotivating
for
developers.
/ Post-processing
To
address
this
pain
point,
I
designed
a
proof
of
concept
for
a
low-code
platform
that
would
streamline
post-processing.
This
platform
provided
an
intuitive
interface
for
refining
the
exported
code,
enabling
tasks
such
as
action
definition,
structural
edits,
and
bug
fixing.
/ Takeaways
This
project
was
a
pivotal
learning
experience,
deepening
my
understanding
of
designing
for
highly
technical
users.
Tackling
complex
workflows
required
not
only
thoughtful
UX
solutions
but
also
close
collaboration
with
cross-functional
teams.
Through
strategic
communication
and
problem-solving,
we
built
an
ecosystem
that
significantly
improved
efficiency
and
streamlined
development
processes,
proving
that
even
the
most
intricate
challenges
can
be
simplified
with
the
right
approach.
Unity Design System
White label design system for a benefits administration company.
Ticketing Ecosystem
Product Ideation & UI Design for a ticketing ecosystem.
Vintage Marketplace
Branding, Product Ideation & UI Design for a second-hand clothing marketplace.
Other Stuff
Personal projects covering illustration, code experiments and more.