# how to change figma background color

Viewport: 1910x922 @1.25x

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

1. [Intro] How to Change Background Color in Figma
   - body: This guide will walk you through the steps to change the background color in Figma. Follow these steps to easily customize the background of your design canvas.
   - voiceover: This guide will walk you through the steps to change the background color of a canvas or frame in Figma. Follow each step closely to customize the background color as per your preference.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vs1ld000i0cl1469xftk8.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
1. step_01 [image] - Click on the empty area of the canvas or select the frame whose background you want to change.
   - source type: IMAGE
   - description: Open Figma and Load Your Project
   - target: (747.3462269211183, 242.21052288104988), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (747.3462269211183, 242.21052288104988), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Click on an empty area of the canvas or select the frame whose background you want to change.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vs6ug000k0cl1c1fo9m2j.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vl96e000003hup1r7qm6z.png
2. step_02 [image] - Go to Page option inside the Design.
   - source type: IMAGE
   - description: Navigate to the Canvas Settings
   - target: (1251.2907726475116, 127.5124429518786), rect: top=100 left=100 width=100 height=100
   - hotspots: 1
     - hotspot_01 (1251.2907726475116, 127.5124429518786), rect: top=100 left=100 width=100 height=100
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Go to the 'Page' option inside the Design panel. You will find this on the right-hand side of the screen.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vs6v6000l0cl1f8bna2fx.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vmufx00003j765oygep2b.png
3. step_03 [image] - Choose a color from the picker or enter a hex code.
   - source type: IMAGE
   - description: Change Background Color
   - target: (1016.3767261827206, 307.40163491878974), rect: top=100 left=100 width=100 height=100
   - hotspots: 1
     - hotspot_01 (1016.3767261827206, 307.40163491878974), rect: top=100 left=100 width=100 height=100
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: Choose a color from the picker or enter a hex code. You can find the color picker in the background section of the design settings.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vs6vq000m0cl16ek51x72.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vntp400023j7617ki7wsv.png
4. step_04 [image] - The background color will update immediately.
   - source type: IMAGE
   - description: Save Your Changes
   - target: (652, 266), rect: top=0 left=241 width=1046 height=738
   - hotspots: 1
     - hotspot_01 (652, 266), rect: top=0 left=241 width=1046 height=738
   - dimensions: 1910x922 @1.25x
   - layout: 1 (full)
   - voiceover: The background color will update immediately as soon as you choose a color or enter a hex code.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vs6wk000n0cl13una10n4.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM
   - image: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vlkra000103hunspurnxq.png
6. [Outro] Apply and Confirm Changes
   - body: Once you have selected your desired background color, make sure to apply and save your changes by clicking the 'Apply' button. Your Figma canvas should now display the new background color.
   - voiceover: To further customize your design, explore other options in the Design panel, such as adjusting the stroke, effects, or layout settings.
   - audio: https://cdn.layerpath.com/cm6jao3nc0004ju0cgnmqyz10/cm99vl3k90004k30cotm3l9t6/cm99vs562000j0cl1beovav47.mp3
   - voice: 21m00Tcm4TlvDq8ikWAM

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