피그마(3)
-
[피그마] 왕초보 오토레이아웃(Auto layout)으로 리스트(list) 만들기
이전 글에서는 오토레이아웃으로 버튼 만드는 방법을 간단하게 만들었다. 오토레이아웃 패널에 대해 간단하게 알 수 있었는데 이번에는 응용 버전으로 리스트를 만들어봤다. 2023.08.01 - [Product 디자인] - [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하 null-piglet.tistory.com 먼저 프레임으로 배경을 깔고 날짜 텍스트, 본문 텍스트, 구분 짓는 선 총 3개의 레이어를..
2023.08.17 -
[피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기
어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하거나 쉬프트+A 오토 레이아웃으로 만들어주면 오른쪽 패널에 오토레이아웃이 활성화 된다. Horizontal layout/Align center 상태이며 버튼 텍스트를 바꿔주면 center 기준으로 버튼이 자동으로 늘어남 Align 선택시 텍스트가 고정되기 때문에 이 부분을 활용해서 추후에 반복되는 리스트UI 작업이 가능하다. 패딩값(Padding) 알아보기 파란색 빗금쳐진 부분이 상단 Padding이며 마우스 오버시 확인이 가능하다 마우스로 조절 할 수도 있고 하단 이미지처럼 패널에서 아이콘 눌러 수..
2023.08.01 -
[피그마] 배리어블(Variable) 기능으로 라이트/다크모드 스위칭하기
그레이 컬러는 머티리얼 디자인의 그레이 컬러코드를 가져와서 컬러파렛트 작업 고고! 그리고 다크테마를 위해 그대로 반전시켰다. 사실은 맞춰보면서 다크테마 컬러를 수정해야 하지만 일단 테마가 어떻게 나오는지 확인 후 작업하기로 컬러 파렛트를 만든 후 원하는 색상을 선택 한담에, Fill에서 Style 버튼을 누른 후 라이브러리 창에서 플러스 버튼을 누른다. 그러면 배리어블 탭이 등장하는데 크리에이트 버튼을 눌러 색상 하나하나 이름 지어주면서 지정을 해준다. 그럼 이렇게 로컬 배리어블에서 확인 할 수 있음 (팀 공유는 아직 모르겠다 나도 공부중 ㅠㅠ) 나는 900~50까지 10단계 컬러에 숫자를 부여해주고 Name에서 light/dark 이름 지어줬음! 그리고 모든 디자인을 영역으로 묶어준 후(또는 오토 레이..
2023.07.12