Design your event in Figma

Are you comfortable using design software, or do you work with a designer? You can give your Hopin event your brand's look and feel using Figma.

NOTE: advanced branding options are only available for our Pro, Business, and Enterprise plans.

1. First duplicate the Figma file below

Duplicate this Figma file here.

2. Design the components in the file with your brand colors

Hopin provides text inputs you can change the color values in the event dashboard. If there aren't matching inputs, you can use the custom CSS field in the end of the page.

3. Design screens using the mockups provided

4. Once you're done designing, you can see the layers' name corresponding to the text fields

5. Add Hex codes to your event dashboard

1. Check the text input label by looking at Figma layer name
2. Copy the layer name
3. Go to your design dashboard (customization < design)
4. Search the label (cmd/ctr + F)
5. Copy hex code from Figma
6. Enter hex code to the corresponding input
7. Don't forget to click save button at the end!