뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, [Figma Playground] 2022 New Component Properties 새로워진 컴포넌트 프로퍼티 알아보기

피그마 사용법 / 기본기 시리즈 🎨 피그마 컴포넌트 프로퍼티 핵심정리

#figma
#uidesign
#전체
#디자이너
#피그마
#Figma
00:26피그마 커뮤니티에서 Component Properties Playground 파일을 복제
00:39Component명칭을 -> Component Properties 로 변경하였습니다. 🥔 베리언트 기능 활용을 위해서 매우 많은 양의 컴포넌트를 그려놓고 시작하는 타입이라서 피그마팀의 설명대 간편해 지는지 기대가 되는 기능이네요.
01:303가지 Property -> 1.Boolean 2.Text 3.Swap instance
01:48Boolean -> 버튼의 가시성 설정 (참 과 거짓을 이용해 설정)
02:01Text-> 버튼의 텍스트 내용을 변경
02:06Swap instance -> 아이콘 교체 가능
02:40이전에는 Variant 만 가지고 컴포넌트를 만들었다면 업데이트 된 Variant 와 Component Properties 를 가지고 컴포넌트를 설정 할 수 있게 됨
02:58Text Properties 설정하는 방법 -> Contents -> Name
03:39버튼 인스턴스 에서 텍스트 바로 변경 가능
04:09버튼 2개의 텍스트도 동시 변경 가능
04:39Boolean Properties -> 참 과 거짓 설정으로 버튼/사진 의 객체를 온오프 처럼 사용할 수 있음 🥔개인적으로 제일 잘 쓸 것 같은 기능입니다. 이미지 유무 / 아이콘 유무 를 모두 미리 제작해두고 사용했기에 그 부분에서 시간단축이 기대됩니다.
05:14이미지 선택 - > Layer -> Apply boolean property
05:24Name 설정 후 Value 에서 True(보임) False(숨김)을 선택
05:57카드 선택을 하게 되면 카드 인스턴스에 이미지를 ON/OFF 토글 버튼 생성됨 / 즉 2가지 선택지가 있을 경우 토글버튼 으로 설정할 수 있어 베리언트 를 줄일 수 있음
06:36Swap instance Properties
07:12아이콘 선택 -> 인스턴스명 -> Apply instance Swap Property -> Name 설정
08:01컴포넌트 를 교체할 수 있음 🥔 이미 컴포넌트를 제작해두고 교체하는 식으로 사용했기에 큰 변화 라고는 개인적으로 느껴지지 않는 기능 이네요 🥲
08:37타입 / 컬러 / 상태 / 아이콘유무 / 텍스트설정 / 아이콘설정 을 활용해 다양하게 버튼을 변경하여 사용 할 수 있음
✔ 학습 완료
댓글 1
pinkgamja 님 루씨의 UXUI 디자인 채널을 운영중인 루씨입니다. 제 영상으로 학습하시는 것은 좋지만 이렇게 다른 사이트에 제 영상이 올리는 것은 안됩니다. 제 채널에서 영상 시청해 주세요. 공부하시는 용도라면 비공개로 돌려주세요. 다른 사이트에 제 영상이 올라가면 창작자 입장에서는 굉장히 불쾌하고 창작 의지를 꺾는 일입니다. 만든 사람은 엄청나게 시간과 노력을 담아서 만든 것을 다시한번 생각해 주세요. 제가 유튜브에 공개한 것이 제 영상을 마음대로 사용하라는 뜻은 아닙니다. 학습 노트를 보고 한동안 너무 충격을 받았습니다. 앞으로 제 채널을 어떻게 운영할지 깊이 생각을 해봐야겠네요.
댓글 달기

이런 러닝패스는 어때요?

pinkgamja🥔님의 다른 노트는 어때요?

pinkgamja🥔의 프로필 이미지
pinkgamja🥔
의 학습노트

피그마 사용법 / 알면좋아 시리즈 2022 피그마 완벽정리! ⚡️3분이면 됩니다!

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
16
00:52
01_다크모드 기능 (🥔2022년도 다크모드가 유행이 될것이라 예상하고 있습니다. 피그마에서도 역시 놓치지 않고 다크모드를 추가하였네요)
01:12
02_다크모드_UI 컬러도 조정 가능
👍
1
스크랩
pinkgamja🥔의 프로필 이미지
pinkgamja🥔
의 학습노트

피그마 사용법 / 알면좋아 시리즈 🎨 피그마에 로티 파일 불러오기!

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
18
00:44
로티의 장점 용량이 작고 / 멀티 플랫폼 모두 적용가능 (iOS,And,Web,R.N) SVG로 스케일 보존
01:13
디자이너들이 올린 무료 로티 사용 가능
👍
1
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기