[디자이너 부트캠프]15일차 Figma Advanced (컴포넌트 / 베리언츠 / 프로퍼티의 개념과 활용)

 

[디자이너 부트캠프]15일차 Figma Advanced
(컴포넌트 / 베리언츠 / 프로퍼티의 개념과 활용)

 

 

 

"디자인은 어떻게 보이는지가 아니라 어떻게 작동하는지에 관한 것이다."

제프 라스킨

 

 

 

오늘 드디어 금요일..!!!

피곤하고 힘들지만 일단 가보자구....

 

뭔가 할 일이 해도해도 계속 생겨나는 기분! 

이 아니라 실제로도 그런 것 같지만 인생에 언제 또 이렇게 살아보겠나 싶기도 하다.

화이팅..

 

 

---

강의노트

---

 

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메뉴가 생김

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

 

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

 

 

 

 

이거이거.. 말로 설명 듣는거랑 들은 걸 적용해 보는거랑다르고, 적용해 본 걸 다시 글로 옮기려니 또 다르게 힘들다...!

그래도 해 놓으니 뿌듯~~ 하구만..!

 

 

 

---

오늘의 과제

선정 서비스의 UI 구성요소 디자인

---

 

피그마 화면 캡쳐

 

오늘 배운 컴포넌트, 베리언츠, 프로퍼티를 활용하여 토스 하단 메뉴 구성을 해보았다!

왤케 나는 시간이 많이 걸리는 것 같지....ㅠㅠ

하다 보면 언젠가 잘 해 지겠지...ㅠ