How to edit an eCommerce Figma Sites Template

5 hours ago
2 min read

Responsive Design Guidelines

Our Figma Site template is created with a responsive approach, ensuring an optimal user experience across different devices. The design is structured into three primary breakpoints:

Mobile (320–799px): Designed for small screens, including smartphones. This layout prioritizes touch-friendly navigation, streamlined content, and vertical stacking to enhance readability.
Tablet (800–1279): Optimized for medium-sized screens, such as tablets. This layout provides more space for content while maintaining accessibility and usability. Elements may be rearranged to utilize the available width efficiently.
Desktop (1280+px): Tailored for larger screens, including laptops and desktop monitors. This layout allows for multi-column designs, larger images, and additional UI elements that improve the user experience on wider screens.

These breakpoints are based on common device resolutions and industry best practices. They ensure that the design remains functional and visually appealing across various screen sizes, adapting seamlessly from mobile-first layouts to fully extended desktop versions.

How to use components

Figma Site template uses a component-based approach, ensuring consistency and easy customization. Key components include buttons, cards, and images, all designed to be scalable across different screen sizes.

Find and adjust all component settings in the right sidebar under 'Properties' and 'Variants' for quick edits and customization.

Understanding Auto Layout

This template is built entirely with Auto Layout, making it flexible and easy to adjust. Here’s how you can work with it:

Resize elements: select a frame or component and drag its edges; elements inside will adjust automatically.

Using Styles: Colors & Typography

This template uses Global Styles for both colors and fonts, making customization fast and consistent.

Colors:

All colors are saved as Color Styles.
To change a color: Select an element, go to the right-hand panel, click on the color, and choose a new one from the Styles list.
Updating a style will apply changes across the entire design.

Typography:

To change typography: Select a text layer, go to the right-hand panel, and apply or edit a style.
Editing a Text Style updates all instances of that style throughout the design.

Set Your File Thumbnail

You can set any frame of the project as a thumbnail for easy visual access from your Figma dashboard.

Publishing

Keep Auto Layout intact unless necessary to detach for custom adjustments.
Use styles and components to maintain design consistency.
Duplicate frames before making major edits to keep a backup of the original design.