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

 

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

 

 

 

 

"단순함은 궁극의 정교함이다."

레오나르도 다 빈치

 

 

 

월요일 시작!

이번 주 다짐은 힘을 좀 빼자..! 그렇다고 놓진 말기!

 

부트캠프를 한 달 정도 진행하면서 알게 모르게 스트레스를 좀 받았다.

아무래도 잘 해야한다는 부담과 잘 하고 싶다는 욕심 때문이 아니었을까 하는 생각이다.

아무튼 그래서 입에 간식을 달고 살았더니 한달 새 살이 많이 쪄서 굉장히 당혹...ㅋㅋㅋㅋㅋ

얼굴이 더 통통해졌다....헤헿....

설날도 있었으니까......

흐아아...다이어트 해야겠다... 3월에....

 

사실 스트레스를 받던 안받던 하기로 했으면 해야한다는 사실에는 변함이 없기 때문에 어제 자기 전에 스트레스를 받지 않기로 결심하고 잤다.

근데 오늘 오전중간출결을 하면서 코치님이 한 주 다짐을 해보자고 해서 굉장히 반가워서 냉큼 블로그에 다짐해버리기.!

 

암튼 그러니까 이번주 다짐은 할 일 다 하면서 마음가짐은 편안하기~~ 편안하던지 안하던지 해야하는 사실에는 변함이 없다아ㅏㅏ~~

 

 

 

---

강의노트

---

 

1) 디자인 시스템이란?

: 기업이나 브랜드에서 사용하는 일관된 UX/UI디자인 가이드라인

: 디자인 요소(버튼, 입력창, 카드 등)을 재사용 가능하도록 체계적으로 정리

강의자료_디자인시스템 예시

 

 

2) 디자인시스템에서 컴포넌트의 역할

: 컴포넌트는 디자인 시스템의 핵심 요소

: UI구성 요소를 체계적으로 정리해 디자인의 유지, 보수를 용이하게 한다.

ex) Google Material Design, Apple Human Interface Guidelines

 

 

3) 디자인시스템 활용을 장점

: 일관된 UI스타일 유지

: 팀 내 디자이너-개발자 간 협업 강화

: 디자인 수정 후 빠른 적용 가능

 

 

4) 베리언츠를 활용한 디자인시스템 구축

: 버튼, 입력필드, 카드UI 등 여러 상태를 통합적으로 관리

강의자료_디자인시스템 구축 예시

> 버튼(기본, 호버, 비활성화, 클릭상태)

> 입력필드 (기본, 포커스, 오류상태)

 

>> 구글, 애플 디자인시스템 등의 이미 만들어진 디자인시스템들을 잘 살펴보고 활용하면 더 빠르게 나만의 디자인시스템을 구축하는데 도움이 될 것

https://m3.material.io/

Material Design

https://developer.apple.com/design/human-interface-guidelines

Human Interface Guidelines | Apple Developer Documentation

 

++ 피그마 홈에서 좌측하단 explore community로 들어가서 디자인시스템을 검색하면 여러가지 디자이시스템 예시들을 찾아볼 수 있다.

 

아래는 구글 머터리얼 디자인 피그마 키트!

https://www.figma.com/community/file/1035203688168086460

 

 

4) 프로퍼티 활용으로 커스터마이징 강화

: 텍스트 프로퍼티 > 버튼 문구 변경 가능

: 아이콘 프로퍼티 > 버튼 내 아이콘을 활성화/비활성화 가능

: 가시성(Visibility) 프로퍼티 > 특정 요소를 숨기거나 표시 가능

 

5) Properties - Boolean 

 : true, false 를 통해 해당 요소가 보이거나 안 보이게 설정하는 기능

 >> 컴포넌트 만들기 (프레임과 컨텐츠에 각각) >> 오른쪽 패널에서 + 버튼 (프로퍼티 추가) >> boolean선택 >> true인지, farse인지 선택하고 create property >> 컴포넌트 안에서 boolean 설정을 하고 싶은 컨텐츠 선택 >> 오른쪽 appearance패널에서 뚫리 육각형 아이콘 선택 >> 직전에 만든 boolean propery 선택 (연결됨) >> 인스턴스로 복사하면 불린기능 사용 가능

 

 

6) Properties - Instance swap

 : 베리언츠와 비슷하지만 인스턴스 스왑은 베리언츠의 하위 개념인 프로퍼티와 같은 선상에 있다.

 : 인스턴스 스왑으로 묶인 컴포넌트들 안에서 손쉽게 컴포넌트를 바꿔 사용할 수 있다.

 

>> 먼저 인스턴스 스왑으로 묶고싶은 아이콘이나 개체를 만들기 >> 개별 오토레이아웃(필요에 따라) >> 개별 컴포넌트 설정 >> 카드나 버튼 안에 넣고 오토레이아웃으로 묶고 레이아웃 정리 >> 필드선택 후 컴포넌트화 >> 우측패널 properties 옆 + 버튼 클릭 >> instance swap 클릭 >> property 이름 정하기 >> value에 대표 아이콘 선택 >> prefered values에 대표아이콘 포함 바꿔 사용하고싶은 아이콘 선택 >> create property >> 카드(필드)안에 인스턴스 스왑 사용하고 싶은 아이콘 선택 >> 우측 패널 맨 위 뚫린 다이아몬드 선택 (=apply instance swap property) >> 아까 만든 인스턴스 스왑 선택 >> 적용완료

 

**가장 헷갈렸던 인스턴스스왑 적용 후 사용 법 >> 필드 선택 >> 우측 패널 properties 아래 설정한 인스턴스스왑 프로퍼티가 보일것임 >> 그거 옆에 설정 버튼 누르고 >> value누르면 >> 아까 선택한 prefered values 중 하나 선택하면 >> 필드(카드) 안에서 인스턴스스왑을 설정한 아이콘만 바뀜**

 

 

7) Turncate text 

: 텍스트와 텍스트가 들어갈 상자 제작 >> 텍스트 오토레이아웃 설정 >> 텍스트 fill container >> 텍스트와 상자 한번에 묶어서 오토레이아웃 설정 >> 상자는 hug로 설정 >> 텍스트 클릭 >> 우측 typography패널에서 우측하단 버튼(type settings)선택 >> turncate text 클릭

 

 

8) Constraints

: 포지션 패널 안에 있음

: 프레임 내부의 오브젝트가 어디에 고정되어있을 지를 결정

: 좌, 우 , 중앙등의 설정 가능

: scale = 프레임과 같이 늘어나고 줄어듦 (ex. 아이콘의 경우 스케일 세팅을 해 두는게 좋음 >>감싸고 있는 프레임에 맞춰 늘어나고 줄어듦)

 

아래 블로그도 참고!

https://blog.toktokhan.dev/%EC%8B%A0%EC%9E%85-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EB%8A%94-%EC%95%84%EB%AC%B4%EA%B2%83%EB%8F%84-%EB%AA%B0%EB%9D%BC%EC%9A%94-966d53a380a7

신입 디자이너는 아무것도 몰라요

 

 

 

---

오늘의 과제

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

---

 

오늘은 인스턴스 스왑 연습을 해보다가 시간이 다 가버려서 연습 화면으로 마무리....