[en] Understanding Assets
[en] Depending on the asset format, the UX Designer may upload them in Figma or keep them in their own device. Then, they will export them from the UI kit Figma document, if applicable, and upload them in Studio as assets, so that they are available for implementers to start with the app building process.
[en] Before uploading the assets in Studio, the UX Designer must make sure that the assets are saved in their devices following specific use patterns related to the assets naming and format. Generally, they first save the assets in their own devices. Refer to the sections below to learn more.
[en] Assets patterns
[en] The names of resources are similar to the names of styles. Below is a list of best practices applied to the names of assets exported from Figma and then uploaded into Studio.
Importante
[en] Assets names must not include special characters, the letter ñ, spaces or capital letters. Names must be separated with _ and the specific naming defined for each type of asset.
[en] Write the name in English and be as descriptive as possible with regard to the asset purpose.
[en] Write the name in lowercase letters and underscores must be used to divide words. Avoid the use of articles or prepositions. An example of this mistake would be: icon_on_star.
[en] Use the BEM format convention, which includes the Block (Studio entity or component), the Element (action or flow in which it is included) and the Modifier (status or color). A correct example would be: icon_scan_primary_off.
[en] Export Assets from Figma
[en] In the Figma document, click the asset you need to export.
[en] Go to the right panel and then to the Export section. Select the size and check that the format is applicable for the type of asset you are exporting.
[en] Click Export [assetname]. In the modal that opens:
[en] Check that the asset name follows the naming rules explained above. If not, modify the name.
[en] Select the folder where you want to save the file in your device.
[en] Click Save.