Figma PRD

Explore

Figma PRD

Figma PRD

Figma Toolbox

Figma should build a feature in the design editor that allows users to browse and drop Community assets into their current file.

Frank Huang

Project:

IPS 2023 Capstone

⁠

EDIT INFO

⁠

Team:

@Ivey Product Society

⁠

Contributors:

⁠

TL;DR:

Enable users to browse + add Community assets without leaving their current design file.

⁠

Status:

@Planning

⁠

Shipping:

May 7, 2023

⁠

Product Demo (PDF)

⁠

Product Review Slides

⁠

Research Artifacts

⁠

Problem Alignment

How might we enhance the search and discover experiences of Figma's Community product?

The Problem

⁠

Figma Community⁠

, a feature

introduced to Figma in late 2019⁠

, enables designers to share files, templates, and assets with the platform's extensive user base. It reflects the core job of conceptualizing creative projects (Appendix A) by enabling users to peruse a vast library of templates to inspire their work.

However, the current process for sourcing files presents key areas of friction for Figma's core users. These designers often have high expectations of their tools' usability, efficiency, and holistic experience. Instead, Figma has opted to introduce more

social features⁠

to its Community product (comments, follows, profiles), failing to produce adequate engagement/evangelism from this segment (Appendix B).

Current Experience

Firstly, to select a template from Figma Community, the user must exit their current design file, thereby losing creative context on their work.

Next, the user navigates to the general Figma Community landing page, facing an extensive array of files, plugins, and widgets stacked alongside filters, tags, and categories.

The presentation of this information may sometimes be confusing (e.g., having a "Chess Games" Community file next to a "Design Systems" file next to an "HTML to Design" plugin, which has no functional relationship).

During this stage in discovery, the user finds it difficult to discern whether a file fits their use case solely from the thumbnails, resulting in them opening a new page to learn more about the file.

Once the user decides on a template, they duplicate this Community file to their drafts.

The user then selectively chooses the elements of the Community file to rework, unlocking any necessary layers and cutting the file into their workspace.

Sometime later, the "scraps" of the Community file are deleted from their drafts. If the user chooses to keep the Community file in their drafts, these files gradually pile up, resulting in disorganization.

User Flow (

Explore⁠

)

⁠

⁠

Why This Problem?

Solving this problem addresses

Figma's primitive: the design file.⁠

As the

"Google Docs" of design⁠

, Figma's cloud-based architecture (leveraging

WebGL⁠

) has been popularized for transforming the design file into an immersive workspace, with features like

in-file audio calls and cursor chat.⁠

Figma's introduction of the

Resources modal⁠

in the toolbar, which enables users to browse and run Community plugins/widgets directly in the editor, excludes being able to add Community design files. Including this feature would create a fully-integrated experience where the designer can access a comprehensive suite of open-source tools without ever

leaving their current flow.⁠

⁠

From a macro level, this problem is also pressing for the following reasons:

The paradigm of design is shifting: The proliferation of generative AI tools like

Stable Diffusion⁠

and

Microsoft Designer⁠

presents considerable uncertainty for the digital design industry since it redefines the core jobs involved at the beginning of a creative project (Appendix A). For instance, designers in the future may discover inspiration by generating prompts instead of searching and browsing. Building a more robust discovery framework better prepares Figma to level up on AI-related features and beat the competition to market (Appendix C) if they choose to pursue that route.

Balancing the marketplace: Figma Community fundamentally operates as a two-sided marketplace with producers (creators who publish their work for all Figma users to use) and consumers (designers who duplicate those files). Recently, Figma

introduced several new programs⁠

to compensate creators for their work, thereby driving the marketplace's supply-side development. Generating incentives to support demand growth, therefore, balances the offerings.

Enabling designers to double down on their work: While Figma has moved beyond the conventional definition of static files, designers still view the platform as a tool to produce visuals first and foremost. They're actively seeking solutions to help them stay focused and manage complexities instead of amplifying them.

Achieving feature parity: Figma's FigJam product has a Templates button on its toolbar that allows users to browse and drop Community templates directly into their FigJam whiteboards. Integrating a similar feature for Figma's native Design product would create a more streamlined, complementary relationship between the two offerings.

Figma's primitive must continuously evolve to meet market and consumer needs. There is an imperative for it to disrupt itself before someone else does.

⁠

Goals & Success

High-Level Approach

