지니의 작업실

여행가. 그림.글.작가. IT컨설턴트

IT 10. 피그마 기초세팅 가이드: 초보자를 위한 필수 설정과 팁

웹기획을 하면서 피그마로 화면정의서 작성을 했었다. 그때는 다양한 기능등을 익혀가면서 사용하면서 피그마의 편리함에 감탄했는데, 오랜만에 다시 사용하려고 하니 어떻게 이용했는지, Asset은 어떻게 세팅했는지 가물가물하다. 이에 이번에 다시 작업하면서 피그마 기초세팅을 정리를 해두었다. 다음에도 이걸 보면 기억나지 않을까 한다.

피그마 기초세팅

  1. 계정 생성 및 로그인
    • Figma 공식 웹사이트에서 회원 가입 후 로그인igma 공식 웹사이트에서 회원 가입 후 로그인
    • 웹 브라우저 또는 데스크톱 앱에서 실행
  2. 새 프로젝트 및 파일 생성
    • Figma 대시보드에서 “New File” 클릭
    • “Drafts” 또는 “Team Projects” 설정
    • 프로젝트 이름 설정
  3. 프레임(아트보드)설정
    • 좌측(또는 하단) 툴바에서 “Frame(F)” 선택
    • 오른쪽 패널에서 프레임 크기 설정
      • 데스크톱 : 1440px * 1024px
      • 태블릿 : 768px * 1024px
      • 모바일 : 375px * 812px
    • 여러 프레임을 추가하여 반응현 구조 설계
  4. 그리드 시스템 설정
    • 프레임 선택 후, 오른쪽 패널에서 “Layout Grid” 클릭
    • “+” 버튼을 눌러 새로운 그리드 추가
    • 컬럼 설정
      • 데스크톱 : 12컬럼 (Margin 120px, Gutter 24px)
      • 태블릿 : 8컬럼(Margin 40px, Gutter 16px)
      • 모바일 : 4컬럼(Margin 16px, Gutter 8px)
  5. 스타일 및 컬러 시스템 정의
    • 컬러 스타일 설정(Primary, Secondary, Backgroud Color 지정)
    • 텍스트 스타일 설정(H1-48px bold, H2-32px bold, Body-16px 지정)
  6. 컴포넌트 시스템 설정
    • 버튼, 네비게이션 바, 카드 등의 UI 요소 디자인
    • UI 요소를 선택한 후 컴포넌트 화-Create Component(window 단축키 : Ctrl + Alt + K)
    • Variants 추가하여 다양한 상태(기본, 호버, 클릭) 별로 스타일 적용되도록 설정
  7. Asset(에셋) 설정
    • UI요소(아이콘, 버튼, 일러스트 등)를 Assets 패널에 저장 – Component 된 것은 이 곳에서 확인 가능하며, 재사용 가능 함
    • Figma Community 활용하여 아이콘, 디자인 요소 추가 가능
  8. 반응형 디자인을 위한 Auto Layout 적용
    • UI요소를 선택 후 “Shift + A” 로 Auto Laydout 적용 가능
    • Padding, Alignment, Spacing 을 조정할 수 있음
    • 요소 크기 설정 : Fixed, Hug Contents, Fill Container 중 선택
  9. 프로토타입 설정
    • 상단 탭에서 “Prototype”모드 전환
    • 버튼을 선택 후 “+”를 드래그하여 이동할 페이지 지정
    • “On Click -> Navigate to”로 설정할 수 있음
    • 이를 통해 동작되는 웹사이트 미리보기 시연 가능
  10. 디자인 미리보기 & 공유
    • “Play” 버튼 클릭하여 화면별 미리보기 가능
    • “Share” 버튼 클릭하여 링크 생성 후 프로젝트 참여자에게 공유 가능

피그마 자동화 설정

피그마 기초세팅이외에 피그마에 다양한 기능들이 있는데, 이 중 재사용이 되는 컴포넌트를 체계적으로 만들어 놓으면 꽤 유용하며, 전체적인 느낌을 변화시키는데에도 메인 컴포넌트 변경으로 일괄 변경이 가능하므로 꽤 유용하다. Figma에서 작업 효율을 높일 수 있는 자동화 설정을 별도로 정리해본다.

  1. Variants(변형설정)
    • 하나의 컴포넌트에 여러 상태(기본, 호버, 클릭 등)를 설정하여 관리
      1. 버튼 또는 아이콘 디자인을 선택
      2. 상단 툴바에서 “Create Component”(Ctrl + Alt + K) 클릭
      3. 오른쪽 패널에서 “Add Variant” 클릭
      4. 새로운 Variant 를 추가하고 이름을 지정(Ex. Hover, Click)
      5. 각 Variant 의 색상 또는 스타일을 변경
  2. Auto Layout(자동 정렬 및 크기 조정)
    • 버튼, 카드, 리스트 등 UI 요소 간 정렬을 자동으로 조정
      1. 정렬할 요소를 선택
      2. Shift + A를 눌러 Auto Layout 적용
      3. 오른쪽 패널에서 Padding, Alignment, Spacing 조정
      4. 크기 설정 – Hug Contents: 내용에 맞게 조정, Fill Container: 부모 프레임 크기에 맞게 조정
  3. Component Properties(컴포넌트 속성화)
    • 같은 컴포넌트를 여러 용도로 쉽게 변경할 수 있도록 설정
      1. 버튼 또는 네비게이션 바를 선택
      2. “Create Component” 클릭(Ctrl + Alt + K)
      3. 오른쪽 패널에서 “Add Property”를 선택 – Text, Boolean, Instance Swap 중 선택
      4. 즉, 버튼의 텍스트를 변경하고자 한다면 Text Property 추가
  4. Interactive Components(인터랙티브 컴포넌트 설정)
    • 프로토타입 모드에서 버튼, 토글 등 UI 요소의 상태 변화 적용
      1. Variants가 설정된 컴포넌트를 선택
      2. Prototype 모드로 전환
      3. 한 Variant에서 다른 Variant로 화살표 연결
      4. 오른쪽 패널에서 “On Click” 또는 “While Hovering” 상태 설정
      5. 미리보기로 확인
  5. Plugins 활용(작업 자동화 및 빠른 요소 추가)
    • 디자인 작업을 빠르게 하기 위해 플로그인을 사용
      1. 상단 메뉴에서 “Resources (Shift + I)” 클릭
      2. “Plugins” 탭에서 필요한 플러그인 검색
      3. 대표적인 플러그인
        • Content Reel – 더미텍스트 자동입력(이름, 이메일 등)
        • Unsplash – 무료 고품질 이미지 삽입
        • Iconify – 다양한 아이콘 바로 추가
  6. 컴포넌트 라이브러리 활용
    • 여러 프로젝트에서 같은 컴포넌트를 재사용
      1. 메인 프로젝트에서 자주 쓰는 UI 요소를 컴포넌트로 저장
      2. 상단 “Assets”패널에서 “Publish”를 클릭
      3. 다른 파일에서 “Assets”에서 불러와 재사용

IT와 관련된 글