Figma layout 컨스트레인트 기능(constraint)

constraint: 제약(이 되는 것), 제한, 통제

 

로그인 화면은 서비스 첫인상에 크게 영향을 주기 때문에 디바이스별로 어떻게 레이아웃을 구성할지 많은 고민이 필요합니다.

컨스트레인트는 적용할 요소가 프레임 안에 들어가 있어야 하므로, 프레임을 선택해 컨스트레인트를 적용해 주세요.

 

옵션 left&right 는 양쪽으로 늘리고 줄어드는 옵션이다.

컨스트레인트를 무시하고 프레임 크기를 줄이려면 cmd를 누른 채 줄이면 된다.

 

컨스트레인트 기능을 설정하고

프레임 크기를 변경해보면 자동으로 어떻게 표시되는지 

바로 바로 확인할 수 있다!

멋지네!

애플 워치도 있다!

이거 빨리 뭔가 웹페이지를 만들어서 

각자의 디바이스에 맞게 변하는 레이아웃을 만들어보면 재미있겠다!

 

옛날에는 브라우저마다

기능이 올바르게 작동하는지 신경쓰면서 

하나하나 테스트를 했는데

figma로 디자인하면 수정도 엄청 쉬울꺼 같고

디바이스마다 표현되는것도 html5 표준에 맞게 자동으로 적용이 되는것 같은데...

아닌가?

어쨌든 좋은 툴이다!

좋다! 좋아!!!

:)