[내일배움캠프] 피그마 - 컴포넌트 프로퍼티, 배리언츠, Boolean, 인스턴스 스왑, 텍스트 인스턴스, 위계 배리언츠

<피그마>
UI 디자인에 사용하는 가장 대중화되고 범용성 높은 디자인 툴

 

● 컴포넌트 프로퍼티

의사 상태에서 컴포넌트가 가지는 가상의 상태 변화를 만드는 피그마 기능

 

1) 배리언츠

컴포넌트가 가질 수 있는 의사상태를 만드는 컴포넌트 기능

 

 

2) 프로퍼티

디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

 

2-1) Boolean 프로퍼티

컴포넌트 안에 있는 특정 요소를 보이게 하거나 안보이게 할 수 있는 속성

Boolean

 

2-2) Instance Swap 프로퍼티

인스턴스를 다른 인스턴스로 교체하는 기능 (인스턴스 끼리만 가능)

인스턴스 스왑

 

2-3) 텍스트 인스턴스

텍스트 인스턴스

 

● 위계 배리언츠

버튼 컴포넌트를 예시로, 버튼의 각 베리언츠가 가진 중요도에 따라 위계를 지정한다

일반적으로 버튼은 Primary - Secondary - Tertiary 의 위계를 가진다

 

● 버튼 컴포넌트, 배리언츠, 텍스트필드 프로퍼티, 컴포넌트 프로퍼티 과제

숙제 설명
버튼 컴포넌트에 배리언츠를 추가해 주세요
텍스트필드 컴포넌트에 프로퍼티를 추가해 주세요

요구 사항
버튼 컴포넌트에 Size가 Medium인 배리언츠를 추가해 주세요
(프라이머리 버튼, 세컨더리 버튼)
텍스트필드 컴포넌트의 프로퍼티는 텍스트 프로퍼티 3개와 불리언 프로퍼티 2개를 만들어 주세요.
(텍스트 프로퍼티는 각각 라벨, 입력 텍스트, 헬퍼 텍스트 입니다).
(불리언 프로퍼티는 각각 라벨 보기, 헬퍼 텍스트 보기 입니다)

힌트 및 해설
https://teamsparta.notion.site/4-_-03b690d0bbfc4b9e867c1bb8f28569f1?pvs=4

[피그마 기초] 4주차_강민재.fig

0.06MB