The basis of the Figma Template customization

A Figma Template has structures similar to any document consisting of layers and it makes template customization incredibly simple, so if you have ever opened Adobe Photoshop file, Sketch or Adobe XD, it will not be difficult for you to figure it out.

Customization of any element consists of two steps – the Сhoice of Element / Layer and its change. To select a layer, you need to use the Layers Panel on the left side of the Figma window, and for setting up the Properties Panel on the right side of the Figma window.

You can learn more about the Figma interface from The Getting Started section of the official documentation.

Pages

Each template contains at least one Page. Each Page contains Layers grouped by Frames.

Figma Pages and Layers

Frames

Each page contains one or more Frames. The frame is a layout of a web page or a window of the UI.

Layers

Any of a Frame contains several layers. In the Layers List, there are both Simple Layers(as Text Layer, Path Layer, etc.) and Component Layers, which also consist of simple layers.

To Collapse/Expand the Directory with layers or Artboard, click on the arrow icon to the left of the name.

Collapse/Expand

Click once on the layer name to Select a layer.
To Rename a layer, click on its name one more time.

If you need Hide/Show a layer, just click on the icon with a crossed eye to the right of the layer name. Hold the ? Option key to lock/unlock the layer.

Hide/Show and Lock/Unlock

To start editing text in a text layer. Select a text layer and press T after that put the cursor in the right place in the text and start typing.

You can learn more about Pages, Frames, and Layers from the Overview of the Layers Panel in Official Documentation.

Elements Style

To change the style of elements, such as color or font, use the right panel. Learn all about how to change the layer style from the Layer Property Section.

To change the Background Color, Border or change the Background Image, use the style panel. Click on the color box to select the new color for the item.

Style options

You can also change the color of the element with the help of predefined styles. In the Appearance panel, select a different style for the element.

Changing style of Layer

Adding and replacing Components

Another essential part of Figma Template customization is Components and asset customization. Getting Started with Components and you can easily replace a Components with another one whose sizes coincide.

Was this article helpful to you?