반응형 피그마 초보 기능3 피그마 초보 기능 : Inspect 인스펙트 패널 안보일 때 설정하는 방법, 개발자에게 디자인 코드 전달하기 피그마는 기획자, 개발자, 디자이너가 협업하기 좋은 프로토타이핑툴로 서로 업무 공유와 내용을 실시간으로 공유할 수 있다. 특히나 피그마에서 디자인된 내용을 소스 코드로 변환하기 쉽도록 Inspctor 인스펙터 기능을 제공하는데, 오늘 이를 함께 알아보려고 한다. 인스펙트 패널 디자인을 소스 코드로 변환하기 쉽도록 정보를 제공하는 것으로, 아래의 화면 예시로 확인하면 쉽다. 피그마 플러그인 기능을 통해 삽입한 로그인 하단 유튜브 모양의 아이콘을 클릭하고 오른쪽 패널 Inspect를 선택하니, 레이아웃과 스타일을 한 번에 보여준다. 이러한 내용들은 피그마에서 자동으로 빠르게 확인 가능하도록 기능을 제공하며, 개발자에게 수월한 업무를 가능하게 도와준다. 인스펙트 패널 안보일때? 간혹 피그마를 처음 사용하는 분.. 2024. 1. 22. 피그마 초보 기능 : 플러그인 언스플래쉬 기능으로 이미지 넣기 목업 이미지 넣기, 쇼핑몰 상품 이미지 페이지 만들기 컴포넌트, 인스턴스 끊고 이미지 각각 넣기 피그마로 앱을 디자인할 때, 이미지를 넣어야 하는 경우가 많다. 실제 이미지가 아니더라도 UI 완성도를 높이기 위해 피그마에서 기본으로 제공하는 이미지를 넣어 보기 좋게 디자인할 수 있다. 오늘은 피그마에서 플러그인으로 제공하는 쉽고 빠르고 무료인 언스플래쉬를 통한 이미지 넣기를 함께 해보겠다. STEP 1. Frame 만들기 예시는 쇼핑몰 이미지와 같이 하나의 프레임 안에 이미지와 텍스트가 함께 있는 걸로 만들었다. 사진 속 왼쪽 예제와 동일하게 실전란에 만들어보도록 하자. 상단 툴 모음 > Frame 선택 > Frame 범위 그리기 ※이때, 프레임 범위는 이미지와 텍스트가 들어갈 만큼 크게 잡아주세요. STEP 2. 이미지 넣을 zone 만들기 이미지와 텍스트를 넣을 프레임을 만들었다면, 그 안쪽에 .. 2024. 1. 12. Figma 초보 기능 : text, color 서식 지정해서 스타일 등록하기, 피그마 컬러 스타일 기획을 하다 보면 와이어프레임, 프로토타입을 만들게 되는 경우가 있는데, 필자의 경우 피그마, 액슈어같은 툴을 활용하는 것보다는 PPT를 통한 화면 설계를 주로 했었다. 이직을 준비하며 기획 업무에 있어서 피그마 활용 경험이 얼마나 중요한가를 느끼고 최근 강의를 수강하고 있다. 피그마 강의 복습을 위해 또 나와 같은 피그마 초보들을 위해 강의를 수강하며, 간단한 기능들을 정리해서 하나씩 올려보려고 한다. 오늘 첫 번째로 함께 공부해 볼 피그마 기능은 UIUX 디자인을 위한 Color 디자인 시스템 제작을 위해 컬러 스타일을 등록하기다. 피그마 컬러 스타일 등록 피그마 컬러 스타일 등록하기 쉽게 말해, 자주 사용하는 컬러들을 지정해 두고 필요할 때 클릭 한 번으로 사용하는 기능이다. 피그마로 UIUX를 작.. 2024. 1. 9. 이전 1 다음 반응형
