[ 피그마 ] 초간단! 표 (테이블 table) 만들기
피그마 작업중 테이블 UI 가 필요하게 되었습니다.
빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다.
해당내용은 오토레이아웃을 응용한 방법입니다.
# 1.네모박스 및 표 셀 만들기
이번 작업을 위해 네모 박스를 하나 그려줍니다.
1) 하단에서 네모 박스 선택
2) 원하는 크기의 박스 만들기
전 220 X 60 사이즈로 만들었습니다.
3) 박스 아웃라인 설정하기
박스를 만들었으니, 박스 테두리를 만들어줍니다.
박스 색상 변경은 Fill 에서 하시면되고, 테두리는 Stroke 에서 하시면 됩니다.
Center 옵션으로 만드시면 됩니다.
4) 텍스트 박스 만들기
텍스트를 클릭후 아까 만든 박스안에 위치를 지정하고, 원하는 텍스트를 입력합니다.
5) 그룹 으로 만들기
그후 만든 영역을 드래그해, 모두 선택한 다음 컨트롤 + G 를 눌러 그룹으로 만들어줍니다.
그룹이 만들어졌습니다.
그후, 쉬프트 + A 를 눌러 오토레이아웃을 추가해줍니다.
마우스 우클릭후 선택해도 좋습니다.
프레임으로 이름이 바뀐걸 확인하실 수 있습니다.
# 2.테이블 헤더 완성
1) 프레임 복제 하기
컨트롤 + C 와 컨트롤 + V 로 우리가 만든 프레임을 복사 한후, 원하는 텍스트를 입력합니다.
2) 오토레이아웃 추가하기
전체 선택 후, 쉬프트 + A 또는 마우스 우클릭 후 Add Auto Layout 을 누릅니다.
오토레이아웃을 추가하면, 좌우 여백이 신경쓰입니다.
3) 여백제거 하기
우측 패널에 40 이라고 되어있는 부분을 원하는 간격으로 수정합니다. 전 0 으로 해보겠습니다.
0으로 변경하니, 좌우 여백이 사라졌습니다.
# 3.테이블 내용 만들기
헤더 복제하기
이제, 우리가 만든 테이블 헤더를 복사 합니다.
복사한 헤더 를 수정해, 데이터 를 만듭니다.
전 Fill 을 하얀색으로 바꿨습니다.
이후, 내용을 입력합니다.
테이블 내용 디자인 변경
여기서 테이블 내용 셀 크기가 너무 큰거 같아, 40 으로 변경했습니다.
오토레이아웃 추가하기
이제, 헤더와 테이블 내용 을 전체 선택합니다.
아까 처럼, 쉬프트 + A 또는 마우스 우클릭 후 Add Auto Layout 을 누릅니다
우측 패널에서 38 이라고 되어있는 부분에서 원하는 만큼 간격을 조정합니다. 전 0 으로 수정하겠습니다.
이제 테이블 내용이 생겼습니다.
원하는 만큼, 테이블 내용을 선택후 복사 붙여넣기 신공을 발휘 합니다
원하는 위치에 정렬되면서 생깁니다.
이제, 값을 조정하고, 일부 디자인을 수정합니다.
완성된 모습
여기까지 따라오신 분들 고생많으셨습니다.
헤더와 셀, 그리고 테이블 바디 내용을 각각 컴포넌트 설정해 사용하시면 더 편리하고 유용하게 사용하실 수있습니다!!
✅ 도움될만한 포스팅
[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기
[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기
이번 포스팅에서는 피그마에서 자주쓰는 단축키를 종류별로 모아보도록 하겠습니다. 단축키를 잘 사용하면 작업시간이 단축되므로 자주쓰이는 단축키는 외워두시는 것을 추천드립니다.피그
it-ability.tistory.com
[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기
[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기
필자는 피그마 무료버전을 사용중입니다. 팀원이 피그마 에서 작업 하는데, 동시작업은 유료버전이 필요합니다.내 로컬 Drafts 로 옮겨도 request access 가 뜨는데, 로컬로 옮긴 후 작업 할 수 있는
it-ability.tistory.com
[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기
[ AI 툴 ] Figma 대체 툴 Creatie 알아보기
Figma 라는 툴을 아시나요? Figma 는 UI/UX 프로토타이핑 작업에 용이한 툴 입니다.요즈음 디자인은 Figma 로 거의 다 대체되어가는 추세입니다. 그런 Figma 에 대항하는 툴이 나와서 소개
it-ability.tistory.com
