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

Figma에서 AutoLayout은 손쉽게 레이아웃이나 버튼을 만들수 있게 도와주는 기능이라고 생각을 했습니다. 이번 포스팅에서는 안에 텍스트에 따라서 가변하는 버튼을 만들어 보겠습니다. 먼저 Figma의 Rect와 Text를 이용해서 직사각형 버튼을 만들어 보겠습니다. 1. Figma Rect를 이용해서 직사각형을 그려줍니다. 2. Figma Text를 이용해서 텍스트를 입력해줍니다. 3. Text 크기에 맞춰서 버튼의 크기를 조절해줍니다. 여기서는 좌우 여백 16px에 높이 36px인 버튼을 만들어 보겠습니다. 임의로 그린 크기 사각형과 텍스트를 보면 좌우 여백이 17px, 22px 높이가 58px인 것을 확인 할수 있습니다. Rect의 크기와 Text의 위치를 조정해서 원하는 크기와 위치를 맞춰줍니..

아래의 플러그인들은 제가 직접 사용해보고 유용했던 플러그인들입니다. 계속해서 업데이트 할 예정입니다. 1. Figma Walker 피그마 Frame을 쉽게 찾을 수 있도록 도와주는 플러그인입니다. 검색하고 선택을 하면 해당 Frame의 위치로 이동을 하고 화면 중앙에 보여줍니다. [Figma Walker Plugin] Figma - Figma Walker | Figma Walker is a new launcher for Figma. You can take any actions you want from a single input ... Figma Community plugin — Figma Walker is a new launcher for Figma. You can take any actions you ..