Design your event in Figma

  • Updated

Biz_Enter.png

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.

Screen_Shot_2020-10-23_at_8.16.56_PM.png

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.

Screen_Shot_2020-10-23_at_7.41.31_PM.png

3. Design screens using the mockups provided

Screen_Shot_2020-10-23_at_7.48.45_PM.png

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

Screen_Shot_2020-10-23_at_7.54.10_PM.png

 

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!

 

Feel free to reach out to us at support@hopin.com in case you have questions or need assistance.

Was this article helpful?