Figma Toolbox PRD
Share
Explore
Figma Toolbox PRD

icon picker
Figma Toolbox

Figma should develop a modal in its design editor that allows users to seamlessly browse and add Community assets into their current file.
Frank Huang
Project:
IPS 2023 Capstone
⁠
EDIT INFO
⁠
Team:
@Ivey Product Society
⁠
⁠Contributors:
Frank Huang
⁠
⁠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 + discovery 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
⁠
)
⁠
Frank Huang – IPS FigJam Artifacts.png
⁠
⁠

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, ironically 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 benefit from leveraging 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
1
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
1
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.
⁠
10.png
⁠
⁠
⁠
15.png
⁠
⁠

Part 2: Imported Page Groups (Left sidebar)

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.
⁠
16.png
⁠
⁠
User Flow (
Explore
⁠
)
⁠
Frank Huang – IPS FigJam Artifacts.png
⁠
⁠

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
1
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
2
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
3
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
4
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

⁠
Job Map p1.png
⁠
⁠
⁠
Job Map p2.png
⁠
⁠
⁠

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
1
Experience Designer at ONE Product Designer at Lyft Designer at WIX
4
Startup
High
2
Freelance UI/UX Designer PM for an on-campus initiative
3
Startup
High
3
Product Designer at EukaPay Design lead for numerous on-campus initiatives
3
Startup
Medium
4
Product Designer at Meta Product Designer at Deloitte Digital
4
Corporate
Medium
5
Product Designer at Publicis Sapient Product Designer at RBC Amplify
4
Corporate
Medium
6
Product Designer at RBC Amplify Design lead for numerous on-campus initiatives
4
Corporate
High
There are no rows in this table
⁠
These interviews revealed three fundamental insights:
Search
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
0
Need
Canva Templates
Sketch Templates
Figma Community
⭐️ Figma Toolbox ⭐️
1
Copy to workspace
Yes
Yes
Yes
Yes
2
Native templates (created in-house)
Yes
Yes
Yes
Yes
3
External templates (made by users)
Yes
No
Yes
Yes
There are no rows in this table
⁠
Performance Benefits
0
Need
Canva Templates
Sketch Templates
Figma Community
⭐️ Figma Toolbox ⭐️
1
Source templates directly from workspace
Yes
Yes
No
Yes
2
Focus on in-house generated content to grow resource base
Yes
Yes
No
No
3
Actively grow contributor base
Yes
No
Yes
Yes
4
Curated file recommendations
High
No
Low
Medium
5
UI optimized for workflow efficiency during the search + discover process
Low
No
No
Yes
6
Integrated tooling suite – plugins, widgets, files all in the workspace
Yes
Yes
Medium
Yes
There are no rows in this table
⁠
Delighters
0
Need
Canva Templates
Sketch Templates
Figma Community
⭐️ Figma Toolbox ⭐️
1
Social networking features
Medium
Medium
Low
No
2
Facilitates the creation of authentic/original work
Low
Low
High
High
3
Immersive learning/educational experience within core platform
Medium
Yes
Low
No
There are no rows in this table
⁠
⁠

D. 4 Forces Analysis

⁠
Frank Huang – IPS FigJam Artifacts.png
⁠
⁠
⁠

E. Prioritizing Needs

Figma Community as a workflow tool
0
Need
Importance
Satisfaction
Conclusion
1
Reduce the time it takes to find online assets (e.g., templates, resources, files).
#Time #Effort
High
Moderate
Opportunity
2
Reduce the friction/effort it takes to find the right resource for a project.
#Time #Effort
High
Low
Opportunity
3
Maximize the ability to refer back to templates/assets.
E.g., Bookmarking templates to duplicate later on in another design project.
#Emotionality #UX
Moderate
Moderate
Some Opportunity
4
Reformat the current UX of the Figma Community landing page for a more pleasant and desirable browsing experience.
#UX
Low
Moderate
Not Worth Pursuing
5
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
High
Competitive
6
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
7
Ensure imported resource files meet compatibility requirements.
#UX
High
High
Satisfied
8
Ability to import Community FigJam templates directly into Figma Design.
#UX
Low
Moderate
Not Worth Pursuing
9
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
0
Need
Importance
Satisfaction
Conclusion
1
Increase the ability to find new creators and follow them.
#Discoverability #Emotionality
Moderate
High
Not Worth Pursuing
2
Increase the ability to follow friends and share design tips and tricks.
#Discoverability #Emotionality
Low
High
Not Worth Pursuing
3
Develop the ability to form intimate, 1-on-1 mentorship relationships with design influencers/design leaders.
#Emotionality
High
High
Competitive
4
Actively contribute resource feedback and engage in conversation with creators via chat threads.
#Emotionality #Information
Low
High
Not Worth Pursuing
5
Prioritize the importance of vetted/experienced designers and high-quality pieces over lower-quality pieces.
#UX #Information
High
Moderate
Some Opportunity
6
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
0
Need
Importance
Satisfaction
Conclusion
1
Creating design collections for others to follow.
#Discoverability
Moderate
Low
Some Opportunity
2
Upvoting resources to increase discoverability for smaller creators.
#Discoverability #Trust
Moderate
Low
Future Consideration
3
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
4
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

1
Stage
Feature Ideas
2
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.
3
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
4
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
5
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
Share
 
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.