Figma에서 Autolayout을 적용을 한 뒤에 Autolayout이 적용된 Frame위로 다른 Layer을 마우스로 끌어서 옮기게 되면 자동으로 Autolayout이 적용된 Frame 안으로 들어가게 되는게 이렇게 되면 Autolayout이 적용된 것과 별개로 따로 디자인을 해서 겹쳐놓고 싶을때 아주 불편힙니다😱 이때 스페이스(Space)를 누르고 Layer를 이동을 시키면 Frame 안으로 들어가는것을 방지할수 있습니다. 아래와 같이 빨간색 사각형 두개가 Autolayout으로 되어 있는 상태에서 파란색 사각형을 빨간색 사각형과 겹쳐지게 그냥 마우스로 드래그해서 옮길 경우 아래와 같이 파란색 사격형이 Autolayout Frame 안으로 들어가게 됩니다. 이때 파란색 사각형을 잡은 다음 스페이스를..

오늘의 포스팅은 Figma Auto layout을 이용한 Material Card를 만들어 보겠습니다. 아래의 예시는 Angular material card 예제에 나와있는 보기입니다. 아래와 똑같이 만들어 보도록 하겠습니다. 기본 Material Card 내부에는 Padding이 16px이 적용되어 있습니다. 먼저 Frame을 그려주고 Auto layout을 설정한 후에 내부 여백을 16px로 적용을 해주도록 하겠습니다. 그리고 제일 상단에 Card Header 부분을 만들어 보겠습니다. 자세히 보면 3개의 항목으로 구성이 되어 있는것을 볼수 있습니다. 썸네일 이미지와 이름, 종류가 표시 되어 있습니다. 헤더의 내용을 넣을 Frame을 생성하고 썸네일을 표시할 원과 이름, 종류를 표시할 텍스트를 그려줍..