Smart Layout

Ressources

• Resizing Symbols with Smart Layout
• Resizing constraints
• Creating a Symbol

Smart Layout

With smart layout, you can optimize your symbol and turn them into responsive component that automatically resize to fit the content.

Smart Layout automatically adjusts the padding and spacing between layers in a Symbol when an override changes its size, once it has been set up. Changing an override in a Symbol's instance will resize the Symbol automatically.

Responsive Component

With Smart Layout, you can optimize your symbols and turn them into responsive components that automatically resize to fit their content. Instead of manually resizing each symbol instance, let Smart Layout take care of it. Go to the symbol master and choose its layout properties in the inspector.

Create a Symbol

If you create a new symbol, you can choose the layout settings using this drop-down menu. You must designate a horizontal or vertical layout and the direction. Smart Layout will use the spacing and padding between the layers of the symbol to maintain consistency as you change the overlays and adjust the size of the symbol instances.

• Select a group, Artboard, or a selection of layers, and click "Convert layers into a reusable Symbol" in the toolbar or press "Command+Y" on your keyboard.
• Choose whether your symbol resizes horizontally or vertically. You must define the direction from which it resizes and click “Create.”

Manually resize

It would be best if you did not manually resize instances of a symbol with Smart Layout properties applied to them, as this may cause an unexpected appearance. To manually resize such a symbol instance, detach it or remove the Smart Layout properties from the symbol source.

Add Constraint

You can apply resizing constraints to layers of a symbol with smart layout properties. It can be helpful if you want a specific layer to ignore the layout settings of the symbol it is part of. For example, you can use resize constraints to fix the size of a layer and prevent it from resizing along with a symbol instance with a horizontal or vertical layout.

Adjust Content on Resize

When you resize an Artboard, you can control how its layers respond. You can choose to keep everything in place and at its original size or resize all the content. Additionally, you can use resizing constraints applied directly to the layers to control their behaviour further.

Resizing Option

Resizing constraints in the Inspector allows you to control how layers behave when the Artboard, group, or Symbol they're a part of is resized. It ensures that the contents maintain their shape and proportion when scaled. It's useful when designing for multiple device sizes or desktops. The available Resizing constraints options are Pin to Edge, Fix Size and Preview.

• Pin to Edge allow you to choose the edges of a parent on which your layer will be pinned when resizing, click on the edges you want to activate.
• Fix Size lets you determines whether a layer's height and width should stretch or stay at a fixed size when the parent is resized.
• Preview shows how the controls you select affect your Layer’s behavior.

Button

Creating a button is an essential part of designing user interfaces. A button allows users to interact with your application by triggering an action when clicked or tapped.

• Create a rectangle of 106 by 44, which will serve as your base. Take the "play" icon and put it in a 44 by 44 transparent frame. Group it and name it Play. Then put the icon on the rectangle and align it to the left. Press "T" and write "Play" using medium and size 15. The spacing between the icon and the text is 8.
• Fill color black 50%, overlay, border linear white black 30% witdh 1 , background blur 10 ou 5

Top Card

A card is a UI design element used to display key information or highlight a specific item or content. Also, it draws attention to the most important or relevant information within a data set. This can be achieved through visual cues such as color, typography, and imagery.

• Create a rectangle of 359 by 280, and fill it with an image. Add border, the Linear colour white and colour black, with 2. Add the button symbol, duplicate, and change the text to Shuffle and the icon.
• Press on T, write My Favorite Songs, bold, size 32, and the colour white. Add everything in a group and name Top Card.

Creating Layout

A well-designed layout can improve the user experience and make it easier for users to access and use an application's features. A layout should be flexible and adapt to different screen sizes and orientations to be used effectively on various devices.

Medium Layout

This medium-sized layout is perfect for displaying albums. Its optimized size and arrangement allow users to easily view and interact with their favourite albums, making for an enjoyable browsing experience.

• Create a rectangle of 145 by 130, corner radius 20. Fill, colour black 40%, and Overlay. Border starting colour: white 10%, ending colour: black, 10%, center and width 1. Name the layer Base. Create another rectangle of 129 by 88,corner 12, fill it with an image. Place on top of the base and the spacing is eight from the top, right and left. Add a text, regular, 15, white. Spacing is eight from the left, top and bottom. Put everything in a group and name by Layout Medium.

Large Layout

The large layout perfectly showcases complete artist profiles, including their name, image, and music. This layout provides ample space for displaying the music title, making it easy for users to quickly find the music they are looking for. With a play button, users can listen to their favourite tracks with just one click.

• Duplicate the medium layout, select the image , and pin the object on the left, top and right edges in the resizing option. Select the text and pin the object to the left and bottom. Select the right edge and drag to resize until you hit 168 by 162. Rename by Large Layout.
• Change the image size to 146 by 98. Duplicate the text and place it at the top of the other text. It's going to be the title of the song. Then, select the text at the bottom. It will be the singer's name, change the size to 13 and reduce the opacity to 60%. Duplicate the Play button. The spacing is 29 from the bottom and 24 from the right.

Small Layout

The small layout is ideal for showcasing individual artists or singers. Its compact size allows for quick and easy access to essential information about the artist, such as their name and image. Whether browsing on a mobile device or a desktop, the small layout provides a clear and concise presentation of the artist's profile.

• Duplicate the medium layout, delete the rectangular shape, and replace it with an 80 by 80 circle. Fill it with an image. Select the base of the layout, and resize it until you reach 90 by 121. The spacing between the circle and the rectangle is five from the right, left and top.

Light Mode

We will create light versions of the three layouts by duplicating them and creating symbols for each layout to simplify the design process for both Android and desktop by selecting either the dark or light version, maintaining consistent layouts.

• Change the background color to white 30%. Add border, color black 30%, Overlay, center and width 1.
• Select the play button, change the color background to white 50%, and overlay. Add the border color black 10% and change the color icon to black.

Conclusion

With these tools, you can create interfaces that adapt to different screen sizes and devices while maintaining a consistent look and feel. By utilizing Smart layout and Constraint, you can save time and effort in the design process while still delivering a high-quality product.