UX UI

[실전 피그마] - PART 7

주니빙 2024. 4. 5. 18:51

💡 맥 이용자는 Alt > Option , Ctrl > Command 로 바꿔서 생각하기

PART 7 피그마 활용 팁 익히기

    • 섹션 생성하기 : Shift + S or 툴 바에서 색션 도구 선택하기
    • 섹션 삭제하기 : 섹션을 선택하고 그룹 해제(Ctrl + Alt + G) or Ctrl + Backspace
    • 개발 준비 완료 상태 → 초록색 라벨로 나타남
    • ‘Remove ready status’ 를 선택해 다시 이전 상태로 되돌릴 수 있음
    • 캔버스 영역을 구분하는 섹션 이해하기

 

자주 사용하는 속성들을 스타일로 만들어 사용하기

피그마에서 스타일로 만들 수 있는 속성 : Color, Text, Effect, Grid

  • 컬러 스타일 만들기
    1. 컬러 스타일로 만들 오브젝트 선택
    2. Fill 패널에서 ‘Style’ 아이콘 클릭
    3. [Libraries] 탭의 ‘+’ 아이콘을 클릭
    4. Style 패널의 Name에 색상 이름을 입력
    5. <Create style> 버튼을 클릭

 

  • 컬러 스타일 적용하기
    1. Fill 패널이나 Stroke 패널의 ‘Style’ 아이콘을 선택
    2. Libraries에서 원하는 컬러 스타일을 선택해 적용

 

  • 스타일 관리하기
    1. 캔버스 여백을 클릭하고 오른쪽 사이드 바의 [Design] 탭에서 저장된 컬러 스타일을 확인 가능
    2. Shift 누른 채 여러 스타일을 선택
    3. 마우스 오른쪽 버튼을 클릭
    4. Add new folder를 실행하여 스타일을 그룹화해서 관리 가능

 

  • 텍스트 스타일 만들기
    1. 스타일로 만들 텍스트를 선택
    2. Text 패널에서 ‘Style’ 아이콘을 클릭
    3. [Text styles] 대화상자가 표시되면 ‘+’ 아이콘을 클릭
    4. Name에 스타일을 입력
    5. <Create style> 버튼을 클릭하여 텍스트 스타일 생성

 

  • 이펙트 스타일 만들기
    1. 이펙트가 적용된 오브젝트 선택
    2. Effects 패널에서 ‘Style’ 아이콘을 클릭
    3. Effect styles 에서 ‘+’ 아이콘을 클릭
    4. Name에 스타일 이름을 입력
    5. <Create style> 버튼을 클릭하여 이펙트 스타일을 생성
  • 그리드 스타일 만들기
    1. 스타일로 만들 그리드가 적용된 프레임을 선택
    2. Grid 패널에서 ‘Style’ 아이콘을 클릭
    3. Grid styles에서 ‘+’ 아이콘을 클릭
    4. Name에 스타일 이름을 입력
    5. <Create style> 버튼을 클릭하여 그리드 스타일을 생성

 

팀 라이브러리 기능 알아보기

  • 팀 라이브러리 배포하기
    1. 컴포넌트와 스타일이 있는 파일 열기
    2. 왼쪽 사이드 바에서 Assets 패널의 ‘Libraries’ 아이콘을 클릭
    3. Current file의 <Publish> 버튼을 클릭

❗ 아마 라이브러리를 진짜 배포하기 위해선 Professional 계정으로 결제 필요

 

작업 효율을 높이는 필수 플러그인 살펴보기

  • 플러그인 실행하기(검색 or 저장)
    • 리소스 도구(Shift+I)를 선택 → [Plugins] 탭에서 원하는 플러그인을 검색해서 사용 

 

리소스 도구 또는 커뮤니티에서 ‘Save’ 아이콘을 클릭하여 원하는 플러그인을 저장

