모카 스터디/UX&UI 디자인[Figma] 썸네일형 리스트형 실전 예제 2. 와이어 프레임 만들기 기초 작업하기: 사이트맵과 로우파이 스케치 1. 홈 화면 / 카테고리 화면 쿠팡이나 배달의 민족의 경우 이미 대부분의 사용자들이 이 어플이 무슨 기능을 하는지 알고 있지만 현재 제작하는 어플리케이션은 사용자들이 어떤 기능을 하는지 모르기 때문에 앱 소개 컴포넌트를 넣었다. 2. 상세 화면 / 구매확정 화면 3. 피그마로 워크플로우 만들기 Arrow Auto 라는 플러그인 사용 더보기 텍스트,피커,그라데이션,이미지와 마스크, 이펙트(그림자) 텍스트 만들기 문단의 가로, 세로 길이에 맞혀서 텍스트 오브젝트의 길이를 자동으로 맞혀 준다. 글꼴 및 사이즈 및 글자사이의 간격(행단) 조절 가능 피커, 그라데이션 단축키 i 를 누르면 해당 오브젝트 픽셀의 색상번호를 알수 있다. 이미지와 마스크 기능 또는 폴더의 드래그 앤 드롭으로 이미지 가져올 수 있다. 추가적인 팁으로 이미지를 가져 왔을 떄는 비율을 고정할체 사이즈를 조정해야한다. 포토샵 만큼은 아니지만 기본 적인 포토샵을 할 수 있다. crop 기능으로 사진을 필요한 부부만 짜를수도 있다. 마스크 : 어떤 도형에 이미지를 입힌다. 이미지 레이어가 도형 레이어 보다 앞에 있어야 한다. 이펙트 이해하기 그림자에 대한 설정 blur : 농도를 낮추면서 그림자 크기를 키운다. spread : 농도를 .. 더보기 정렬,분배,Tidy up, 그리고 Smart Selection 정렬 및 분배 아래 설정을 통개 각각의 도형을 일정한 간격으로 분배할 수도 있다. Smart Selection 순서를 바꾸고 싶은 도형들을 그대로 드래그 앤 드롭으로 변경할 수 있다. Tidy up 행렬 느낌으로 가로와 세로 정렬을 한번에 가능 더보기 트랜스폼 및 오브젝트 이동 관련 기능들 더보기 도형 만들기 및 우측 패널들 기능 익히기 비율 맞춘 상태로 도형 크기 를 변화 하려면 오른쪽 constrain proportion 클릭 라운드 값 부분 적으로 주기 가능 설정 레이어에 대한 설정(숨기기 포함)을 줄수도 있지만 그다지 많이 사용하지 않고 따로 투명도를 주는 방법을 주로 사용한다. 레이어의 색상과 투명도도 설정할 수 있고 여러가지 색상을 설정하고 선택하여 비교해 볼 수도 있다. 또한 + 버튼 왼쪽을 누르면 자주 사용하는 색상을 등록 할 수 있다 외곽의 색상도 설정가능 드롭 쉐도우 그림자 기능을 설정 가능 더보기 피그마 작업환경 이해하기 + 플러그인/템플릿 무료 버전으로도 계정 주인 외 1명 더 협업이 가능하다. 작업 공간의 계층 단축키 설정가능 플러그인/템플릿 필요한 플러그인을 검색해서 바로 사용 가능 구글에서 여러 템플릿을 검색 해서 사용 가능(매우 유용) 더보기 비트맵과 벡터 및 레이어 피그마는 벡터 기반의 소프트웨어 이다. 부분적 수정에 아주 용이하다. 더보기 피그마 점유율 비교 Figma Where teams design together Figrma helps teams create, test, and ship better designs from start to finish. invisoin은 프로토타이밍 전문 툴이다. 한마디로 Figma 는 All-In-One ! 더보기 이전 1 2 3 다음
