💡피그마로 디자인 시스템 세팅하기: ③반응형 레이아웃 만들기 : 드디어 ‘피그마로 디자인 시스템 세팅하기’ 마지막 글이다. 파운데이션과 컴포넌트를 세팅했다면 잘 만든 재료로 화면을 구성하는 일만

💡피그마로 디자인 시스템 세팅하기: ③반응형 레이아웃 만들기 : 드디어 ‘피그마로 디자인 시스템 세팅하기’ 마지막 글이다. 파운데이션과 컴포넌트를 세팅했다면 잘 만든 재료로 화면을 구성하는 일만 남았다. 오늘은 피그마의 레이아웃 툴인 Autolayout과 Constraint를 활용해 반응형 UI 디자인 방법을 설명할 예정이다. 두 기능이 의미 있는 이유는 이를 통해 개발자의 코드와 유사한 원리로 화면을 기획할 수 있기 때문이다. 디자인이 실제로 잘 구현되기 위해서는 디자이너가 어떤 체계와 의도로 화면을 구성했는지 개발자에게 명확하게 전달할 수 있어야 한다. 레이아웃의 크기나 콘텐츠의 변화에 따른 모든 케이스를 화면으로 전부 그리거나 글로 설명하지 않아도 Autolayout과 Constraint 기능으로도 충분히 할 수 있다.