Resources and Assets in Figma are reusable design materials that help designers create interfaces faster, maintain consistency, and avoid rebuilding common elements from scratch. They can include components, styles, variables, icons, UI kits, templates, illustrations, images, libraries, plugins, widgets, and other reusable design resources.
Figma provides an Assets tab for accessing reusable components from the current file and enabled libraries. Designers can search for components, browse libraries, and drag reusable components onto the canvas to create instances. Libraries can contain reusable components, styles, and variables that can be shared across files.
Resources can also come from team or organization spaces and from the Figma Community. Depending on the Figma plan, workspace configuration, and permissions, teams can provide templates, UI kits, plugins, widgets, and other resources to help designers start projects faster.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and explore the course through Register for Figma Course Demo.
Resources and Assets refer to reusable design elements, files, tools, libraries, and materials that support the design workflow. Instead of creating every design element from the beginning, designers can reuse existing resources to save time and maintain consistency.
For example, a designer creating a mobile banking application may reuse buttons, icons, input fields, cards, colors, typography styles, variables, and navigation components from an existing design library.
Figma Resources
↓
Assets
↓
Components
Styles
Variables
Icons
UI Kits
Templates
Libraries
Plugins
Widgets
↓
Reusable Design Workflow
Resources and assets are important because modern UI/UX projects contain many repeated elements. Reusing these elements reduces repetitive work and helps designers maintain visual consistency across screens and products.
| Resource | Purpose |
|---|---|
| Components | Reusable UI elements |
| Styles | Reusable visual properties |
| Variables | Reusable design values and tokens |
| Icons | Reusable interface symbols |
| Images | Photos and visual content |
| Illustrations | Visual artwork |
| UI Kits | Collections of ready-made UI elements |
| Templates | Pre-structured design files |
| Libraries | Collections of reusable design assets |
| Plugins | Tools that extend Figma functionality |
| Widgets | Interactive canvas tools |
| Community Resources | Publicly shared templates, files, plugins, and resources |
The word resource is broader than asset. An asset usually refers to a reusable design element, while a resource can include assets as well as templates, tools, plugins, widgets, libraries, documentation, and external materials.
| Concept | Meaning | Example |
|---|---|---|
| Asset | Reusable design element | Button component |
| Resource | Material or tool that supports design work | UI kit or template |
| Library | Collection of shared assets | Design system library |
| Component | Reusable UI object | Primary Button |
| Style | Reusable visual property | Heading Text Style |
| Variable | Reusable design value | Spacing/Medium |
The Assets tab in Figma provides access to reusable components available in the current file and enabled libraries. Designers can search for components, browse available assets, and drag components onto the canvas to create instances.
Figma File
↓
Assets Tab
↓
Search or Browse
↓
Local Components
Library Components
↓
Select Component
↓
Drag to Canvas
↓
Create Instance
| Platform | Shortcut |
|---|---|
| Mac | Option + 2 |
| Windows | Alt + 2 |
The shortcut can be useful when working quickly, while the Assets tab can also be opened directly from Figma's interface.
Local assets are reusable components created inside the current Figma file. They are available within that file and can be reused without requiring a separate shared library.
Current Figma File
↓
Create Component
↓
Component Becomes Available in Assets
↓
Search Component
↓
Drag to Canvas
↓
Create Instance
Components are reusable design objects. They can represent simple elements such as buttons and icons or complex structures such as navigation bars, cards, dialogs, forms, headers, and complete interface sections.
Components allow designers to create a reusable source design and then create instances of that component throughout a project.
Main Component
↓
Component Instance
↓
Use on Multiple Screens
↓
Update Main Component
↓
Review Changes in Instances
A component instance is a reusable copy of a main component. The instance remains connected to the main component and can receive changes made to the source component.
Main Button Component
↓
Button Instance 1
Button Instance 2
Button Instance 3
Button Instance 4
↓
Update Main Component
↓
Review Available Changes
↓
Instances Can Reflect Updates
| Feature | Main Component | Instance |
|---|---|---|
| Purpose | Source component | Reusable copy |
| Creation | Created as the original component | Created from a component |
| Reuse | Acts as the source | Used across screens |
| Updates | Source of component changes | Can receive applicable updates |
| Typical Usage | Design-system maintenance | Product-screen design |
Styles are reusable collections of visual properties. They help designers maintain consistent colors, typography, effects, and other repeated visual settings throughout a design.
| Style Type | Example |
|---|---|
| Color Style | Primary Blue |
| Text Style | Heading 1 |
| Effect Style | Card Shadow |
| Grid or Layout Style | Desktop Grid |
Variables are reusable values that can be applied to design properties. They are useful for creating design tokens and maintaining consistent values throughout a design system.
For example, a design system may define variables for primary colors, spacing, border radius, typography-related values, or other reusable properties.
Variable
↓
Reusable Value
↓
Apply to Multiple Designs
↓
Update Variable
↓
Review Design Changes
Design tokens are reusable values that represent decisions such as colors, spacing, typography, radius, and other design properties. Variables can help organize these values and make large design systems easier to maintain.
| Token Category | Example |
|---|---|
| Color | Primary / Secondary |
| Spacing | 8px / 16px / 24px |
| Radius | 4px / 8px / 12px |
| Typography | Heading / Body / Caption |
| Shadow | Small / Medium / Large |
A Figma library is a collection of reusable design assets such as components, styles, and variables. A published library can make these resources available to other design files where the library is enabled.
Library
├── Components
├── Styles
├── Variables
└── Shared Resources
↓
Multiple Figma Files
↓
Consistent Design System
When a design team wants to make components, styles, or variables available to other files through a library, the source file can be published as a library when the workspace and permissions support that workflow.
Create Assets
↓
Organize Assets
↓
Review Components
↓
Prepare Library
↓
Publish Library
↓
Enable Library in Another File
↓
Use Shared Assets
A library can be enabled from the Assets and Libraries workflow. After the library is enabled, its available components, styles, and variables can be used in the current file.
Once a library is enabled, components can be accessed from the Assets tab and dragged onto the canvas to create instances.
Enable Library
↓
Open Assets
↓
Search Component
↓
Select Component
↓
Drag to Canvas
↓
Create Instance
↓
Customize Supported Properties
When a published library asset is updated, files using that library can receive information about available updates. Designers can review applicable changes and decide when to apply them according to their workflow and permissions.
Main Component Updated
↓
Library Update Published
↓
Used File Detects Available Update
↓
Designer Reviews Change
↓
Accept or Keep Existing Version
↓
Design Reflects Approved Update
UI kits are collections of reusable components, styles, variables, and example screens that help designers start projects faster. They may be provided by Figma, partners, teams, or other resource creators.
Templates are pre-structured design files or layouts that provide a starting point for a project. Instead of beginning with an empty canvas, designers can use an existing structure and customize it according to project requirements.
Template
↓
Open or Duplicate
↓
Review Structure
↓
Customize Content
↓
Apply Brand
↓
Review Components
↓
Complete Design
Icons are reusable visual symbols that communicate actions, navigation, status, or information. A well-organized icon library can improve consistency across an interface.
Icon Library
├── Home
├── Search
├── Profile
├── Settings
├── Menu
├── Close
├── Edit
└── Delete
Large icon libraries should use meaningful names and consistent categories. Icons can be organized as reusable components so designers can search for and reuse them throughout a product.
| Category | Example |
|---|---|
| Navigation | Icon/Home |
| Actions | Icon/Edit |
| Status | Icon/Success |
| Communication | Icon/Mail |
| Social | Icon/Social |
Good naming is essential when a project contains hundreds or thousands of assets. A clear naming structure helps designers quickly locate and understand the correct component.
Category / Component / Variant
Button / Primary / Default
Button / Primary / Hover
Button / Primary / Disabled
Icon / Home
Icon / Search
Icon / Profile
Card / Product
Card / Pricing
Card / Article
Large Figma projects become easier to maintain when assets are organized into logical categories.
| Category | Example Assets |
|---|---|
| Navigation | Header, Sidebar, Tabs |
| Forms | Input, Select, Checkbox |
| Buttons | Primary, Secondary, Icon Button |
| Cards | Product, Profile, Article |
| Feedback | Alert, Toast, Modal |
| Icons | Home, Search, Settings |
The Figma Community provides publicly shared design resources such as templates, files, plugins, widgets, UI resources, and educational materials. Designers can use Community resources for exploration, learning, inspiration, and project starting points.
Figma File Browser
↓
Community
↓
Search Resource
↓
Preview Resource
↓
Duplicate / Use / Customize
↓
Add to Project
Plugins are applications that extend Figma functionality. They can support tasks such as generating content, organizing layers, importing information, automating repetitive tasks, checking accessibility, or connecting design workflows with other tools.
Design Requirement
↓
Identify Repetitive Task
↓
Search Plugin
↓
Review Plugin
↓
Run Plugin
↓
Review Result
↓
Continue Design Workflow
Widgets are interactive objects that can be added to Figma or FigJam canvases to support collaboration and specialized workflows. Depending on the widget, they can support activities such as voting, brainstorming, interaction, or data-related tasks.
Open Tools
↓
Find Widget
↓
Add to Canvas
↓
Configure Widget
↓
Use With Team
Figma provides different areas for accessing reusable design resources and extending workflows. The Assets area focuses on reusable components and libraries, while tools and Community provide additional resources and functionality.
| Area | Common Purpose |
|---|---|
| Assets | Components and reusable design assets |
| Libraries | Shared components, styles, and variables |
| Tools | Plugins, widgets, and other extensions |
| Community | Publicly shared resources |
Searching is important when a file contains many reusable assets. Instead of manually browsing every category, designers can search for a component by name or keyword.
Open Assets
↓
Search Field
↓
Enter Keyword
↓
Review Results
↓
Select Asset
↓
Drag to Canvas
When searching for components, use clear keywords that describe the purpose of the asset.
| Search Keyword | Possible Result |
|---|---|
| Button | Button components |
| Navigation | Navigation components |
| Card | Card components |
| Input | Input components |
| Icon | Icon components |
| Modal | Modal components |
One of the most common asset workflows is dragging a component from the Assets tab onto the canvas. This creates an instance of the component instead of requiring the designer to manually recreate the entire object.
Assets Tab
↓
Find Component
↓
Drag Component
↓
Drop on Canvas
↓
Component Instance
Reusable assets help maintain consistency across multiple screens. If the same button component is used throughout an application, designers do not need to recreate the button independently on every screen.
Shared Button
↓
Screen 1
Screen 2
Screen 3
Screen 4
Screen 5
↓
Consistent UI
Assets form an important part of a design system. A mature design system may contain components, styles, variables, icons, documentation, and reusable patterns that teams can use across products.
A well-organized asset system helps teams create interfaces using common design decisions rather than rebuilding the same elements repeatedly.
Design System
├── Foundations
│ ├── Colors
│ ├── Typography
│ ├── Spacing
│ └── Effects
├── Components
│ ├── Buttons
│ ├── Inputs
│ ├── Cards
│ └── Navigation
├── Icons
├── Variables
├── Templates
└── Documentation
Brand assets can include logos, approved colors, typography, icons, illustrations, imagery, and other visual elements. Keeping these resources organized helps designers maintain brand consistency.
Images are frequently used in UI designs, landing pages, dashboards, marketing graphics, and mobile applications. Designers should organize images carefully and use appropriate resolutions for their intended purpose.
| Image Type | Common Usage |
|---|---|
| Product Image | E-commerce |
| Profile Image | User accounts |
| Hero Image | Landing pages |
| Background Image | Marketing sections |
| Illustration | Onboarding and empty states |
Illustrations can be reused across onboarding screens, websites, marketing materials, empty states, presentations, and documentation. A shared illustration library can reduce duplicate work and maintain a consistent visual style.
Illustration Library
├── Onboarding
├── Empty States
├── Error States
├── Success States
├── Marketing
└── Documentation
Find Template
↓
Open or Duplicate
↓
Understand Structure
↓
Replace Content
↓
Apply Brand Assets
↓
Customize Components
↓
Review Design
↓
Finalize
Identify Repetitive Task
↓
Search Plugin
↓
Review Plugin
↓
Run Plugin
↓
Configure
↓
Generate or Modify Content
↓
Review Output
↓
Continue Design
Shared assets become particularly useful when multiple designers work on the same product. A centralized library can give team members access to common components, styles, variables, icons, and other design resources.
Access to resources depends on the type of resource and the permissions available to the user. Adding or managing libraries can require appropriate file access, while some organization-level resources can depend on workspace configuration and plan.
Before changing shared resources, designers should understand whether they are editing a local asset, a shared library, or an organization-managed resource.
Open File
↓
Assets
↓
Libraries
↓
Find Library
↓
Check Access
↓
Enable Library
↓
Use Assets
A library can be removed from a design file when it is no longer needed, subject to the user's access and workspace configuration. Before removing a library, designers should review which parts of the design depend on its resources.
Production files should be checked carefully before changing shared-library configuration.
Shared assets may change over time. For example, a design system may update its button style, icon, color variable, or navigation component. Designers should review available updates before applying them to production designs.
Asset Updated
↓
Library Publishes Update
↓
File Receives Update Information
↓
Designer Reviews
↓
Accept Applicable Update
↓
Design Uses Updated Asset
When working with shared libraries, teams should maintain a controlled process for updating components and other resources. Changes should be reviewed before being distributed to active product files.
Category / Type / Name / Variant
Button / Primary / Submit / Default
Button / Primary / Submit / Hover
Button / Primary / Submit / Disabled
Input / Text / Default
Input / Text / Error
Input / Text / Disabled
Icon / Navigation / Home
Icon / Navigation / Search
Icon / Action / Edit
Organizing pages and frames logically can make components easier to locate and maintain. A design-system file can separate foundations, components, icons, patterns, templates, and documentation.
Design System File
├── Foundations
├── Components
│ ├── Buttons
│ ├── Forms
│ ├── Cards
│ └── Navigation
├── Icons
├── Patterns
└── Templates
An e-commerce application may use dozens of reusable assets. Creating these as organized components and shared resources can make product screens faster to design.
E-Commerce Assets
├── Header
├── Navigation
├── Product Card
├── Product Image
├── Rating
├── Price
├── Discount Badge
├── Add to Cart Button
├── Quantity Selector
├── Checkout Form
└── Payment Section
Banking App Assets
├── Account Card
├── Balance
├── Transaction Row
├── Transfer Button
├── Payment Button
├── Navigation
├── Profile
├── Security Alert
└── Transaction Status
Reusable assets can help maintain a consistent visual language across banking screens.
Food Delivery Assets
├── Restaurant Card
├── Food Card
├── Food Image
├── Rating
├── Price
├── Add Button
├── Cart
├── Address Card
├── Delivery Status
└── Navigation
Dashboard Assets
├── Sidebar
├── Header
├── Statistic Card
├── Chart Container
├── Data Table
├── User Avatar
├── Status Badge
├── Filter
└── Pagination
Create a small design-system library containing reusable components, styles, variables, and icons.
Design System Library
├── Colors
├── Typography
├── Spacing
├── Buttons
├── Inputs
├── Cards
├── Navigation
├── Icons
└── Feedback Components
Identify Requirement
↓
Search Existing Resources
↓
Check Local Assets
↓
Check Libraries
↓
Check UI Kits
↓
Check Community Resources
↓
Select Appropriate Asset
↓
Customize if Necessary
↓
Review Consistency
↓
Use in Final Design
A component is a specific type of reusable design asset. The term asset can be broader and may include components, icons, images, styles, variables, templates, and other reusable resources.
Assets
├── Components
├── Styles
├── Variables
├── Icons
├── Images
├── Templates
└── Other Resources
An asset is an individual reusable resource, while a library is a collection of reusable resources that can be shared across files.
| Asset | Library |
|---|---|
| Individual reusable element | Collection of reusable elements |
| Button component | Complete component library |
| Color style | Collection of color and other styles |
| Single variable | Collection of variables |
Design Requirement
↓
Search Existing Assets
↓
Check Local Components
↓
Check Shared Libraries
↓
Check UI Kits
↓
Check Community Resources
↓
Select Asset
↓
Create Instance or Apply Resource
↓
Customize Allowed Properties
↓
Review Design
↓
Finalize
UI/UX designers can use resources and assets throughout the entire design process.
| Design Stage | Useful Resources |
|---|---|
| Research | Templates and inspiration |
| Wireframing | Wireframe kits |
| UI Design | Components and UI kits |
| Prototyping | Interactive components |
| Design System | Components, styles, variables |
| Presentation | Templates and illustrations |
| Development Handoff | Organized components and styles |
Beginners can use ready-made resources to understand how professional interfaces are structured. Resources should be studied and customized rather than used without understanding their underlying design principles.
Advanced designers can build and maintain scalable asset libraries for teams and products. This includes component architecture, variables, styles, documentation, naming systems, publishing workflows, and asset governance.
Create a small Figma design system and organize reusable resources.
Create a reusable UI resource library for a fictional application.
Figma UI Resource Library
├── Foundations
│ ├── Colors
│ ├── Typography
│ └── Spacing
├── Components
│ ├── Buttons
│ ├── Inputs
│ ├── Cards
│ ├── Navigation
│ └── Modals
├── Icons
├── Variables
├── Templates
└── Documentation
After creating the library, practice using its components in a separate design file and organize the resources so another designer can easily find and understand them.
Create an e-commerce asset library containing reusable product and shopping components.
E-Commerce Library
├── Header
├── Navigation
├── Product Card
├── Product Image
├── Rating
├── Price
├── Discount Badge
├── Add to Cart
├── Quantity Selector
├── Cart Item
├── Checkout Form
└── Payment Method
Create a mobile application library containing reusable navigation, form, card, button, and feedback components.
Mobile App Library
├── App Header
├── Bottom Navigation
├── Buttons
├── Input Fields
├── Cards
├── Avatars
├── Tabs
├── Alerts
├── Modals
└── Icons
Assets are reusable design resources such as components, styles, variables, icons, and other design elements.
The Assets tab provides access to reusable components from the current file and enabled libraries.
A library is a collection of reusable design assets such as components, styles, and variables that can be shared across files.
A component is a reusable design object that can be used to create multiple instances.
An instance is a reusable copy of a main component that remains connected to the component source.
Styles are reusable collections of visual properties such as colors, typography, effects, and other repeated design settings.
Variables are reusable values that can be applied to design properties and are commonly used to support design tokens and scalable design systems.
UI kits are collections of reusable components, styles, variables, and example screens that help designers start projects faster.
Assets reduce repetitive work, improve consistency, and make design workflows more efficient.
Components can be searched through the Assets tab and available libraries.
Clear naming makes assets easier to find, understand, maintain, and reuse.
An asset is an individual reusable resource, while a library is a collection of reusable resources.
Libraries allow teams to share common components, styles, and variables across multiple files and products.
Plugins are applications that extend Figma functionality and can support tasks that are not available through the core design tools.
Widgets are interactive objects that can be added to a Figma or FigJam canvas to support collaboration and specialized workflows.
A local asset is available from the current file, while a library asset comes from a shared library that has been made available to the file.
Meaningful names make large libraries easier to search, browse, understand, maintain, and reuse.
Reviewing updates helps designers understand changes before applying them to product designs and reduces the risk of unexpected design changes.
Understand Project Requirements
↓
Search Existing Assets
↓
Check Local Components
↓
Check Shared Libraries
↓
Check UI Kits
↓
Check Community Resources
↓
Select Appropriate Resource
↓
Create Instance or Apply Asset
↓
Customize Allowed Properties
↓
Check Design Consistency
↓
Review Accessibility and Quality
↓
Finalize Design
Level 1
Understand Assets
↓
Level 2
Learn Assets Tab
↓
Level 3
Use Components
↓
Level 4
Create Component Instances
↓
Level 5
Use Styles
↓
Level 6
Learn Variables
↓
Level 7
Use Libraries
↓
Level 8
Use UI Kits and Templates
↓
Level 9
Organize Design-System Assets
↓
Level 10
Manage Professional Resource Libraries
Create a complete Figma resource library for a fictional food delivery application. The library should contain reusable components, styles, variables, icons, and templates.
Food Delivery Resource Library
├── Foundations
│ ├── Colors
│ ├── Typography
│ ├── Spacing
│ └── Radius
├── Components
│ ├── Restaurant Card
│ ├── Food Card
│ ├── Button
│ ├── Search Bar
│ ├── Cart Item
│ ├── Address Card
│ └── Order Status
├── Icons
│ ├── Home
│ ├── Search
│ ├── Cart
│ └── Profile
├── Templates
│ ├── Home Screen
│ ├── Restaurant Screen
│ └── Checkout Screen
└── Documentation
Use the library to create multiple screens and verify that the same assets can be reused consistently throughout the application.
Resources and Assets are an essential part of an efficient Figma workflow. They allow designers to reuse components, styles, variables, icons, templates, UI kits, libraries, and other resources instead of repeatedly creating the same elements.
The Assets tab provides access to reusable components, while libraries allow teams to share components, styles, and variables across files. Figma also provides UI kits, Community resources, plugins, widgets, and other tools that can support different design workflows.
Professional asset management requires clear naming, logical organization, reusable component structures, consistent design tokens, controlled library updates, and regular maintenance. When resources are organized properly, designers can work faster while maintaining consistency across screens, products, and teams.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and register for a course demonstration through Register for Figma Course Demo.
