[Figma] Auto layout을 이용한 Material Card 만들기

오늘의 포스팅은 Figma Auto layout을 이용한 Material Card를 만들어 보겠습니다.

아래의 예시는 Angular material card 예제에 나와있는 보기입니다. 아래와 똑같이 만들어 보도록 하겠습니다.

기본 Material Card 내부에는 Padding이 16px이 적용되어 있습니다.

먼저 Frame을 그려주고 Auto layout을 설정한 후에 내부 여백을 16px로 적용을 해주도록 하겠습니다.

그리고 제일 상단에 Card Header 부분을 만들어 보겠습니다. 자세히 보면 3개의 항목으로 구성이 되어 있는것을 볼수 있습니다. 썸네일 이미지와 이름, 종류가 표시 되어 있습니다.

헤더의 내용을 넣을 Frame을 생성하고 썸네일을 표시할 원과 이름, 종류를 표시할 텍스트를 그려줍니다.

그리고 텍스트 크기와 굵기를 설정해주도록 하겠습니다. 위 예제에서 썸네일은 40x40, 이름은 font-size: 20px, font-weight: 500, color: rgba(0,0,0,.87) 종류는 font-size: 14px, font-weight: 400, color: rgba(0, 0, 0, .54)으로 되어 있습니다.

그런 다음 Auto layout을 이용해서 여백과 크기를 맞춰주도록 하겠습니다.

위에 적용을 하지 않았던 이미지와 색상까지 적용을 하면 아래와 같이 나타나게 됩니다.

좌측 Layers 부분은 아래와 같이 되었습니다.

1. 텍스트 사이의 간격을 지정해주기 위해서 텍스트를 먼저 Auto layout으로 묶어서 내부 Layer 사이의 간격을 지정
2. 썸네일과 텍스트 사이의 간격을 지정해주기 위해서 한번 더 Auto layout으로 묶은 후 사이의 간격을 지정

그리고 여기서 Auto layout을 설정한 Frame 내부 Layer의 Resizing 옵션 중에 Fill Container에 대해서 집고 넣어 가겠습니다.

이전에 Auto layout으로 버튼을 만들었던 포스팅에서 Hug contents와 Fixed Width, Fixed Height는 알아봤었습니다. 자세한건 이전 포스팅을 참고해주세요.

Figma AutoLayout을 이용한 버튼 만들기

여기서 Fill Container 옵션은 부모의 크기에 맞춰서 크기를 꽉 차게 하는 옵션입니다. 아래의 예시를 보시면 좀더 확실하게 이해할수 있습니다.

Hug Contents

Fill Containers

위의 예시를 보면 Hug Contents의 경우에는 텍스트의 크기에 맞춰서 크기가 정해져 있는 것을 볼수가 있고 Fill Containers의 경우에는 점선으로 표시된 상위 Layer의 크기에 맞춰서 크기가 정해져있는 것을 볼수 있습니다.

여기서 Hug Contents로 옵션을 설정을 할 경우에는 내부 텍스트 길이에 따라서 헤더의 크기가 계속해서 커지게 되고 Fill Containers로 설정을 할 경우에는 상위 Layer의 크기에 맞춰지고 그 보다 길어지게 되면 줄바꿈이 됩니다.

Hug Contents

Fill Containers

이렇게 Card Header 부분을 다 만들었으면 제일 처음 만들었던 Frame 안에 추가를 해주도록 하겠습니다. 그럼 아래와 같이 나오는 것을 볼수 있습니다. Card Header를  Card 안에 가득 차게 설정을 하기 위해서는 위에서 봤던 옵션인 Fill Containers 옵션을 설정해주면 됩니다.

그런데 Card Header를 Fill Containers로 설정을 했는데도 이와 같이 보이는 것을 볼수가 있을겁니다. 이건 내부 Layer에 Fill Containers가 설정이 되지 않은 Layer가 존재해서 이렇게 보이는 겁니다. 하나씩 확인을 해서 Fill Containers를 지정해주도록 합니다.

Fill Containers를 다 적용을 해주면 아래와 같이 보이는 것을 확인 할 수 있습니다.

그럼 이제 아래의 이미지를 추가해보겠습니다. 이미지를 추가하면 아래와 같이 이미지의 좌우에 여백이 생기는 것을 볼수 있습니다. Card에 기본 여백 16px을 지정을 해서 이렇게 보이는 건데요.

아래와 같이 Frame을 씌워준 다음에 X 좌표를 -16px을 지정해주고 씌워준 Frame의 크기를 크기 - 32px를 해주면 아래와 같이 표시가 됩니다. 이건 CSS의 Negative Margin 처럼 해주시면 됩니다.

이제 마지막으로 아래 설명과 버튼을 표시하는 부분을 만들어보겠습니다.

먼저 Frame을 생성해주고 안에 텍스트와 Auto layout으로 버튼을 만들어서 추가를 해줍니다.(버튼을 만드는 방법은 이전 포스팅을 참고해주세요.)

그런 다음 Auto layout을 이용해서 텍스트와 버튼 사이의 여백을 지정해주고 글자 스타일까지 적용을 해주도록 하겠습니다. 글자 색상은 rgba(0, 0, 0, .87), 글자 크기는 14px, 글자 굵기는 400으로 해주고 글자와 버튼 사이의 간격은 16px, 버튼 사이의 간격은 4px로 설정을 했습니다. 그렇게 설정을 완료해주시면 아래와 같이 보이게 됩니다. 이제 마지막으로 Card에 추가를 해주도록 하겠습니다.

Card에 추가를 하면 아래와 같이 보이는 것을 볼수 있습니다. Fill Containers 옵션을 설정해주도록 하겠습니다.

Fill Containers까지 적용을 하면 아래와 같이 보여집니다. 그런데 예제와 다른 부분이 3가지가 보입니다.

1. 모서리의 라운딩
2. 그림자
3. 하단 버튼의 간격

먼저 Card 모서리 라운딩을 추가 해주도록 하겠습니다. 여기서 라운딩 값은 4로 설정을 해주었습니다.

그리고 그림자 효과를 적용해주도록 하겠습니다. 그림자 효과는 3가지를 지정해줬습니다.

마지막으로 버튼의 위치를 조정해주도록 하겠습니다. X -8px, Y 8px를 설정을 해줬습니다.(위에 이미지와 동일한 방법으로 적용을 해주면 됩니다)

마지막 버튼 위치까지 적용해주시면 아래와 같이 보이는것을 볼수 있습니다. 

다음에 또 다른 포스팅으로 돌아오도록 하겠습니다.

부족한 포스팅 읽어주셔서 감사합니다.

포스팅이 마음에 드셨다면 공감 한번씩 부탁드리겠습니다.