✳flâneur — a map of the web's best reading

Updating Our Web System For A New Era | Figma Blog

figma.com · 619 words · saved by 1 readers

Want to see how we used Figma’s latest features to audit and refresh our web system? Here’s a behind-the-scenes look at how we streamlined our components, improved our workflows, and built for the future. In our series exploring Figma’s brand refresh, we’ve dug into our new visual language and Figma Sans, our new custom typeface. Today, we’re pulling back the curtain on how we’ve used Figma’s latest features to revamp our web design system. Back in 2020, we shared how we built our design system for our website, figma.com. That site had one job: to introduce a new design tool to the world. Fast forward to 2024, and things look pretty different. Figma has gone from a design tool to a platform for all kinds of product teams, and our web presence needed to keep up. As a designer on the Brand Studio team, I saw firsthand how our previous system was starting to show its limitations. We had many components in our library that were only slightly different from one another, making it challengin

javascript:throw new Error('React has blocked a javascript: URL as a security precaution.') abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking

Explore this link on the map →

related reading