SaFi Bank Space : App Icons Image Assets

Our Assets are stored under GCS Bucket. Please follow the folder structure based on asset type.

Bucket Name:

Icons

https://www.figma.com/file/D4aezb42Jd62fImjDbR9uo/SaFi---UI---Library?node-id=11%3A61

Icons must be stored as SVG. And it must be stored like this gcs_bucket/icons/icon_name.svg. We use script to generate the icon name and its enum name and path. Make sure you’re using the same name as FIGMA, but snakecase.
Scripts:

• rename_script.sh

How To:

1. Download all icons in Figma

2. 

   Extract the archive, and put rename_script inside and execute it.

3. It will create ui_kit folder contains all renamed icons. And upload these icons to /icons to GCS bucket.

4. The script would have output like this:

   

5. Copy the output and reorder it ascending, and paste it to SafiIconName enum.

Images

Images can be stored as SVG or PNG. If we use PNG, make sure we upload the 1x, 2x and 3x resolution. And it should be stored like this:

Make sure you’re using the same name as FIGMA, but snakecase.

• SVG: images/image_name.png

• PNG:

  • 1x: images/image_name.png

  • 2x: images/2.0x/image_name.png

  • 3x: images/3.0x/image_name.png

Avatars 32

Follow same rule as Images and bellow rules:

Make sure you’re using the same name as FIGMA, but snakecase.

• SVG: images/avatars32/image_name.png

• PNG:

  • 1x: images/avatars32/image_name.png

  • 2x: images/avatars32/2.0x/image_name.png

  • 3x: images/avatars32/3.0x/image_name.png

Avatars 48

Follow same rule as Images and bellow rules:

Make sure you’re using the same name as FIGMA, but snakecase.

• SVG: images/avatars48/image_name.png

• PNG:

  • 1x: images/avatars48/image_name.png

  • 2x: images/avatars48/2.0x/image_name.png

  • 3x: images/avatars48/3.0x/image_name.png

Avatars 64

Follow same rule as Images and bellow rules:

Make sure you’re using the same name as FIGMA, but snakecase.

• SVG: images/avatars64/image_name.png

• PNG:

  • 1x: images/avatars64/image_name.png

  • 2x: images/avatars64/2.0x/image_name.png

  • 3x: images/avatars64/3.0x/image_name.png

Merchants

Follow same rule as Images and bellow rules:

Make sure you’re using the same name as FIGMA, but snakecase.

• SVG: images/merchants/image_name.png

• PNG:

  • 1x: images/merchants/image_name.png

  • 2x: images/merchants/2.0x/image_name.png

  • 3x: images/merchants/3.0x/image_name.png