[디자인시스템 스터디] 2주차 피그마 활용법

[디자인시스템 스터디] 2주차 피그마 활용법

 

1) 컴포넌트

: UI 디자인에서 반복적으로 사용되는 요소를 재사용 가능하도록 만든 디자인 단위

: 버튼, 카드, 네비게이션 바, 입력필드 등 여러 화면에서 동일한 UI를 유지할 때 사용

 

 

컴포넌트활용의 장점

 

: 디자인 일관성 유지  >  동일한 요소를 여러 화면에서 재사용 가능

: 작업 효율성 증가  >  하나만 수정하면 모든 인스턴스(instance)에 자동 반영

: 개발과 협업 용이 : 개발자가 동일한 시스템을 참고할 수 있음

 

 

컴포넌트의 기본 구조

 

1. 메인 컴포넌트(Main Component) : 원본 디자인

2. 인스턴스(Instance) : 메인 컨포넌트를 복제하여 사용할 수 있는 개별 요소 

 

마름모 한 개

: 인스턴스 레이어

 

 

 

마름모 네 개

: 컴포넌트 레이어

 

 

 

 

 

컴포넌트 단축키 = ctrl + alt + K (프레임이 보라색으로 변함) >> 이제 컴포넌트를 alt키로 복사하면 인스턴스들이 만들어지는 것

 

* 컴포넌트를 수정하면 인스턴스들도 같이 수정됨

* 인스턴스에서 수정한 것은 컴포넌트에 반영되지 않음

* 인스턴스에서 수정하면 그 수정된 인스턴트는 나중에 컴포넌트를 수정이 반영되지 않음

 

 

 

 

2) 베리언츠

: 하나의 컴포넌트에 여러 상태(state)와 스타일을 추가할 수 있는 기능

: 버튼의 기본 (Default), 호버(Hover), 비활성(Disabled) 상태를 한개의 컴포넌트에서 관리 가능

 

베리언츠 활용

 

: 버튼 상태 변경 (기본, 호버, 클릭, 비활성)

: 입력필드 상태 (기본, 포커스, 오류 발생 시)

: 다크 / 라이트 모드 UI 변경

: 아이콘 스타일 변경 (색상, 크기, 테두리 등)

 

3) 프로퍼티

: 컴포넌트의 세부 옵션을 조정할 수 있는 기능

: 사용자가 필요에 따라 텍스트, 아이콘, 레이아웃 등을 조정 할 수 있게 함

 

 

프로퍼티 활용

 

텍스트 프로퍼티 : 버튼의 텍스트를 변경할 수 있도록 함 (ex. 로그인 -> 회원가입)

아이콘 프로퍼티 : 버튼 내 아이콘을 켜거나 끌 수 있도록 설정

가시성(Visibility) 프로퍼티 : 특정 요소를 숨기거나 보이도록 조정 (ex. 개체2개 중 하나는 투명하거나 안보이게 만들기~)

 

 

 

4) 베리언츠 / 프로퍼티 사용법

 

1) 개체 만들기

 

2) Auto Layout 설정 (shift+A)

 

3) Component 설정 (ctrl+alt+K)

 

4) Variants 설정 

   : Component설정 후 우측 메뉴 상단 add property 선택 >> 프로퍼티 영역상자 생김

      >> 상자 가운데하단에 +버튼 >> 원래 있던 개체가 복사됨

 

    4-1) 외부개체를 variants에 추가하고 싶을 때

            : 외부개체에 component 설정 후 넣고 싶은 variants 상자에 드래그해서 넣어주면 추가 됨

 

    4-2) 다중개체 variants 설정

             : Variants로 만들 개체들 다중선택 >> 우측 메뉴 상단 combine as variants 클릭

 

++ Variants 내 Property 추가 방법

    1.  Variants 영역 상자 클릭 >> 우측 메뉴 상단 variants글씨 옆 + 버튼 클릭 >> 다시 variants 클릭 >> 원하는 property이름과 원래 있던 개체의 value 이름 설정 >> create property 

    2. 만들고 싶은 variant를 만들고 선택 >> 우측 메뉴 상단에 새로 만든 variant선택 >> add new value >> value 이름 작성

 

     ++ variant / Value 이름 예시

          Size : small, medium, large

          State : default, hover, active, disabled

6) variants에서 사용 할 개체 복사 >> 원하는 곳에 개체 위치시킴 >> 개체 클릭하면 우측 메뉴 상단에 property메뉴가 생김

>> 원하는 스타일로 골라 쓰기

 

*컴포넌트 이름을 베리언츠 설정 후 변경하면 오류가 날 수 있으니 처음부터 잘 봐두자*

 

 

 

5) 오토 레이아웃(Auto Layout)이란?

: UI요소가 반응형으로 조정되도록 자동 정렬하는 기능

: 버튼 크기, 카드 레이아웃, 리스트 등을 효율적으로 배치 가능

: 요소 간 간격, 패딩, 정렬 설정이 가능하여 UI디자인의 일관성 유지

 

 

 

6) 오토 레이아웃 적용

shift + A = 오토레이아웃 적용

>> 각 개체마다 적용 후 

alt + shift + A = 오토레이아웃 해제

다중개체선택 > shirt + A  = 정렬됨 > 오른쪽 패널-direction > wrap > 선택 상자 크기 조절 = 상자 크기에 맞게 자동정렬

오토레이아웃이 설정된 범위 안에서는 개체간 정갈한 이동 가능, 정갈한 복사 붙여넣기 가능

(ex. 버튼 a와 버튼 c 사이의 버튼 b를 맨 오른쪽으로 옮기고 싶으면 선택 후 -> 방향키로 조절 가능 ++ 정갈하게 여백 맞춰줌)

 

 

오토 레이아웃 패널

 

오토레이아웃을 설정한 개체를 선택하면 오른쪽에 설정 패널이 자동으로 뜸

오토레이아웃 패널

 

(좌) 강의화면 캡쳐 / (우) 오토레이아웃 패널

 

Alignment

: 프레임 내에서 좌,우,중간/상,중,하 정렬 (지정된 padding값 안에서)

 

Resizing : 넓이/높이 값 조정

                 : hug = 포함된 개체에 따라 프레임이 조정  >> padding값에 맡춰서 프레임이 개체를 감싼다

                 : fixed = 값 고정, 포함된 개체를 따라 프레임이 조정되지 않음 >> padding값과 관계 없이 넓이 유지

                 : fill container = 프레임에 맞춰 개체크기 조정 >> padding값에 맟춰 개체가 프레임에 붙음

                   : add min width // add max width = 프레임의 최소/최대 반응 넓이 지정 (remove가능)

 

Padding

: 프레임 안쪽 여백 조정 >> 프레임 내 개체간 여백 / 프레임과 개체 사이 여백 조정 (개별/일괄 설정 가능)

 

Padding(auto)

: 여백부분 더블클릭 > 여백넓이 지우기 > enter or 패널에서 설정

 

Direction

: vertical / horizontal / wrap 설정에 따라 개체 정렬

 

 

https://brunch.co.kr/@onbeak/7

01. 디자인 시스템 모아 보기