Create a Template with Figma & AI

In this tutorial, we will explore how to use an AI coding agent to build a full-fledged Dise template based on a design in Figma. The template will be based on the TypeScript Framework and have full access to all features and functionality described here in the Dise One Template SDK. The coding agent will create properly structured template project that can be worked on with further coding, tested and debugged in the Player Simulator, and committed to Git.

By the end of this tutorial, you will have a Dise template with six visual variants, optional media, configurable image fitting, simulator test content, and a deployable CMS ZIP file.

Prerequisites

This tutorial assumes a working Template SDK development environment, with the TypeScript Framework, Player Simulator, and Sample Projects installed, such that you are able to build and run sample templates in the simulator. The tutorial Use the Player Simulator describes how to set this up.

The folder structure of your main “templates” working folder should look something like this:

The MyTemplates folder is where the coding agent will create your template projects, so make sure to create this folder.  

For this tutorial, we are also going to need two sub-folders in MyTemplates:

Fonts - containing any font files needed by our templates, the agent will find the relevant font files and include them in the deployment

MockContent - containing a handful of videos and pictures to be used as media when testing the template in the Player Simulator

Download the Dise coding agent file here:

Place this file in the root of your main “templates” working folder.  This agent was made for ChatGPT Codex.

VSCode with the Codex extension was used to create this tutorial.

If you use Claude Code, rename the file to CLAUDE.md and use the Claude Code extension in VSCode

As this tutorial is about using Figma, you will need to install the Figma plugin in Codex or Claude Code and give it access to your Figma design file.  It is, however, possible to use other design tools which support plugins/MCP, or you can simply upload design mockups.

Step-by-step tutorial

Prepare your template design in Figma, taking care to have a clean layer structure and descriptive naming of the layers.  In our example, the designer has created both landscape and portrait versions, in three different color schemes, and two variants (with and without media content):

We want to combine the two variants and the three color schemes into a single template, giving a total of six different combinations (we will only do the landscape version now).

Since the template has a media element (picture or video), we use the SimpleMediaTemplate boilerplate (see Boilerplate Templates), included as part of the Sample Projects repo.

We can now write the main prompt to create the project and fully implement the template design and functionality:

I would like to create a new Dise Template called "Tutorial", based on the SimpleMediaTemplate boilerplate.

It should have the following template fields:

1. Title (Text, optional)

2. Text (Text Area, optional)

3. Color (Select, with the following choices: Light, Dark, Green)

4. Media (Content, optional)

5. Fit (Select, with the following choices: Contain, Cover)

The design comes from Figma. Note that the template combines two different layouts depending on whether or not the Media field is populated or not. Without Media, the Title and Text boxes are wider and positioned more to the right.

There are also three different color schemes, controlled by the Color template field, giving a total of six different variants.

The Fit template field controls how the media should be resized to fit its container.

Here are Figma designs for each of the six variants:

Light color, no media: @https://www.figma.com/design/…..

Dark color, no media: @https://www.figma.com/design/…..

Green color, no media: @https://www.figma.com/design/…..

Light color, with media: @https://www.figma.com/design/…..

Dark color, with media: @https://www.figma.com/design/…..

Green color, with media: @https://www.figma.com/design/…..

Font files can be found in the MyTemplates/Fonts folder

The folder MyTemplates/MockContent contains some pictures and videos to use when creating the mock data playlist for the Player Simulator

The Figma links are copied from the MCP inspector in Figma:

After asking some clarifying questions, the agent will create and build the project, create a mock playlist, and run it in the Player Simulator. It will also build a deployment zip file that can be uploaded into the Dise CMS, where it will look like this:

And finally, the icing on the cake:

I would now like to add a little bit of animation to the text elements:

Animate the Title and Text elements from 0% to 100% opacity over 0.7 seconds. At the same time, move them horizontally from 200 px to their final positions. Start the Title immediately and delay the Text animation by 0.2 seconds