The problem should be approached by considering how users prioritize familiarity within their current tools. For instance, Figma's previous product rollouts have been intuitive to locate and use as these new features smoothly blend in with existing ones. As such, any approach to improving the search and discovery experiences of Figma Community should feel as if the user has already experienced these flows/interactions before (either on similar design platforms or within Figma itself). An example would be taking inspiration from the FigJam Templates modal and other template discovery products in tools like Microsoft Office, Google Suite, and Adobe Creative Cloud.

Audience & Goals

User-Facing

Primary Audience

Primary Audience Goals

The primary audience for this product is users who actively leverage Community as a starting point for their creative projects on Figma Design (50%+ of their design files involve at least one Community asset).

The use case may be less applicable in an enterprise context where brand guidelines and design systems are already established. Designers who fall into this segment may also be part of an organizational plan, which means they interact with a separate interface.

Increase user delight in browsing Community files

Provide more nuanced opportunities to search + discover Community files

Empower users to find the right assets more efficiently

Limit the clutter of unnecessary files and components

There are no rows in this table

⁠

Company-Facing

Figma's High-Level Goals

Success Metrics

Become the primary digital design product (best in class and first in mind) that locks users into the ecosystem (Appendix D).

Build a defensible position against industry developments (e.g., generative AI).

Increase the accessibility of design for all, especially for beginners/less-experienced users.

Engagement – # of Community files duplicated using Figma Toolbox

Engagement – Daily uses, daily uses per account

Satisfaction – NPS Score (will designers evangelize this feature?)

Guardrail – Time spent browsing Figma Community vs Figma Toolbox (cannibalization consideration)

