Admin loginSmartico.aiTheAffiliatePlatform.com

V4 Gamification widget layout

Reference image package for V4:

https://libs.smartico.ai/gf/widget_images_v4.ziplibs.smartico.ai

You will need to provide the package with exactly the same names of files and sizes of the images.

How to work with the Figma file

  • Sections in the file

1* Editable Section - This is the only section you can edit 2* Changing the Variables - explains where to find variables/styles 3* Not mandatory in the skin - in case you would like to change the visuals for the leaderboard empty status please include this image when selecting the images for exporting from the “Editable section” 4* Preview Section - Locked by default, shows how your changes will look

  • Edit images

  1. Go to the Editable section

  1. Use CMD/CTRL + click to select the image inside a component (it works similar to the direct selection tool from Illustrator)

  2. Edit or replace the image inside the component (parent) - changes will show live in the Preview Section (children)

    1. ⚠️ By changing the images inside the components in this 'Editable section', you will also be able to see how they change inside the widget screens (in the 'Preview' Section).

  • Use high-quality images or vectors to avoid pixelation

  • If you want to keep Smartico’s default images, no changes are needed, but you will still need to provide us with the file

  • Edit colors

Colors can be updated in the Styles panel on the right sidebar in the Replace images section

Overall please avoid:

  • Detaching, swapping, or adding styles or components.

  • Editing colors that are set as plain values (only styles can be edited).

Any of the actions described above might result on our team declining the changes you made and requesting you another delivery

  • Export images

  1. Select all components in the Replace images section (plus the component inside the “Not mandatory in the skin” section if you made changes in this one and would like to export it too)

  2. Click Export in the right sidebar

  3. Use default settings (1x PNG)

  4. Click Export layers and save the images - all the components selected, setting them to 1x PNG, and then clicking on the “Export“ button

  • Validate the components exported

  1. Go to the Validator tool:https://expo.smartico.ai/validate

  2. Choose a version (V3 or V4) - in this case V4

  3. Upload your exported image folder

  4. Check that all files and sizes are correct, this is the message you should expect:

  • Sharing with the Smartico Team

  1. Open a Jira ticket and add the Figma link inside

  2. Attach an archive with the exported folder from the previous step in the Jira ticket

  3. In Figma - share the Figma file with: [email protected] (Permissions is: “Can Edit“) -> Do not email it to this address

Last updated

Was this helpful?