Building a responsive card

Learn how to build a responsive card that can be used in various layouts and resizes according to its parent container

1. Examine your card design. Check if you’re using a rectangle or image as the background.

2. If you’re using a rectangle or image - you should instead use a frame for the background. You can copy and paste the properties such as Fill, Stroke, Border radius from the rectangle to the frame.

Apply autolayout and constraints

1. Ensure that autolayout is applied to the card. You may need to first group up and apply autolayout to inner elements so as to ensure that your design is preserved.

2. Apply width constraints such as “Fill container” to ensure the child items resizes along with the card

3. You have successfully created a responsive card for use in various layouts