Skip to main content

📐 Shapes

Shapes are fundamental elements used to create containers and organize content within your application. AppStruct offers a variety of basic shapes that can be customized to enhance your app's design and layout.

Available Components:​

  • Rectangle
  • Circle
tip

All Shape Components are used in the same way

1. Select and Add a Shape:​

  • Choose your desired shape from the Shapes category.
  • Drag and drop the shape onto the Canvas, or click on it to automatically place it on the screen.
  • Resize by dragging the edges or by setting the size using percentage values.

2. Set and Customize:​

  • Left Toolbar:
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
  • Right Toolbar:
    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Quick Tips​

  1. Keep It Simple: Use shapes as clean containers to organize content without overwhelming your design.
  2. Responsive Design: Adjust shapes for different screen sizes using the “Set Styles for Specific Screen Sizes” option.
  3. Customize Consistently: Maintain a consistent style (colors, borders, shadows) across all shapes for a unified look.
  4. Interactive Elements: Leverage the “Add Action” feature to make shapes interactive, enhancing user navigation.
  5. Easy Resizing: Utilize percentage-based resizing for flexible layouts that adapt to various devices.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].