№00
At a Glance
This system is internal. There are no screenshots of the file itself and no figures I can share. What follows is how I worked and why.
~100
Unique components
One at a time.
75%
Complete
The remaining 25% is the same process.
1–1.5h
Per component
Across roughly 100 components.
6 months
And ongoing
It would not touch delivery work.
№01
Where it started
I found this while building investor pages. Components in Figma kept promising things the live site could not do.
An internal team had built the system, then moved on. Nobody had maintained it since, so the Figma library and the components actually running on the LPL website had drifted apart.
Figma library
Kept promising things the live site could not do.
Drifted apart
Live AEM site
The components actually running on the LPL website.
The VP of Design already knew. He had no bandwidth and there was no budget line for it, which is the usual reason a design system stops being maintained. I offered to take it on, with one condition I set myself.
The condition
It would not touch delivery work. This only once the week’s commitments were done. That is why it got approved, and it is also why it has taken six months.
Around 100 unique components. One at a time. About 75% done. The clearest sign it is working is the questions that stopped arriving.
№02
What was broken
Hygiene
No variables anywhere.
No auto layout.
Layers unnamed, frames carrying duplicates of themselves.
Atoms like buttons and form fields scattered rather than organized.
No component properties, so changing a title meant going layer by layer instead of typing it into the right pane.
Color and text defined as styles rather than tokens.
Spacing that varied for no reason.
Components nobody had used in years.
Mismatches with production
This was the more expensive half.
Components advertised capabilities AEM could not honor.
Text boxes set to hug, or drawn generously, so everything looked pixel perfect regardless of length, while the real component enforced a limit the file never mentioned.
Constraints undefined, so text and images broke at mobile widths in ways nothing in Figma predicted.
The mismatches produce work that gets approved, gets built, and then does not hold up. These components render on pages that advisors and their clients actually use, so a layout that falls apart at mobile width is not just an internal inconvenience.
№03
One component, start to finish
The media component would be the perfect example, because it is the one that started all of this.
Media type
A media slot that accepted video.
Images only.
Image only, video stripped out.
Aspect ratio
Any aspect ratio you liked, because the frame was set to hug whatever you dropped in.
Fixed aspect ratios.
The accepted aspect ratios sit in the properties pane.
Caption
No note anywhere about limits.
A character ceiling on the caption that the Figma version had no idea about.
The caption limit is a real limit, so text that overruns it overruns in Figma the same way it would on the page.
Tablet & mobile
—
—
Behavior at tablet and mobile is annotated.
Contrast
—
—
The color and text pairings the component allows are listed with the contrast level each one actually hits.
So a designer could build a page with video in it, present it, get it signed off, and only find out at build that none of it was possible. That is not hypothetical. It happened to me in my first weeks on the investor project, with a set of GIFs and a week of the creative team’s time.
What stopped
Nobody promises video anymore. Nobody has to be told no two days after a review.
99 more like that…
№04
How I worked
One component at a time, no audit first.
I had to open every component regardless, so listing them all beforehand would have meant the same pass twice.
For each one
1
The same copy and the same images loaded on both sides.
2
Screenshot the live AEM version.
3
Back in Figma, measure using rulers and fix what differs.
4
Then do the same at tablet and mobile widths.
5
Test every capability the AEM component actually has, note what it does and what it refuses to do, and rebuild those as properties in Figma.
6
Check the color and text combinations the component allows against contrast requirements, since a component that permits a failing pairing will eventually produce one.
7
Annotate how it behaves and where its limits are.
8
Test the rebuilt version. Move to the next one.
1-1.5 hours per component, across roughly 100 components. About 75% done.
On contrast
The file reports that too. The standard is AAA. LPL’s brand brown does not meet it on any surface, and the annotation says so plainly. That way using it is a decision somebody makes on purpose, with the number in front of them, rather than something that happens by accident and gets caught in review. Or does not get caught at all.
LPL brand brown
Below AAA on any surface
How I shipped it
I worked in a branched file and left the live library alone, apart from anything serious enough to fix immediately, and published at the halfway mark once there was enough to be worth adopting. Other designers were using the library throughout, and none of them had to work around me.
№05
What I chose not to fix
An 8 point grid
Dropped
I wanted one, for consistency, for scale, and so developer’s life easy. But nothing in the existing system follows any grid, so adopting one means rebuilding every component in AEM and there was no budget for that. A grid that existed only in Figma would have widened the gap I was there to close, so I dropped it.
The missing capabilities
Stripped out
I could have pushed for AEM to build things like video support the file was already promising. Instead I stripped them out of Figma.
Both follow the same rule.
Where Figma and production disagree, Figma is the one that changes.
№06
What I got wrong
I started with tokens and spent a week on them.
Every color, every possibility, buttons and containers and banners, defined exhaustively, and I was still only halfway through.
The reasoning was that nobody should be able to assemble a wrong combination. I still think that is the right instinct for a system used by people you will never meet. But my VP and lead pointed out that broken components were the larger problem, and that the token layer could grow alongside them instead of blocking them.
They were right about the order, not the goal.
text-fill-primary
I moved to semantic naming, rather than a token defined for every component, and it covered the same ground at a fraction of the time.
What I would do now is treat them as one pass rather than two phases.
№07
Where it stands
The clearest sign it is working is the questions that stopped arriving.
Creative team
Used to ask
what size and aspect ratio an image needed for a given section.
Content team
Used to ask
how long a piece of copy could run and whether it would overflow on mobile.
AEM team
Used to come back after build to say
a component could not support a sand background and would have to go back to white.
The file answers all three now, before anyone has to ask.
The measure I trust most
A second one stopped too, and this is the measure I trust most. Because I know AEM, I used to review my lead’s work for feasibility before it went to the VP. Used to caught things often previously, almost nothing now. The file catches them first, which is where it should have been happening all along.
Who uses it
4 to 5 designers, including the VP of Design and my lead, across the marketing and publishing teams.
What they get out of it
1
Pages get built faster
2
Developer handoff takes significantly less back and forth
3
Consistency holds across components instead of varying by whoever built the page
4
Contrast and accessibility rules built into the components rather than caught in review
5
No late “this component cannot do that” surprises, because the file says so upfront
6
What is in Figma matches what renders on the site, pixel for pixel, at desktop, tablet and mobile
That last one is the part I care most about.
75% done
The remaining 25% is the same process, component by component. There is a documentation page in Figma with a changelog, and every finished component is annotated with its behaviour and its limits, so someone else could pick this up where I left it. They would need to learn AEM first. That is the actual prerequisite for this work.
The library was the deliverable. What changed beyond it is confidence.
Designers no longer hedge about whether what they see in Figma will survive implementation. The content team knows what will fit before writing it. The AEM team stops finding problems after the build. The file became something the whole team can work from, which it had not been for a long time.