▪️V4 Gamification widget layout
Reference image package for V4:
You will need to provide the package with exactly the same names of files and sizes of the images.
Note: V4 layout does NOT support:
Standalone mode of Inbox
Step by Step reference Videos
We have created these videos for you explaining how the full process works from beginning (using the Figma template) to end (delivering the required documents for implementation):
You can switch the audio to another language by clicking the 'Settings' icon ⚙️ on the video and selecting your preferred language.
How to edit images?
2. How to edit Colors?
3. How to export from Figma GF Widget template?
4. Validating the Skin Package
Saving a local copy of the Figma file
Sharing the skin with the Smartico Team
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
Go to the Editable section
Use CMD/CTRL + click to select the image inside a component (it works similar to the direct selection tool from Illustrator)
Edit or replace the image inside the component (parent) - changes will show live in the Preview Section (children)
⚠️ 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
How to change the font inside Figma?
Open the Variables Panel on the left sidebar inside Figma
Change the "Font Family" variable string to the one you want to use, please make sure you are writing the exact name (better to copy-paste directly from Google Fonts), if you don't write the name correctly the font will not work
Done, all the text layers will be updated with the font you selected.
Please let the Smartico Team know in case you changed the typeface.
Important Notes:
We're only supporting Google Fonts, please make sure you comply with this requirement before delivering the Figma file to the Smartico Team
Make sure to write the name correctly when updating the "Font Family" string variable
Export images
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)
Click Export in the right sidebar
Use default settings (1x PNG)
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
Go to the Validator tool:https://expo.smartico.ai/validate
Choose a version (V3 or V4) - in this case V4
Upload your exported image folder
Check that all files and sizes are correct, this is the message you should expect:
Sharing with the Smartico Team
Please save locally the Figma you just created
After exporting, you will get a “.fig” file like this:
Open a Jira ticket and add the exported Figma inside
Attach archive with the package folder in the Jira ticket (if images should be changed, if not we will use the fall back icons, the ones you can see inside the template)
Last updated
Was this helpful?