Figma Templates

Voulez enables you to turn Figma files into image templates. Here’s how this works.

Figma plugin

To create a new Figma plugin you’ll need to use the official Voulez plugin.

When you are running it for the first time you have to provide your email address and password – those are the same that you are using for the web application.

The plugin then scans all the frames of the currently open document and presents you with an overview of them. Choose the ones you want to turn into templates by selecting them.

To create a new Figma plugin you first need to have an organization. If you don’t have one, please create one first. When creating the template, you have to select the organization you want to create the template for.

After you clicked on “Create template” the plugin opens your browser from where you can continue creating the template.

Defining parameters

Now comes the interesting part! You can select layers in your frames that should be parameterized.

There are two types of parameters:

• Preset parameters
  Those are specific to one preset, respectively to one Figma frame. If you only have a single frame you’re using then this is most likely the way to go.
• Global parameters
  Parameters that are being used for multiple presets can be defined as global parameters. For Figma templates, you first have to create the global parameter and then, for each preset, choose the layer from the dropdown menu and assign it to the global parameter.

You can choose text and image layers to be parameterized. For text layers you’ll be able to choose between Text, Date, Time, and Date-Time value types. When using one of the date types you can provide a format.

For image types, you can also choose a fixed aspect ratio. The user filling out the form will then be able to crop their uploaded image.

If you are done with defining all the parameters, you can click on the “Create template” button.

Missing fonts

If you open the newly created template in a playground, you may be presented with an error message that informs you of missing fonts.

You can upload all the fonts you’re using in your Figma file through your company’s settings page. Go to fonts, click on “Choose font file”, and select all the font files you need. After they are uploaded you should be able to make use of your template.

Fonts from Google Fonts are automatically available and don’t need to be uploaded.

Generating images

If you open the playground, you’ll be able to try out your template and generate images.

If you haven’t already done so, you can assign the template to a customer so that they will be able to create new projects based on it.