Components are like parents and instances are like children.

Hold command key while changing frame size to bypass constraints.

Alt + Control + B = Detach an instance

Frames - The children adapts when the parent changes

Auto layout - The parent changes when the children changes

Responsive Design

• Loads the same website on all devices.
• It resizes according to the viewport.
• No. of UI Elements same
• One change reflects everywhere
• Performs better with SEO
• You can’t have every element on smaller devices.
• Takes more time to load since all components are expected to be there.
• Made using constraints

Adaptive Design

• When you can afford to lose some features on mobile.
• Most landing pages use Responsive Design
• Loads faster too because it downloads only the required code.
• Understand the difference between Desktop Web App, Mobile Web App, Native Mobile App & Native Desktop App
• Made using Auto layouts

General Facts

• When Making for web start from 1280px
• When starting for iOS start from iPhone 8
• Make responsiveness on 1280, 1440 and 1920
• Beyond 1920 add white spaces at sides.
• Use responsify Plugin to quickly check responsiveness