Guardrail – Aggregate time spent on Figma Community profiles (consideration regarding profile discovery; while Figma Toolbox isn't a social feature, we want to ensure the product isn't creating a dynamic that's impersonal and negatively impacting its contributors)

There are no rows in this table

⁠

Non Goals

Not to add any extra functionality to Figma Community: Toolbox is a midway point that bridges the design editor and Community experiences but does not create any new flows within the Community page. For instance, if users want to browse more assets on Toolbox, they could click a "See more in Community" button to take them to the existing Community Product.

Not to become a social network: UXR interviews (Appendix B) showed indifference towards Figma Community's current social features. Expanding in this direction would create a backlog of nice-to-haves, alienating core user needs (Appendix E).

Not to focus on any FigJam Developments: FigJam already has a similar feature,

FigJam Templates,⁠

which matches the proposed features in Figma Toolbox. Integration between the two modals in the future may be a consideration but outside this project's scope (Appendix F).

Not to focus on discoverability algorithms: While Figma Toolbox aims to improve the discoverability of Community files, the primary goal is to offer more engaging discovery channels through experience design rather than algorithm development.

⁠

Solution Alignment

Hypothesis

By streamlining the accessibility of finding and duplicating Community files, Figma will improve the perception that design is intuitive, approachable, and fun.

Users will be inclined to integrate Figma more often in their daily use cases, thereby driving both supply and demand-side forces within Figma Community (e.g., more duplicates incentivize contributors to publish more files). See Appendix G for MVP feature brainstorming.

Value Proposition

For Figma Design users who actively leverage Community resources, Figma Toolbox offers an efficient, integrated, and familiar solution for sourcing high-quality and relevant inspiration to jumpstart the design process (Appendix H).

Features & Flows

⁠

View Prototype

⁠

Part 1: Toolbox Modal

As a designer, I can:

Instantly browse Figma Community by clicking the Toolbox icon on the design editor toolbar without losing context on my current workflow.

Intuitively discover files via trending, admin curation, use case (mobile, tablet, web, etc.) or tags.

See which Community resources I recently used.

When clicking on the file, learn more about the resource and its creator by accessing a side-peak view.

Explore the different pages within the file through the side-peak view.

Learn more about the file by visiting its official Community page or adding it directly to my workspace.

⁠

Part 2: Imported Page Groups (new “pages” panel)

As a designer, I can:

Immediately identify which pages in my workspace were imported from Community and which pages I created from scratch via a new page grouping logic.

Transfer pages from Community files into my current design page group to remix/rework.

Remove any leftover Community pages/components (unnecessary to my current design) without having these files clutter my drafts or recents.

⁠

User Flow (

Explore⁠

)

⁠

Open Issues & Future Considerations

Potential Risks

Cannibalization Concerns: Figma Toolbox and Figma Community should complement each other, with both products mutually driving engagement. A potential risk is Toolbox cannibalizing primary Community usage, which may harm creators long-term due to fewer direct profile visits, thereby hampering supply growth. Monitoring the established guardrail metrics would be advised.

Page Duplications: Duplications (the # of uses a published file receives) are a crucial metric for Figma Community because they determine each file's relative ranking on the page. Higher duplications also inform designers that the file is more popular and of higher quality. This metric may be gamed with Figma Toolbox as bringing a Community file into the workspace is more efficient with one click. Additionally, there is the question of whether duplicating this newly-created page group within the editor (after initially importing it from Toolbox) is considered a valid use. Addressing this uncertainty involves engaging with Figma's data and product teams to establish guidelines on the actions that qualify as duplicates. Investigating how FigJam handles this logic with its Templates product is an ideal starting point.

Future Considerations

Bookmarking: Figma Toolbox allows users to view recently duplicated files to access previous inspiration. A future update could build on this theme by involving a bookmarking functionality so users could save and revisit their favourite files. This feature enables another avenue of use cases involving curation and receiving file update notifications from the original publisher.

Group Curation: An insight identified from the UXR Interviews (Appendix C) and Needs Analysis (Appendix E) was general interest in online design groups like

Design Buddies⁠

DesignX⁠

, and various Slack/Discord communities. Over the past five years, these organizations have experienced rapid growth in membership in line with Figma's explosive popularity. Consequently, many designers value them highly in providing growth and career development resources.

Currently, content curation within Figma Community occurs in three channels:

Figma Team: Content curated by Figma staff for different use cases (presentation slides, resume templates, etc.). It should be noted that this content is not routinely refreshed and can sometimes appear outdated; for instance, as of May 2023, Figma still has a "

Kick 2022 Off⁠

" collection on its list.

Profiles: When a user visits the profile of a particular Community creator, they can also see the files that the creator has liked. This feature is especially effective in discovering the resources that leading designers/influencers (e.g.,

Joey Banks⁠

) endorse.

Corporate Pages: Companies like

Microsoft⁠

Google⁠

, and

Uber⁠

have design profiles on Figma Community. Their templates are highly sought-after by designers and are among the most duplicated files on the platform.

The latter two options are not sustainable methods of fuelling discovery as they require the user to consciously search for the pages, which involves multiple steps. Adding a specific "Curated by" section on Toolbox that enables reputable Design groups to endorse their favourite resources could thus boost discovery as these organizations have already established widespread trust among designers.

Upvotes (moonshot): The two primary metrics in assessing a file on Figma Community are "likes" and "duplications," which are disproportionate to each other. Duplications for a file are commonly far greater than likes, validating the UXR finding that users don't tend to engage with Community social features. Potentially merging these two metrics in the future/restructuring them into "upvotes" may provide a more objective way of ranking files and allow smaller creators to gain traction.

⁠

Launch Readiness

Target TIme

Milestone

Description

Exit Criteria

In 3 months

✈️ Pilot

Functionality: Create the Toolbox button and pop-up modal with basic search and import functionality on the design editor

Audience: Internal staging

No bugs on a rolling 7-day basis

Edge cases are covered, UI works fine

Key account stats for Community contributors (duplications, views, likes) working as intended

In 4 months

🧪 Beta 1

Functionality: Add recently viewed files to the Toolbox modal

Audience: Figma Partners and Designer Advocates

Positive feedback (NPS>30)

At least 25 customers would be disappointed if the feature was removed

Collect user feedback and iterate

In 6 months

🧪 Beta 2

Functionality: Refine + perfect page groups logic

Audience: Figma Community leaders,

Friends of Figma

⁠

members, and invite-only customers from sales

Conduct A/B tests on a larger cohort of users; statistically-significant increase in Toolbox engagement (likes, duplicates directly into workspace)

50% of early-access users are satisfied and plan to become active users of the feature post-launch

No change in: Figma Design user retention or any of the guardrail metrics mentioned above

In 8 months

🚀 Launch

Functionality: UI is delightful, data from Toolbox loads in sync with Figma Community, and performance equals existing FigJam Templates product

Audience: Staggered rollout to all markets: North America & EMEA → APAC → LATAM → Rest of the world

Measure, monitor, and educate

There are no rows in this table

⁠

Appendix

A. Job Mapping

⁠

⁠

⁠

B. UXR Interview Insights

From Thursday, February 23, 2023, to Wednesday, March 8, 2023, 8 interviews were conducted with early-career digital designers spanning various backgrounds and experiences with Figma. Six interviews were analyzed, and two were cut due to insufficient insights. The following chart provides a high-level overview of each admitted interviewee:

Interviewee's Work Experience

Years of Figma Experience

Recent Org Experience

Relative Figma Usage

Experience Designer at ONE Product Designer at Lyft Designer at WIX

Startup

High

Freelance UI/UX Designer PM for an on-campus initiative

Startup

High

Product Designer at EukaPay Design lead for numerous on-campus initiatives

Startup

Medium

Product Designer at Meta Product Designer at Deloitte Digital

Corporate

Medium

Product Designer at Publicis Sapient Product Designer at RBC Amplify

Corporate

Medium

Product Designer at RBC Amplify Design lead for numerous on-campus initiatives

Corporate

High

There are no rows in this table

⁠

These interviews revealed three fundamental insights:

Insight #1

Insight #2

Insight #3

The primary use case for Figma Community is to use plugins, followed by templates.

Details

Nearly all interviewees immediately considered plugins when discussing their experiences using Figma Community. They appreciated the ease of running plugins directly in the workspace instead of the old method of searching for a plugin and downloading it manually.

Interviewees also found Figma Community intuitive for sourcing files: anything ranging from resume templates to UI Kits and slide presentations. They praised the simplicity of copying the asset without downloading Zip files or additional programs.

Implications & Commentary

The ease of running plugins directly through the Resources button in the design editor's toolbar could explain why plugin usage amongst interviewees is so high – simply due to its convenience and discoverability. This potentially means that inserting a similar feature for accessing templates could also improve Figma's engagement within Community files.

Additionally, the universal popularity of specific plugins (with its ingenuity stemming from Community creators) like Mockups, Color Overlay, and Add Grain has effectively made Figma many of the interviewee's go-to tools, replacing apps like Photoshop/Illustrator. For instance, Figma replicates most of Photoshop's functionality reasonably well – but does not natively have background removal capabilities. Therefore, the Remove Background plugin provides a force pulling many Photoshop users away (Appendix E).

Show hidden columns

⁠

C. Kano Model

Must Haves

Must Haves

Need

Canva Templates

Sketch Templates

Figma Community

⭐️ Figma Toolbox ⭐️

Copy to workspace

Yes

Native templates (created in-house)

Yes

External templates (made by users)

Yes

There are no rows in this table

⁠

Performance Benefits

Performance Benefits

Need

Canva Templates

Sketch Templates

Figma Community

⭐️ Figma Toolbox ⭐️

Source templates directly from workspace

Yes

Focus on in-house generated content to grow resource base

Yes

Actively grow contributor base

Yes

Curated file recommendations

High

Low

Medium

UI optimized for workflow efficiency during the search + discover process

Low

Yes

Integrated tooling suite – plugins, widgets, files all in the workspace

Yes

Medium

Yes

There are no rows in this table

⁠

Delighters

Delighters

Need

Canva Templates

Sketch Templates

Figma Community

⭐️ Figma Toolbox ⭐️

Social networking features

Medium

Low

Facilitates the creation of authentic/original work

Low

High

Immersive learning/educational experience within core platform

Medium

Yes

Low

There are no rows in this table

⁠

D. 4 Forces Analysis

⁠

E. Prioritizing Needs

Figma Community as a workflow tool

Figma Community as a workflow tool

Need

Importance

Satisfaction

Conclusion

Reduce the time it takes to find online assets (e.g., templates, resources, files).

#Time #Effort

High

Moderate

Opportunity

Reduce the friction/effort it takes to find the right resource for a project.

#Time #Effort

High

Low

Opportunity

Maximize the ability to refer back to templates/assets.

E.g., Bookmarking templates to duplicate later on in another design project.

#Emotionality #UX

Moderate

Some Opportunity

Reformat the current UX of the Figma Community landing page for a more pleasant and desirable browsing experience.

#UX

Low

Moderate

Not Worth Pursuing

Discovering high-quality resources through subscriptions.

E.g., Subscribing to a premium Figma membership for exclusive access to mockups, prototypes, and portfolio sites that the free tier may not be able to access.

#UX

High

Competitive

Ensure seamless, unobtrusive integration between the imported Community template + core file.

E.g., duplicating a mobile UI Kit and adding it into an existing Figma file with a clear understanding of which pages are externally sourced vs created from scratch.

#UX #Information

High

Moderate

Opportunity

Ensure imported resource files meet compatibility requirements.

#UX

High

Satisfied

Ability to import Community FigJam templates directly into Figma Design.

#UX

Low

Moderate

Not Worth Pursuing

Maintaining a healthy crediting dynamic between designers (consumers) and creators (producers).

E.g., Refraining from developing a culture where designers steal files from Community without taking the time to recognize the creators who published them. Failure to control the associated guardrail metrics would undermine the entire people-centric vision of Figma Community.

#Trust

High

Low

Opportunity

There are no rows in this table

⁠

Figma Community as a social network

Figma Community as a social network

Need

Importance

Satisfaction

Conclusion

Increase the ability to find new creators and follow them.

#Discoverability #Emotionality

Moderate

High

Not Worth Pursuing

Increase the ability to follow friends and share design tips and tricks.

#Discoverability #Emotionality

Low

High

Not Worth Pursuing

Develop the ability to form intimate, 1-on-1 mentorship relationships with design influencers/design leaders.

#Emotionality

High

Competitive

Actively contribute resource feedback and engage in conversation with creators via chat threads.

#Emotionality #Information

Low

High

Not Worth Pursuing

Prioritize the importance of vetted/experienced designers and high-quality pieces over lower-quality pieces.

#UX #Information

High

Moderate

Some Opportunity

Develop pricing tiers for Community resources – i.e., freemium tools.

E.g., Acquiring a free preview of an icon kit and having the option to purchase the full version incentivizes both the creator and designer.

#Information

Moderate

Low

Fulfilled

There are no rows in this table

⁠

Figma Community as a curation platform

Figma Community as a curation platform

Need

Importance

Satisfaction

Conclusion

Creating design collections for others to follow.

#Discoverability

Moderate

Low

Some Opportunity

Upvoting resources to increase discoverability for smaller creators.

#Discoverability #Trust

Moderate

Low

Future Consideration

Discovering resources curated by reputable companies or extracurricular organizations.

E.g., Seeing design resources curated by teams at Netflix or UX Laurier.

#Discoverability

Moderate

Low

Future Consideration

Staying on top of design trends and being the first to experiment with new styles.

E.g., Being the first to try out Brutalism, Skeuomorphism, etc.

#Discoverability

High

Moderate

Opportunity

There are no rows in this table

⁠

Commentary

Overall, the most significant and underserved needs fall under the perspective of Figma Community being a workflow tool rather than a social network. These needs require enhancements in time, effort, UX, and information.

Opportunities with the potential to generate customer value include:

Reducing the time and friction involved in discovering the right resources in Figma Community.

Ensuring a seamless integration of the imported file within the designer's current workflow.

Balancing the idea of efficiency with credit: ensuring creators receive adequate recognition for their contributions and that this feature does not cultivate a culture of stealing designs.

Empowering designers to keep up with community-oriented trends and quickly source relevant design files according to those trends.

Other opportunities (not immediately pressing but may be included in subsequent MVP releases) include:

Maximizing the ability to revisit favourite templates through bookmarking.

View high-quality content first when initiating a search (e.g., files with the highest duplicates, content created in-house by Figma, content curated by Figma partners, etc.).

Future considerations include curation tools, like upvoting newly-published resources or finding resources shared by reputable design teams (corporations, nonprofits, school initiatives, etc.).

Any social networking features/attempts to make Figma Community a social media platform are deprioritized and flagged as either existing competitive spaces or not worth pursuing. This stance is abundantly evident through UXR interviews with designers, who stress that there are already many sources outside of Figma to find/build design communities.

⁠

F. Problem Scoping

⁠

Frank Huang – IPS FigJam Artifacts (1).png

⁠

G. MVP Feature Brainstorming

Stage

Feature Ideas

Discovery

Integrate Figma Toolbox directly on the existing resource button (top navbar) next to components, widgets, and plugins

Create a new button (toolbox icon) that expands into a full-fledged modal where users can browse for templates, icons, etc.

Onboarding

Main screen shows users a list of trending resources (refreshed UI)

Add recently-used files

Also can search by tags or use case

Example use cases: Mobile, desktop, print, tablet, accessibility, general

Example tags: Inspiration, design systems, wireframes, visual assets, development, just for fun, templates

Curated by Figma section (Curated by influencers/design groups → future consideration)

At the top of the modal, include a search section where users can manually search for the assets

Task in Progress

Intuitive filter design → better visibility

On click of Community file, easily access various pages within the asset without opening it in a different environment

Larger cards (increased viewing space)

Can view contributor's profile directly on the card (without having to exit to a new page)

Option to drop the file directly into the workspace or duplicate it to drafts

Task Completed

Files are dropped into the existing Figma workspace as a new page group, visible on the left sidebar

This new feature will separate pages imported from Community and pages that are currently on the workspace

The designer can quickly revisit the community file by right-clicking on the page folder or deleting the Community file

Designer effectively remixes the Community file once they start editing the duplicated pages

There are no rows in this table

⁠

H. Value Proposition Map

⁠

Frank Huang – IPS FigJam Artifacts (2).png

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.