Figma project preparation

Figma design files can be set-up as templates in CreateTOTALLY by using the CreateTOTALLY StudioCraft tagging app. This is available from the Figma app store.

Preparing a Figma design file to be used as a template involves structuring the project in a logical, organised fashion, as well as tagging the elements that will be customisable.

Each Figma file can contain multiple assets e.g multiple banner ads. These will be exported as an individual files.

File preparation

Getting started

There are a few limitations in how Figma design files can be set-up to be templates in CreateTOTALLY.

• Each file has a max file size of 500MB
• All files can only have 1 page, which needs to be called “Page 1”
• Only Figma design files can be used to create a template, not Figjam or Figma slides

Organising your document

Figma allows you to organise your artwork in a hierarchy by nesting frames. This hierarchy gives the document structure and allows you to organise related elements together, making document management easier. It also allows you to use layout features such as auto-layouts.

To make customising the template easier within CreateTOTALLY, we display variable elements in the hierarchy set-up within the Figma document. So, for example, if your artwork has modules, these could be set-up in a folder structure. Each folder can be tagged as a container, which will be displayed to users while they are customising the template. In the screenshot below, a hierarchy will be displayed showing Feature 01 and Feature 02 within a Hero folder, within a PDP folder.

We display variables in the order that they appear within Figma. When organising your document ensure the layers appear in the order that will make the most sense for users to complete them, which is normally in the order they appear in the artwork e.g Headline, then subheading, then body copy.

File tagging

Tagging a Figma document allows you to give elements in your document a purpose in CreateTOTALLY. The following can be tagged:

1. Variable elements - images and text can be marked as a variable. These can be components or individual image/ text layers. Only variable elements will be available to customise within CreateTOTALLY
2. Output items - frames that contain the design for each of your individual ads or outputs can be marked as an output item
3. Container - frames that you want to be visible to users to help them customise the template can be marked as a container e.g you could mark the name of a module as a container and then all of the variable elements will be displayed within this named element for users customising the template
4. Section - sections can be used to group output items together visually and/ or to include output items contained in them in the same sub-folder when exporting

🎯 Variable elements

A variable element is something that can be customised by users within CreateTOTALLY. It can be 1 of 3 types:

1. Image frame - an individual image
2. Text frame - an individual text element
3. Component - If your text or image repeats across multiple output items, we recommend setting it up as a component and tagging the component. This means that users will only need to make 1 selection to customise the component and it will automatically update all instances. Find out more about components in Figma here

To apply a tag, simply select the layer or layers you wish to tag. The plugin will identify what type of layer it is. To apply a tag, set the dynamic toggle to on and click apply. Layers that have been tagged will have an 🎯 emoji added to their name in Figma, allowing them to be easily identified.

Text variables

In addition to tagging a text frame as a variable you can also set the font to scale. This means that if more text is entered than will fit in the text layer, the font size will shrink until it fits. Multiple text elements can be set to sync together, ensuring font sizes are consistent across design elements.

In order for this to work, its important that there is a size set either on the text layer itself, or on an auto-layout container that it is part of. This can be done by:

• Text layer - set to:
  • Fixed width and height
  • Auto height and type settings set to truncate with a max number of lines set
• Auto-layout container - the height should be set based on text truncation, with a max number of rows. The width can either come from:
  • Max width set on text layer
  • Text layer being set to fill container (this will take its width from the auto-layout container and its properties)

You can test that your text layer is set-up correctly within Figma, but adding more text to your text layer. It should grow to a fixed size.

🔷 Containers

Containers allow you to visualise Figma frames during customisation. This is useful to identify the hierarchy of elements in your project and makes customising a Figma template easier. In the screenshot below, PDP, Hero and Feature 01 have all been tagged as containers.

⭐️ Output items

An output item is the root frame that contains all your ad artwork. Your Figma file can contain as many output items as you like, for example different sizes of banners and social ads could all be included in the same template. When users are customising a Figma template, they are able to remove output items they don’t require.

Note - you can tag a frame as both an output item and a container, which might be useful if you have specific variable elements in each of the output items.

Auto layouts

Using Figma’s auto layout feature within your design file adds even more flexibility to the template. If your design has elements that sometimes aren’t required, using an auto layout allows them to be hidden during customisation, with the remaining elements being re-positioned. To find out more about auto layouts in Figma, we recommend their support article.

When customising a Figma template, elements that aren’t required can be hidden by clicking on the visibility eye.