# how to create a component in figma

Viewport: 1910x922 @1.25x

Playback: autoplay=false durationMs=3000 navBar=false arrows=true callouts=true browserBar=false browserTheme=light

1. [Intro] How to Create a Component in Figma
   - body: This guide will walk you through the step-by-step process of creating a component in Figma. Components are reusable elements that help you maintain design consistency throughout your project. Follow these steps to create your first component.
   - voiceover: This guide will walk you through the process of creating a component in Figma, which can be reused throughout your design project. Follow these steps to streamline your design workflow.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b78t1m00140ci688xb8wfn.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
1. step_01 [image] - Open Figma.
   - source type: IMAGE
   - description: Open the Design Panel
   - target: (547.7926568810558, 473.08889811971983), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (547.7926568810558, 473.08889811971983), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Start with opening the Figma application on your computer. Ensure you are logged in to your account and have the design file open where you want to create the component.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b78wqq00160ci624gh4ib9.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b6zg7u000003hum4hnbe7u.png
2. step_02 [image] - Select the elements you want to turn into a component.
   - source type: IMAGE
   - description: Select the Elements
   - target: (827.7006852057551, 417.65652947794825), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (827.7006852057551, 417.65652947794825), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click and select the design elements you want to include in your new component. You can hold Shift to select multiple elements at once. Make sure all desired elements are highlighted.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b78wrb00170ci67pax2asa.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b6zi5z000103hugdr2roat.png
3. step_03 [image] - Right-click and choose “Create component”, or press Ctrl/Cmd + Alt + K.


   - source type: IMAGE
   - description: Create the Component
   - target: (817.4403900358786, 453.429318386251), rect: top=100 left=100 width=100 height=100
   - hotspots: 1
     - hotspot_01 (817.4403900358786, 453.429318386251), rect: top=100 left=100 width=100 height=100
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Right-click on the selected elements and choose 'Create component' from the context menu. Alternatively, you can press Ctrl/Cmd + Alt + K to create the component quickly.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b78ws000180ci6388ccgio.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b71ub400003j76wjh3iyok.png
4. step_04 [image] - A purple bounding box appears — that’s your new component.
You can reuse it by copying or dragging it from the Assets panel.
   - source type: IMAGE
   - description: Name Your Component
   - target: (758.8364348998606, 190.88365968229806), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (758.8364348998606, 190.88365968229806), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: A purple bounding box will appear around your selection – this indicates that your component has been successfully created. You can now reuse it by copying or dragging it from the Assets panel.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b78wsr00190ci69rh11seb.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b6znsw000203hun0jux7pi.png
6. [Outro] Component Created !!
   - body: Now that you have created your component, you can start using it throughout your design. Duplicate the component from the 'Assets' panel and make any necessary overrides without altering the original component. Happy designing!
   - voiceover: You have successfully created a component in Figma. To utilize this component effectively, drag it from the Assets panel into your design or copy it as needed. Continue to create more components to enhance your design system.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm9b6zbtu0001jy0c8t07psai/cm9b78uny00150ci60kowh9fm.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM

Source: https://share.layerpath.com/share/cm9b6zbtu0001jy0c8t07psai/tour