In figma my design is very smooth, but after building it in bravo studio it becomes very…

Hello again, Muhammad.

These steps can help you to maintain crisp, high-quality visuals in your Bravo app:

1. Use High-Resolution Images in Figma
   Start by placing images in your Figma design at 2x or 3x resolution. Avoid shrinking oversized images manually in Figma—place them at their final display size to ensure Bravo doesn’t scale them up, which often results in blurriness.

2. Match Frame Dimensions to Target Devices
   Design for standard mobile widths such as 375px (iPhone X) or 360px (typical Android). Keep your image layers at their actual pixel sizes. Avoid relying heavily on Figma’s auto-scaling features for key image assets.

3. Use SVG for Icons and Logos
   SVG files scale cleanly on all screen types and are supported in Bravo. Ensure that your icons are vector paths in Figma, and if needed, export them as SVG before bringing them into your project.

4. Minimize Bravo’s Image Compression
   Bravo may compress image assets by default. To avoid this, consider using dynamic images fetched from a remote API. These assets retain their original resolution and won’t be compressed by Bravo.

5. Configure Image Fill Settings Properly
   When placing an image inside a container or shape in Figma, use the “Fill” option set to “Fit.” This prevents unwanted stretching or cropping that can reduce quality. Avoid settings like “Tile” or “Stretch” unless specifically needed.

6. Avoid Using JPEG for UI Elements
   JPEGs often introduce compression artifacts, especially for images with text or detailed edges. Use PNG or SVG for UI components to preserve clarity.

7. Test on Physical Devices
   Bravo Studio previews can sometimes display images with reduced fidelity. Always preview your app in Bravo Vision on an actual device to check how assets look under real conditions.