Marketing sites rarely get the design-system treatment
Design systems have become standard practice for product teams, but the same discipline rarely extends to marketing and web design. When Andrea Helmbolt joined Figma's web marketing team, she found the company's own marketing site reflected that gap: designers and developers were inventing bespoke solutions for each page instead of working from a shared foundation. Many of those solutions were near-duplicates of patterns that already existed elsewhere on the site, just not exact copies. The result was a site that was hard to maintain, slow to update, and inconsistent for visitors. It was time to apply the same systems thinking to figma.com that the company advocates for its users.
Auditing before building
The first move was an inventory of what already existed. The team compiled fonts, sizes, colors, column widths, layouts, and other recurring elements into a single Figma file. That made overlaps easy to spot: repeated patterns that simply needed to be unified, alongside outliers that had been used once and didn't belong in a style guide at all. Large repeated elements were broken down to an atomic level so that anyone using the system could reassemble atoms and molecules into larger organisms tailored to a page's content. The goal was flexible building blocks that could combine in any way rather than monolithic templates.
For elements that were similar but not identical, the team agreed on a single style. Instead of 12 different heading sizes, they established an H1–H3 scale plus body and technical copy styles. Long-form content on the blog received its own set of text styles, including pull quotes and block quotes. Once the existing visual language was interpreted and refined, organizing those components into a shared library was straightforward—and it meant someone with little design experience or familiarity with Figma's brand could assemble something cohesive.
A CMS-backed component library
Over the course of a month, the small team built a robust style guide and component library that now lives in the company's CMS, Contentful. Typography, sizes, padding, line heights, colors, and grid are consistent throughout. Designers creating a new page pull from pre-built blocks rather than starting from scratch. The team also began "componentizing" commonly paired elements and fully assembled page sections, which they call FLEGOs (Figma + LEGO), into reusable organisms.
This setup has accelerated shipping considerably. Most of Figma's core marketing site is now built with the framework, and new pages can go from concept to launch in a day without writing any new code. In one example, a product marketer with an idea for a "What's New" page and Helmbolt sketched a quick wireframe from FLEGOs, collaborated on copy directly in the Figma file, and built the page in Contentful—all within 48 hours.
The CMS also makes sweeping changes painless. When a universal change is needed to an atom or molecule, it can be done once in Contentful rather than having a developer hunt through dozens of pages. That proved valuable when Figma refreshed its brand and updated the site's typeface to Whyte. Because all the site's building blocks were laid out in one file, the team could update typography, see the impact immediately, and iterate until they had a type system that worked across the entire site.
Knowing when to stay in—or step out of—the system
The system is still evolving, and the team expects that to remain true as new needs arise. Accessibility work is a current priority. There are also deliberate exceptions. The homepage, for instance, uses a larger centered headline with animation to capture attention right away—a section style that appears nowhere else on the site and therefore isn't part of the design system. Whenever the team strays, they document why and assess whether they're likely to make the same decision again. If so, that's a strong argument for adding it to the system.
For teams looking to start their own system, Figma has published the files that govern its marketing site, including the FLEGOs library and a blank style guide starter template.
