make a name tag

Published on September 17, 2025

This activity was designed as the introduction for a Figma Make Vibe Coding workshop I hosted in partnership with Friends of Figma NYC in Fall 2025.

image.png

IMG_6128.jpg

Live recording

Follow the tutorial below while watching the live recording.

From the workshop

You can peek at student work from the workshop in this FigJam and this one.

image.png

Create a name tag in Figma Make to introduce yourself. You can interpret name tag however you want to. Think of it as a little player or trading card that highlights your interests, personality, and style.

Get started

  1. The fastest way is to open Figma and create a new tab by doing Cmd T. Figma Make is the last option.

    image.png

  2. Start with a prompt like this.

    Make a digital name tag [in style descriptor] for me. My name is Elizabeth! I run a design school called "design is a party."

Prompts to try

Now, it’s time to experiment. Here are some prompts that you can use to get started:

1. Explore a specific visual style

Make it look 8-bit.

Make it look like Windows XP.

Make it look like a vintage Mac OS style.

Make it look Y2K.

2. Explore the typography.

Make the text look like the Stars Wars intro sequence.

Animate my name like a wave.

Animate the text in a circle.

3. Create interactions and hover states.

Add a back to the name tag. When I hover, it should rotate.

Make confetti shoot out of the name tag when I click on it.

4. Use an image for inspiration

Upload an image for inspiration. Pull inspiration from inspiration images. You can paste images directly into the Make chat.

Be inspired by this image.

5. Refine your design

Make it look less ugly.

Make the design 100x more subtle.

Make it look like something a designer at [Insert company name] would love.

Share your work

  1. Publish your Figma Make site by clicking Publish.

    image.png

  2. Click Publish. It might take up to a few minutes depending on your internet connection and project complexity.

    image.png

  3. Copy the URL that appears next to URL. This is the link you can share with the public.

    image.png

  4. If you ever make changes and want the live version to be updated. Press the Update button.

How to customize the URL

  1. Click the settings icon located next to the Publish button.

    image.png

  2. Navigate to Domains in the left menu.

    image.png

  3. Click Edit domain button.

    image.png

  4. Press Save to update the domain.

    image.png