피그마 썸네일형 리스트형 피그마 공부2. 오토 레이아웃을 활용한 리스트 만들기 피그마를 경험해 본 바로 가장 유용하게 쓰이는 기능이 오토 레이아웃이고, 버튼도 버튼이지만 반응형 화면 디자인 작업 시, 레이아웃을 잡아줄 때 아주 유용하게 활용할 수 있습니다. 화면 너비와 길이 바 바뀌어도 구성되어 있는 요소들이 비율대로 같이 늘어나고 줄어듭니다. 이번엔 관리자 웹페이지 리스트 화면 예제로 함께 만들어보면서, 리스트에 활용하는 방법을 익혀두도록 해봐요. 리스트 정렬하기 1. 정렬할 리스트의 텍스트를 입력해 줍니다. 2. 텍스트를 선택하여 오토 레이아웃을 설정해 줍니다. Shift를 누르면서 여러 가지의 텍스트 요소를 함께 선택해 주고, Ctrl(Command) + A를 누르면 오토 레이아웃이 생성됩니다. 오토 레이아웃이 생성되면 하단 중간에 생성이 됐다는 알림 문구가 나옵니다. 3. .. 더보기 피그마 뽀사기 1. 오토레이아웃 기능 소개 피그마 오토 레이아웃이란? 반응형 웹처럼 레이아웃을 원하는 데로 고정시켜 화면을 늘리거나 줄였을 때 원하는 디자인이 보이게 할 수 있으며, 버튼이나 중복된 리스트 디자인을 만들 때 유용하게 사용된다. 부모와 자식의 두 개의 레이아웃이 있을 때만 오토 레이아웃 적용이 가능하다. 한 개의 요소에는 적용할 수 없다. 이점 명심하시길.. 부모 요소와 자식 요소 두 개의 레이어를 잡고 우 클릭 > Add Autolayout 또는 단축키 shift + A로 만들 수 있습니다. 여기서 단축키 외우고 가시겠습니다. shift + A 오토 레이아웃의 설정값 간략 설명 1 - 정렬 방향 화살표 선택된 오토 레이아웃 프레임 내부의 요소들이 세로로 배치되어 있으면 세로 화살표로 표시되고 가로방향으로 배치된 경우 가로 화살표가.. 더보기 피그마 디자인 가이드 하루만에 작업 가능하다고? 피그마 초보자도 할 수 있다. 피그마 디자인 가이드.. 이렇게 쉽다구?? #피그마 #피그마활용 #figma #uidesign #designguide 피그마를 사용하기 전 피그마의 장점을 들었을 때, 디자이너가 사용하기 좋은 도구라고 생각했습니다. 아무래도 디자이너 출신인 사람이 만들었을 가능성이 다분.. 기존에 쓰던 엑스디 제플린 조합을 합친 것만으로도 너무 좋다고 생각했는데 디자인 기능이 엑스디에 비해 훨씬 많이 추가되었다고 해서 그런 말들만 듣고 무작정 피그마로 갈아타기로 확정 후.. (따라줘서 고맙다 팀원님) 암튼 기능을 100% 활용도 해보지 못한 상태에서 프로젝트를 시작하기 전에 UI 디자인도 개선 할 겸 가이드부터 꼼꼼하게 새로 제작해보자 하는 마음으로 시스템 가이드를 작업하게 되었다. 시스템.. 더보기 이전 1 다음
