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
- Examine your card design. Check if you’re using a rectangle or image as the background.
- 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
- 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.
- Apply width constraints such as “Fill container” to ensure the child items resizes along with the card
- You have successfully created a responsive card for use in various layouts