Figma (5) 썸네일형 리스트형 핵심 기능으로 빠르게, 피그마 실무 50강사전(5) 1. 프로토타이핑디자인한 작업물을 실제 구현된 모습과 유사하게 만드는 과정. 즉, 모든 인터렉션을 반영하는 과정협업을 원할하게 하고 불필요한 수정을 줄이기 위해 실행한다.위와 같이 프로토타입이 실행될 디바이스를 선택할 수 있다. 프로토타이핑 거는 법1. 프레임을 드래그하여 연결하기 2. 오른쪽 Action 탭 이용하기 인터렉션은 프레임 사이에만 기능하므로 프로토타이핑 구현 예정인 경우 초기 구현에서 프레임 단위로 구현해야한다.우측 presentation 모드, Figma Mirror(앱) 등에서 프로토타입을 시현할 수 있다. 2. 프로토타이핑 액션 종류 트리거 -> 워크(액션) -> 결과 로 진행된다. Open/Swap/Close overlay : 팝업이 열기/바꾸기/닫기Navicate to : 화면 이.. 핵심 기능으로 빠르게, 피그마 실무 50강사전(4) 1. 컴포넌트 한번 제작한 기능을 다시 재사용할 수 있도록 원본을 중심으로 여러 복사본을 관리할 수 있도록 하는 것일관성 있는 디자인이 가능하다.Master component(원본) - Insance(복사본) 요소 클릭 후 Create component 버튼을 클릭하면 component가 된다.(component 관련 객체는 특정 아이콘이 뜬다.) master componen를 복사 하면 Instance를 만들 수 있다. 생성한 component를 왼쪽 Assets 탭에서 확인 및 바로 사용할 수 있다. 2. Master Component 와 Instance Master Component를 수정하면 Insatnce에도 적용된다.단, Instance 요소를 수정한 후에는 Master Component에서 .. 핵심 기능으로 빠르게, 피그마 실무 50강사전(3) 1. 오토 레이아웃레이아웃 요소를 프레임으로 묶어 간격, 상하좌우 마진을 조절해주는 기능Component 와 함께 사용할 수 있다. Auto 레이아웃이 적용된 객체를 복사 붙여넣기 하면 마진을 함께 조절할 수 있다.Ungroup으로 auto layout을 해제할 수 있다. Auto 레이아웃의 방향, 간격, contents의 위치 등을 설정할 수 있다.하나의 방향의 auto layout을 적용할 수 있으므로 여러 모듈을 합쳐서 사용한다.간격에 Auto 라고 작성하면 프레임 크기에 따라 자동으로 간격이 변경된다.Alignment로 모듈의 위치를 조절할 수 있다. Auto layout이 걸리면 자유롭게 조절이 안되기 때문!auto layout 설정과 상관없이 위치를 옮기고 싶다면 Frame 안의 요소를 클릭 .. 핵심 기능으로 빠르게, 피그마 실무 50강사전(2) 1. 위치와 크기 속성1. 정렬 따로 그룹화를 하지 않아도 shift를 누른채로 정렬하면 함께 정렬된다.오른쪽 탭이 아닌 캠버스에서도 정렬 설정이 가능하다.가운데 원을 선택하면 정렬을 유지하면서 객체들의 순서를 바꿀 수 있다. 2. 위치 및 크기수를 입력할 때 사칙연산도 가능하다.모서리 둥글기 설정ios의 모서리 이미지 문제를 처리하기 위해 Corner smoothing 을 처리할 수 있다.Frame의 Clip content 기능을 이용해서 Frame 밖의 Content 를 자를 수 있다.자른 Content는 사라지지 않고 숨김 처리 된다. * X, Y 부분을 더블 클릭 하면 소수점을 정리할 수 있다.(오름차순)또는 Snap to pixel grid 기능을 이용하면 자동으로 pixel 단위로 떨어지게 된.. 핵심 기능으로 빠르게, 피그마 실무 50강사전(1) 피그마 기본 공부하자~ 1. 피그마 썸네일 만들기피그마는 따로 썸네일을 지정하기 않으면 작업 화면이 기본적으로 보인다.썸네일은 1920x600 크기 안에 1600x960의 safe zone안에서 작업한다.먼저 썸네일을 제작할 프레임을 만든다. 프레임 선택 후 오른쪽에서 프리셋을 선택할 수 있다.이 위에 도형으로 썸네일 제작 공간을 설정한다.*shift+R 로 룰러북 설정 가능도형을 이용해 크기 설정 후 룰러불을 좌우에 드래그하여 설정하면 위와 같이 빨간 줄이 생성된다. 이제 이 안에서 작업!우클릭 후 썸네일 지정하면 2. 피그마 인터페이스Appearance : 모드, 투명도 설정Fill : 도형의 색상Stroke : 도형의 선Effect : 도형 효과Export : 작업물 내보내기3. 피그마 툴 바 .. 이전 1 다음
