본문 바로가기
반응형

전체 글246

피그마 초보 기능 : 쇼핑몰 상품 리스트 만들기, 프레임 컴포넌트, 그룹, 복사 붙여넣기 단축키 피그마 작업을 하다 보면 반복 작업을 빠르게 끝낼 수 있도록 기능을 제공한다. 하나의 프레임 영역에 있는 요소를 모아 그룹화하여 컴포넌트를 생성하면, 쉽게 복사 붙여 넣기로 똑같은 컴포넌트를 쉽게 생성할 수 있다. 반복 작업을 하는 경우 ms에서 많이 사용하는 ctrl+v와 같이 피그마에서도 사용 가능한 단축키까지 알아보자. STEP 1. 프레임 컴포넌트 생성 예시는 쇼핑몰 상품 리스트 처럼 구성을 해봤다. 프레임 그리기 > 안에 사각 그리기 > 사각 안에 이미지 넣기 > 상품 이름, 금액 등 텍스트 넣기 > 모든 요소 그룹화 > 프레임 선택 후 오른쪽 마우스 > Create component 선택 프레임은 먼저 그려도 괜찮고 나중에 그림, 텍스트 등 요소를 다 그리고 마지막에 그 위로 감싸서 그려도 상.. 2024. 1. 17.
피그마 초보 기능 : 플러그인 언스플래쉬 기능으로 이미지 넣기 목업 이미지 넣기, 쇼핑몰 상품 이미지 페이지 만들기 컴포넌트, 인스턴스 끊고 이미지 각각 넣기 피그마로 앱을 디자인할 때, 이미지를 넣어야 하는 경우가 많다. 실제 이미지가 아니더라도 UI 완성도를 높이기 위해 피그마에서 기본으로 제공하는 이미지를 넣어 보기 좋게 디자인할 수 있다. 오늘은 피그마에서 플러그인으로 제공하는 쉽고 빠르고 무료인 언스플래쉬를 통한 이미지 넣기를 함께 해보겠다. STEP 1. Frame 만들기 예시는 쇼핑몰 이미지와 같이 하나의 프레임 안에 이미지와 텍스트가 함께 있는 걸로 만들었다. 사진 속 왼쪽 예제와 동일하게 실전란에 만들어보도록 하자. 상단 툴 모음 > Frame 선택 > Frame 범위 그리기 ※이때, 프레임 범위는 이미지와 텍스트가 들어갈 만큼 크게 잡아주세요. STEP 2. 이미지 넣을 zone 만들기 이미지와 텍스트를 넣을 프레임을 만들었다면, 그 안쪽에 .. 2024. 1. 12.
항공편 저렴하게 예약하기 : 라스베가스 - 칸쿤 여행 항공권 저렴하게 예약하는 방법, 다구간 예약, G마켓, 예약 후기 미국 여행을 준비하여 아주 혼란스러운 시기를 보내고 있는데, 항공권이 이렇게나 비싼지 지금 알았다. 조금이라도 더 저렴하게 항공편을 예약하기 위해 하루 종일 G마켓, 네이버, 스카이스캐너 등의 웹 사이트를 헤매며 검색했던 것 같다. 나와 같은 미국 - 칸쿤 항공편 고민을 하는 분에게 조금 도움이 될까 하여 항공편 예약을 공유하려고 한다. 미국 중에서도 LA, 뉴욕을 경유해 칸쿤을 가는 경우, 항공편이 좀 더 깔끔하다. 한국에서 LA와 뉴욕의 경우 직항편이 많고, LA와 뉴욕 모두 칸쿤 직항 편이 있기 때문이다. 비용도 카드사 할인에 따라 다르겠지만 평균 1인 200만 원 업다운으로 다녀올 수 있다. 하지만 문제는 내가 선택한 라스베이거스! 라스베이거스의 경우 한국에서 출발하는 직항 편이 하루에 몇 편 없.. 2024. 1. 11.
Figma 초보 기능 : text, color 서식 지정해서 스타일 등록하기, 피그마 컬러 스타일 기획을 하다 보면 와이어프레임, 프로토타입을 만들게 되는 경우가 있는데, 필자의 경우 피그마, 액슈어같은 툴을 활용하는 것보다는 PPT를 통한 화면 설계를 주로 했었다. 이직을 준비하며 기획 업무에 있어서 피그마 활용 경험이 얼마나 중요한가를 느끼고 최근 강의를 수강하고 있다. 피그마 강의 복습을 위해 또 나와 같은 피그마 초보들을 위해 강의를 수강하며, 간단한 기능들을 정리해서 하나씩 올려보려고 한다. 오늘 첫 번째로 함께 공부해 볼 피그마 기능은 UIUX 디자인을 위한 Color 디자인 시스템 제작을 위해 컬러 스타일을 등록하기다. 피그마 컬러 스타일 등록 피그마 컬러 스타일 등록하기 쉽게 말해, 자주 사용하는 컬러들을 지정해 두고 필요할 때 클릭 한 번으로 사용하는 기능이다. 피그마로 UIUX를 작.. 2024. 1. 9.
반응형