오른쪽 버튼 클릭 → Plugins → Saved plugins

 

  • Unsplash - 고품질의 무료 이미지 제공 플러그인
    • 캔버스로 해당 이미지를 불러오기 가능
    • 프레임이나 사각형과 같은 오브젝트에 이미지 삽입 가능
  • Lorem ipsum - 문자열 생성 플러그인(영문)
    • 의미 없이 나열된 단어나 문장으로 구성된 문자열을 생성
  • 한글입숨 - 문자열 생성 플러그인(한글)
    • 로렘 입숨의 한글 버전, 로렘 입숨과 같은 기능을 한국어 문자열로 사용
  • Faker - 특정 카테고리 문자열 생성 플러그인
    • 특정 카테고리(이름, 이메일, 나라 등)에 맞는 문자열을 생성하는 플러그인
    • 로렘 입숨보다는 더 구체적인 정보가 표현되는 문자열을 원할 때 사용
  • Mapsicle - 지도 생성 플러그인
    • 지도의 크기와 스타일 옵션을 변경하여 원하는 형태로 지도를 커스터마이징 가능
  • Map Maker - 지도 생성 플러그인
    • Mapsicle과는 달리 구글 맵을 기반으로 활용
    • 국내 지도를 생성할 때 한글이 표시되어 직관적인 장점을 지님
    • 직접 탐색하는 기능은 제공X → 원하는 위치를 찾으려면 주소를 검색
  • Blobs - 추상적인 도형을 무작위로 생성하는 플러그인
    • 얼룩무늬 형태의 도형을 무작위로 생성
  • SkewDat - 도형 왜곡 플러그인
    • 도형을 비스듬히 왜곡하는 플러그인
  • Arc - 텍스트 문자열을 둥글게 만드는 플러그인
    • Bend Strength 슬라이더를 조정하여 글자가 휘는 방향과 강도를 설정 가능
  • Arrow Auto - 플로우 생성 플러그인
    • 프레임들을 자동으로 연결하여 플로우를 생성할 수 있는 플러그인

 

피그마 활용 팁 10가지

  • 속성 복사, 붙여넣기
    1. 속성을 복사할 오브젝트를 선택
    2. Ctrl + Alt + C 를 눌러 속성을 복사
    3. 속성을 붙여넣을 오브젝트를 선택
    4. Ctrl + V 를 누르면 복사한 속성이 적용

  • Fill, Stroke, Effects 패널의 경우 해당 패널의 왼쪽 끝부분을 선택하면 해당 속성만 선택 가능
  • 해당 패널이 선택된 상태에서 Ctrl + Alt + C 를 누르면 단일 속성만 복사하여 붙여넣기 가능
  • 최하위 오브젝트 손쉽게 선택(Deep select)하기
    • 여러 개의 레이어가 겹친 경우 Ctrl을 누른 채 클릭하여 최하위 요소를 손쉽게 선택 가능
  • 섬네일 설정하기
    1. 섬네일을 설정할 프레임 선택
    2. 마우스 오른쪽 버튼 클릭
    3. Set as thumbnail을 실행

 

  • 오브젝트 간격 확인하기
    • 간격을 확인할 오브젝트를 선택하고 Alt 누르기
      • Alt를 누른 상태로 마우스를 이동하면 간격을 확인할 오브젝트를 변경 가능
      • Alt를 누른 채 Ctrl을 함께 누르면 최하위 오브젝트와의 간격을 확인 가능
  • 부모 - 자식 레이어 쉽게 전환하기
    • 부모 레이어를 선택한 상태에서 Enter를 누르면 자식 레이어를 모두 선택 가능
    • 자식 레이어를 선택한 상태에서 Shift + Enter 또는 \ 를 누르면 부모 레이어로 이동 가능
  • 모든 레이어 닫기
    • Alt + L 을 눌러 열려있는 모든 레이어를 닫기 가능
  • 숫자 목록 적용 취소하기
    • 피그마 텍스트 도구에서 ‘1. 이나 ‘1)’을 입력하고 spacebar를 누르면 자동으로 숫자 목록이 적용
    • 단축키 Ctrl + Z 를 누르면 숫자 목록이 해제되고 기존의 문자열을 그대로 사용 가능
  • 마지막으로 닫은 탭 열기
    • Ctrl + W : 작업 중인 파일 닫기
    • Ctrl + Alt + T : 마지막으로 닫은 탭을 다시 열기
  • 새로 고침하여 파일 최신화하기
    • 파일 탭에서 마우스 오른쪽 버튼을 클릭하고 Reload Tab을 실행
  • 대체하여 붙여넣기
    1. 교체하고 싶은 오브젝트를 복사
    2. 교체하려는 오브젝트를 선택
    3. 마우스 오른쪽 버튼을 클릭
    4. Paste to replace를 실행

 

  • 스타일을 유지하면서 텍스트 내용만 붙여넣기
    1. 웹 브라우저나 다른 툴에서 텍스트를 복사
    2. 이미 스타일이 정리된 텍스트를 더블클릭하여 블럭으로 지정
    3. Ctrl + Shift + V 를 누름