Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- UX/UI디자이너
- 웅진씽크빅
- UX/UI디자인
- 내일배움캠프 #본캠프 #wil
- #내일배움캠프 #사전캠프 #til
- 내일배움캠프 #사전캠프 #til
- 디자인카타 #내일배움캠프 #본캠프 #wil
- 내일배움캠프 #사전캠프 #ti
- 내일배움캠프 #본캠프 #til
- ux/ui인턴형프로그램
- 디자인카타
- 내일배움캠프 #사전캠프 #ti #디자인카타
- 스나이퍼팩토리
- 인사이드아웃
- #내일배움캠프 #본캠프 #til
- 디자이너인턴
- 디자이너교육
- 인사이드아웃 인사이드아웃
- 내일배움캠프 #본캠프 #디자인카타
- 스나이퍼팩토리 ux/ui 인턴형 프로그램 8기
Archives
- Today
- Total
UXUI랑 썸 타는 중
[본캠프5일차/피그마] 체계적으로 배우는 피그마 기초 완전 정복 4주차 본문
스파르타 코딩클럽_TIL(250531_졸업)_노션에 추가 작성
[본캠프5일차/피그마] 체계적으로 배우는 피그마 기초 완전 정복 4주차
yuness1215 2025. 1. 24. 20:171. 오늘 학습 키워드
컴포넌트 프로퍼티의 이해
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
- 컴포넌트 프로퍼티란
프로터티=속성
피그마에서 UI를 다룰때, 컴포넌트를 만들고 그 인스턴스들을 다루는 것. - 배리언츠/프로퍼티
1)배리언츠 = 변종 (Varians/변화) 2)프로퍼티=속성 - 컴포넌트가 가질수 있는 또다른 모습을 만듬.
- 컴포넌트의 가사상태
- 디자인 구조가 바뀌지 않는 선에서 "변경" 할 수 있는
"요소"들을 다룰 때 사용
- Properties(프로퍼티)의 종류
- 배리언츠 ▲
- Boolean(불리인) : 텍스트와 아이콘만 변경
- yes/no, on/off - Intarce Swap
- 인스턴스를 다른 인스턴스로 "교체" 하는 기능 - Text
- 인스턴스의 "속성" 들의 값을 강제로 바뀌게 하지 않기위해 사용
- 버튼의 위계 배리언츠
- 위계 (=hierarchy/계층,계급, priority/우선순위)
>얼마나 중요한 행동을 하기 위한 '버튼' 인가
- 위계 (=hierarchy/계층,계급, priority/우선순위)
1순위) Primary -> 2순위) Secondary -> 3순위) Fertiary
> 위계는 하나만써도 되고, 2개만 써도 가능하다.
> 유연하게 사용할것.
> 위계>크기>상태 순서.
- 합성컴퍼넌트
- 합성컴퍼넌트의 종류
-바텀시트
-리스트
-다이얼로그(팝업)
-카드
-탭
- 합성컴퍼넌트의 종류
- 네스티드 인스턴스
-네스티드*(둥지;감싸다)
3. 학습하며 겪었던 문제점 & 에러
>>파운데이션의 요소가 바뀌면 =>배리언츠로 만들어야 함
- 문제&에러에 대한 정의
그렇다면 파운데이션 요소가 바뀌지 않았을 때는 어떻게 해야할까?
- 내가 한 시도
배리언츠를 제외한 다른 방법으로 파운데이션 요소가 변경되지 않는 다는 점에서
"프로퍼티"를 이용하였다.
- 해결 방법
>배리언츠는 추가 아이콘, 아이콘 바뀜(파운데이션의 크기,색상)>형태가 같다면 가능하다.
- 새롭게 알게 된 점
>>파운데이션 요소
-색상, 간격, 폰트, 아이콘의 크기/색상
- 이 문제&에러를 다시 만나게 되었다면?
프로퍼티와 배리언츠의 기능을 생각하고 적용할 것같다.
4. 내일 학습 할 것은 무엇인지
오늘은 이론학습보다 실습위주의 수업을 진행했다. 수업을 진행하면서 처음 마주한 피그마 사용에 익숙해 지기 위해서 3번이상의 복습과정을 자의로 진행하였다. 앞으로의 수업을 잘 진행하기위해 계속된 복습의 필요성을 느꼈고, 복습에대한 계획도 구성해야겠다고 생각했다.
내일은 정규수업시간은 없지만 아직 모르는 이론들이 많아 강의 수강 및 복습과 내용 정리를 할 계획이다.
-UI 입문 : 1-2강
-피그마 : 5강
-디자인 카타 수정
'스파르타 코딩클럽_TIL(250531_졸업)_노션에 추가 작성' 카테고리의 다른 글
| [본캠프_설날공부/UIUX입문] 디자인 씽킹 (2) (1) | 2025.01.28 |
|---|---|
| [본캠프6일차/UIUX입문] 디자인 씽킹이란? (1) | 2025.01.27 |
| [본캠프4일차/피그마] 체계적으로 배우는 피그마 기초 완전 정복 3주차 (0) | 2025.01.23 |
| [본캠프3일차/피그마] 체계적으로 배우는 피그마 기초 완전 정복 2주차(2/1) (0) | 2025.01.22 |
| [본캠프2일차] 애플의 Human Interface Guidelines, 구글의 Material Design (1) | 2025.01.21 |