UXUI랑 썸 타는 중

[본캠프5일차/피그마] 체계적으로 배우는 피그마 기초 완전 정복 4주차 본문

스파르타 코딩클럽_TIL(250531_졸업)_노션에 추가 작성

[본캠프5일차/피그마] 체계적으로 배우는 피그마 기초 완전 정복 4주차

yuness1215 2025. 1. 24. 20:17

1. 오늘 학습 키워드

컴포넌트 프로퍼티의 이해

 

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

  • 컴포넌트 프로퍼티란
    프로터티=속성
    피그마에서 UI를 다룰때, 컴포넌트를 만들고 그 인스턴스들을 다루는 것.
  • 배리언츠/프로퍼티
    1)배리언츠 = 변종 (Varians/변화) 2)프로퍼티=속성
    • 컴포넌트가 가질수 있는 또다른 모습을 만듬.
    • 컴포넌트의 가사상태
    • 디자인 구조가 바뀌지 않는 선에서 "변경" 할 수 있는
      "요소"들을 다룰 때 사용
  • Properties(프로퍼티)의 종류
    • 배리언츠 ▲
    • Boolean(불리인) : 텍스트와 아이콘만 변경
      - yes/no, on/off
    • Intarce Swap
      - 인스턴스를 다른 인스턴스로 "교체" 하는 기능
    • Text
      - 인스턴스의 "속성" 들의 값을 강제로 바뀌게 하지 않기위해 사용
  • 버튼의 위계 배리언츠
    • 위계 (=hierarchy/계층,계급, priority/우선순위)
      >얼마나 중요한 행동을 하기 위한 '버튼' 인가
1순위) Primary -> 2순위) Secondary -> 3순위) Fertiary

              > 위계는 하나만써도 되고, 2개만 써도 가능하다.

              > 유연하게 사용할것.

              > 위계>크기>상태  순서.

  • 합성컴퍼넌트
    • 합성컴퍼넌트의 종류
      -바텀시트
      -리스트
      -다이얼로그(팝업)
      -카드
      -탭
  • 네스티드 인스턴스
    -네스티드*(둥지;감싸다)

3. 학습하며 겪었던 문제점 & 에러

>>파운데이션의 요소가 바뀌면 =>배리언츠로 만들어야 함

 

- 문제&에러에 대한 정의

그렇다면 파운데이션 요소가 바뀌지 않았을 때는 어떻게 해야할까?

 

- 내가 한 시도

배리언츠를 제외한 다른 방법으로 파운데이션 요소가 변경되지 않는 다는 점에서

"프로퍼티"를 이용하였다.

 

- 해결 방법

>배리언츠는 추가 아이콘, 아이콘 바뀜(파운데이션의 크기,색상)>형태가 같다면 가능하다.

 

- 새롭게 알게 된 점

>>파운데이션 요소

    -색상, 간격, 폰트, 아이콘의 크기/색상

 

- 이 문제&에러를 다시 만나게 되었다면?

프로퍼티와 배리언츠의 기능을 생각하고 적용할 것같다.

4. 내일 학습 할 것은 무엇인지 

오늘은 이론학습보다 실습위주의 수업을 진행했다. 수업을 진행하면서 처음 마주한 피그마 사용에 익숙해 지기 위해서 3번이상의 복습과정을 자의로 진행하였다. 앞으로의 수업을 잘 진행하기위해 계속된 복습의 필요성을 느꼈고, 복습에대한 계획도 구성해야겠다고 생각했다.

내일은 정규수업시간은 없지만 아직 모르는 이론들이 많아 강의 수강 및 복습과 내용 정리를 할 계획이다.

-UI 입문 : 1-2강

-피그마 : 5강

-디자인 카타 수정