​
Left Panel for Design Edits

The Left Panel serves as the primary control hub for editing styles, layouts, and components within your design. Here’s how you can use it effectively:

  • Style Customization: Modify properties like background color, gradients, shadows, and borders to enhance UI elements.
  • Typography Adjustments: Change font styles, sizes, weights, line heights, and letter spacing to create readable and aesthetically pleasing text elements.
  • Layout Control: Use flexbox, grid, and block-based positioning to arrange elements and ensure responsive behavior.
  • Padding & Spacing: Fine-tune margins and paddings for proper element alignment and spacing.
  • Quick Selection & Editing: Click on any element to immediately modify its properties, making it easier to iterate on designs quickly.

The Left Panel plays a key role in streamlining your workflow, ensuring all essential editing tools are within reach.

​
Right Panel for Layer View

The Right Panel is crucial for organizing your design elements effectively. This panel provides a hierarchical Layer View, helping you manage elements and groups with ease:

  • Element Hierarchy: Displays all elements in the current design, allowing you to organize them efficiently.
  • Locking & Hiding Elements: Temporarily hide or lock elements to prevent accidental edits.
  • Grouping & Ungrouping Elements: Nest UI components together to maintain structure and consistency.
  • Component Organization: Differentiate between reusable components and individual elements, ensuring a consistent design system.
  • Drag & Drop Ordering: Easily rearrange elements by dragging layers to reorder them.

By effectively using the Right Panel, you can maintain a structured and organized design, especially when working with complex layouts.

​
Functions

​
1. Grouping Items

Grouping elements together helps in maintaining organization and efficiency within the design process. Here’s why Grouping is essential:

  • Batch Editing: Apply styles, spacing, or transformations to multiple elements at once.
  • Component Structuring: Group elements to create reusable components, making design updates easier.
  • Draggable Groups: Move entire sections of the design without affecting individual elements.
  • Nested Groups: Helps in layering elements within a structured hierarchy.

By grouping items strategically, you can significantly speed up the design process while keeping elements structured and reusable.

​
2. Adding & Editing Text

Typography plays a critical role in UI/UX design. With Shaper, you can fine-tune text elements in multiple ways:

  • Font Selection: Choose from a variety of fonts, including system fonts and custom uploads.
  • Font Customization: Adjust font weight, size, letter spacing, and line height for readability.
  • Text Alignment & Justification: Control text placement within containers.
  • Text Wrapping & Truncation: Manage long text by setting constraints such as single-line truncation or multi-line wrapping.
  • Text Effects: Apply shadows, outlines, and gradients to enhance typography visually.

Efficient text management ensures that the UI maintains clarity, readability, and design consistency across different sections.

​
3. Reordering with Arrow Keys

Shaper provides keyboard shortcuts to speed up the design workflow. One of the most useful shortcuts is reordering elements using arrow keys:

  • Arrow Keys (↑↓←→): Nudge elements by 1 pixel for fine adjustments.
  • Shift + Arrow Keys: Move elements in increments of 10 pixels for quicker repositioning.
  • Cmd/Ctrl + Arrow Keys: Send elements forward or backward in the layer hierarchy.

Using these shortcuts allows designers to fine-tune positioning without needing to drag and drop manually, improving workflow efficiency.

​
4. Absolute Positioning

Shaper offers absolute positioning for elements, allowing precise placement within the design canvas:

  • Fixed Placement: Position elements exactly where they need to be, independent of surrounding content.
  • Z-Index Management: Adjust layer stacking to bring elements forward or push them backward.
  • Pixel-Perfect Control: Define exact X and Y coordinates for elements to ensure accuracy.
  • Responsive Overrides: Use absolute positioning selectively for specific screen sizes without affecting the global layout.

Absolute positioning is particularly useful for floating elements, overlays, and precise UI alignments.

​
5. Artboard Resizing

To ensure designs are adaptable across various screen sizes, Shaper allows resizing of artboards dynamically:

  • Custom Dimensions: Set specific width and height values for the artboard.
  • Presets for Responsive Design: Choose from predefined screen sizes like mobile, tablet, and desktop.
  • Auto-Scaling Elements: Resize artboards while keeping UI elements proportionally adjusted.
  • Viewport Adjustments: Preview how your design appears across different resolutions.

By resizing artboards effectively, designers can simulate real-world device conditions and create responsive UI layouts.

​
6. State Management (Light, Dark, Hover, Active, Pressed)

Shaper allows you to define interactive states for UI elements:

  • Light & Dark Modes: Toggle between color schemes to support different user preferences.
  • Hover State: Define how elements behave when a user hovers over them.
  • Active State: Modify button or link appearances when clicked.
  • Pressed State: Display different styles for elements that remain pressed.

By managing states properly, you can create an interactive and accessible user experience.

​
7. Image Handling (Cover, Fit, Fill, etc.)

Shaper provides extensive image handling capabilities, allowing you to:

  • Fit, Fill, and Cover Images: Control how images are displayed within containers.
  • Aspect Ratio Locking: Maintain proportional scaling of images.
  • Image Cropping & Masking: Adjust images dynamically within frames.
  • Drag & Drop Image Uploads: Easily replace placeholder images with actual content.

Efficient image handling ensures that UI elements remain visually consistent and optimized for different screen sizes.

​
8. Shadow Editing

Adding shadows enhances depth and realism in UI design. With Shaper, you can:

  • Adjust Shadow Blur & Spread: Modify softness and intensity for subtle or bold shadows.
  • Customize Shadow Colors & Opacity: Match shadows with brand identity.
  • Layer Multiple Shadows: Stack multiple shadow effects for complex designs.

Shadows help in creating a more visually appealing and structured UI.

​
9. Component vs. Non-Component Differentiation

Understanding components versus individual elements is key to maintaining design efficiency:

  • Components: Reusable design elements (e.g., buttons, modals, input fields). Changes to a component reflect across all instances.
  • Non-Components: Unique elements that do not need replication across the design.

By effectively differentiating between components and non-components, designers ensure consistency and reduce manual updates.

​
10. Selecting & Resizing Artboards

An artboard acts as the primary workspace for your design. In Shaper, you can easily manage artboards to fit various design needs:

  • Creating an Artboard:
    • Click New Artboard from the design panel or use the shortcut (A).
    • Choose from predefined artboard sizes or create a custom-sized artboard.
  • Resizing an Artboard:
    • Manually Resize: Drag the edges of the artboard to adjust dimensions dynamically.
    • Enter Exact Dimensions: Specify width and height in pixels for precision.

​
11. Breakpoints for Responsive Design

Breakpoints allow you to create designs that adjust dynamically based on screen size, ensuring an optimal experience on different devices.

  • Default Breakpoints in Shaper:
    • Mobile (375px - 768px)
    • Tablet (768px - 1024px)
    • Desktop (1024px and above)
    • Custom Breakpoints (Manually define additional breakpoints if needed)