SY Exp No 3 Manual Content

Practical No. 3: Recreate a given user interface using any open source design tool 


✅ Conclusion 

In this practical, we successfully recreated the given mobile user interface using an open source design tool (Figma). We created a blank project and used Frame, Shapes, and Text tools to design the mobile screen layout. This practical helped us understand how frames act as a container for UI elements and how to arrange components properly with correct alignment, spacing, and visual hierarchy. 

✅ Practical Related Questions (Viva Questions)

✅ 2) Write down the Frame properties (Figma)

Frame properties that can be adjusted in Figma include:

  1. Width and Height (W × H)

  2. Position (X and Y coordinates)

  3. Fill (Background color/image)

  4. Stroke (Border thickness and color)

  5. Corner Radius (Rounded corners)

  6. Effects (Shadow, blur etc.)

  7. Opacity

  8. Constraints (Left, right, center, scale etc.)

  9. Auto Layout (Padding, spacing, alignment, direction) (if applied)

  10. Clip Content (Hide objects outside the frame)

  11. Layout Grid (Grid/columns/rows for alignment)

✅ 3) List frame presets available in it (Figma)

Frame presets available in Figma are:

  1. Phone

  2. Tablet

  3. Desktop

  4. Watch

  5. Paper

  6. Social Media

  7. Figma Community

These presets help to quickly create standard screen sizes for designing.

Popular posts from this blog