Your AI powered learning assistant

Deep Dive: How Figma redesigned its Community page (project walkthrough)

Trailer

00:00:00

Figma’s community product was reimagined to accelerate user acquisition and growth. A new design was validated through an AV test, which notably increased signups and met business objectives. The redesign empowered resource creators by enabling them to build customized landing pages for their files. This innovation particularly appealed to library creators, offering a vibrant, personalized color grid aesthetic for their presentations.

Project overview

00:00:43

Sigma Community is reimagined as a dynamic hub where creators publish files and design libraries, enabling seamless integration with users' Figma projects. The redesign focuses on individual resource pages which capture over 90% of traffic, turning them into a powerful user acquisition channel. By ensuring that resources like icon packs and material design libraries are easily discoverable, the initiative leverages search engine visibility to drive growth and engagement.

Old designs

00:02:38

A redesigned interface transforms community files into engaging, easy-to-navigate resources. The published file displays an index at the top with a canvas-like view that allows users to zoom in and select different pages. Detailed meta-information and creator descriptions enhance the user experience. Non-logged-in users are presented with a sign-up model to gain full access.

New designs

00:03:32

A new design opens files directly in the Sigma editor upon logging in, showcasing a shift in user engagement. The display now features a curated carousel that resource creators can customize, while essential details are deliberately embedded lower on the page. This layout change improves transparency by preventing the use of flashy, unrelated images that could mislead users.

Project outcome

00:04:30

A/B testing confirmed that the updated design significantly increased signups, boosting business growth. The new interface also enhanced user engagement by driving more interactions with community resources. The results demonstrate that innovative design changes can deliver measurable benefits, even when users are more comfortable with the traditional approach.

Initial design exploration

00:04:58

A five-month endeavor reimagined a high-traffic resource page to boost conversion by enabling dynamic customization. Resource creators could build personalized landing pages using modular, templated sections, like two-column layouts for design snippets and descriptive texts or grids for icons and color displays. An alternative approach offered a guided, fill-in template inspired by established platforms to ensure a consistent, user-friendly layout while showcasing each design effectively.

Sharing research finding

00:07:34

User research revealed a confusing layout on the resource page, where tiny thumbnails, scroll traps, and unclear interactive elements hindered users from easily evaluating file content. Exploration narrowed the focus to improving the area above the fold by using clearer visual elements such as a file embed, image carousel, or interactive prototype that immediately communicates the resource’s value. The redesign also examined CTA placement and additional support for videos and trusted indicators, aiming to make resource evaluation more intuitive and engaging.

Designing CTA

00:11:39

Iterative CTA Design Balancing Complex Resource Data The system was developed to accommodate a wide range of resource details including file types, prototypes, plugins, ratings, and social proof. It integrated multiple data permutations such as resource-type color mapping, varied title lengths, and monetization details like subscription and purchase values. Every element was carefully considered to fit within a flexible CTA layout that could display usage statistics and secondary actions via icons.

Refocusing on Creator Identity with Streamlined Interactions The design evolved to highlight the creator by featuring the avatar and name prominently, while relegating the resource type to a secondary metadata line. This shift enhanced social engagement by emphasizing known creators over technical details. Simplified secondary interactions were introduced through intuitive icons, supporting clear actions like opening, liking, and saving resources, while balancing previous rating systems with a reinstated like function.

A/B Testing

00:16:28

Community-Driven A/B Testing Validates the Carousel Concept A creative experiment was launched where top resource creators submitted images and videos to serve as a stand-in for a fully developed publishing system. Traffic data from popular files and plugins was analyzed to ensure a statistically significant sample for the test. Manual assembly of presentation pages allowed the team to quickly gauge the impact on user sign-ups while minimizing development resources and time.

Iterative Publishing Flow Refines User Interaction Following successful testing, attention shifted to building a self-service publishing flow that empowers creators to arrange carousel images independently. The design was iterated with careful attention to drag-and-drop interactions and image reordering, ensuring a smooth and intuitive experience. Continuous feedback and internal collaboration led to a streamlined interface that mirrors the promising results of the initial experiment.

Collaborating with engineers

00:22:48

Rapid Design Iteration via Engineer Synergy Modern design demands dynamic collaboration between designers and engineers to expedite product delivery. Designers typically outline the majority of a flow, relying on engineers to address remaining nuances through direct, real-time adjustments. Live previews and quick feedback sessions reduce the need for exhaustive documentation while covering edge cases effectively. This approach ensures that interactions are refined swiftly without getting bogged down by detailed specs.

Perfecting Interactivity Through Real-Time Feedback Interactive elements require attentive fine-tuning in a near-live environment where behavior nuances are tested in real time. Designers iteratively adjust hover zones, scaling, and padding by leveraging beta preview links and immediate communication channels. This hands-on testing enables precise refinements that static prototypes cannot capture. Coordinated adjustments during development culminate in a polished user experience.