피그마 강좌ㅣ재사용 가능한 버튼 컴포넌트 생성하기
HTML-код
- Опубликовано: 1 авг 2024
- *버튼 컴포넌트 참고 파일 : www.figma.com/@yeonjung
00:00 intro
00:28 버튼의 속성과 Value
01:45 머터리얼 아이콘 가져오기
02:40 오토 레이아웃 버튼 Base 생성 도입부
04:19 버튼 Label 텍스트 디테일 수정
05:35 동일한 짝수 높이의 오토 레이아웃 버튼 생성하는 방법
06:04 버튼 높이를 일정하게 만들기 위한 투명 Base 추가하는 방법
06:13 프레임의 가로 길이를 0으로 만드는 방법
07:03 컴포넌트 기초
09:15 컴포넌트 Variants 속성
09:32 Variants 속성 추가하는 방법1
10:44 컴포넌트의 속성과 Value 수정하는 방법
11:57 Variants 속성 추가하는 방법2
12:31 컴포넌트 Boolean 속성
14:38 컴포넌트 Instance Swap 속성
16:04 컴포넌트 Text 속성
16:52 버튼 속성 적용 사례
17:31 버튼 컴포넌트 제작을 위한 부연설명
*피그마 커뮤니티의 Material Design Icons 샘플 파일 링크 : figma.com/community/file/1014241558898418245
*이 영상에 대한 부연 설명: 이 영상은 프로퍼티의 기능에 대한 기본 가이드라인 영상으로 보시면 되고 이 영상을 참고 및 응용 하셔서 시청자님 스타일의 버튼을 생성하시면 됩니다. (재사용이 쉽게 구조화)
예를들어 버튼 개체수와 스타일, Property 속성 등에 에 따라 버튼을 만드는 방법은 5개 이상이 될 수 있는거처럼, 이게 맞다 아니다 정답은 없습니다.
다만 이 영상을 만들 당시 이 방식이 최선이었고 프라퍼티 기능이 없었을 때 버튼을 생성하는 방법이 달랐던 것처럼 이후 더 효율적인 방법이 있다면 다른 방법으로 만들 수 있으니 이점 양해부탁드립니다.
유튜브 피그마 관련 영상중 정리&설명도 잘해주시고, 가장 도움이 되는 영상입니다.
감사합니다.
정말 유용하게 쓸 수 있을 것 같아요. 설명과 정리가 잘되어 있어 너무 좋아요!!
디자인시스템이 중요한건 알았는데. 오랫동안 실패했는데.. 포트폴리오는 만들수 있겠나 싶었는데. 정답같은 소중한 강의 들려주셔서 진짜 너무 감사합니다.
설명이 간단명료해서 너무 좋아요! 감사합니다~
액기스 강의를 이렇게 편안한 속도와 말투 디자인까지 고루담긴 강의 감사합니다!
구독하고 정착합니다.
항상 감사합니다! 실무에 정말 도움되는 꿀팁이 많네요
꾸준히 영상을 업로드 해주셔서 너무 감사드려요! :)
이전에 오토 레이아웃 영상에 댓글을 달아 이 강의를 듣게 되었는데.. 좋은 영상 만들어주셔서 진심으로 감사드립니다. 실무에 적용되는 구체적인 설명까지 해주셔서 많은 도움이 될 것 같아요!
영상 따라하며 방학동안 피그마 마스터 하도록 하겠습니다! 정말 감사드려요!!!
마침 필요했던 기능 찾다가 봤는데 정말 유용했습니다! 좋은 영상 올려주셔서 감사합니다 😊
잔짜 속성!!! 원하는것을 금방 배웠네요. 다음주에 처음으로 UX으로 일하는데 이런 부분은 참고로 예습하고 왔으면 싶다해서 찾고있었는데. 정말 도움이 많이 됬어요.
피그마 사용해야하긴하는데 막상 써보니 은근 어려웠는데 연정님 강의 덕분에 조금 더 수월하게 작업할수 있을것 같아요. 좋은 무료강의 감사합니다'-'👍
이번영상에서도 많이 배우고 갑니다!!
과정이 꽤 복잡하네요..!
강의 정말 감사합니다!
진짜 좋은 강의... 너무 좋습니다. 최고의 피그마 강의라고 생각합니다.
강의 잘 봤습니다. 감사합니다💝
오늘도 감사합니다~!
감사합니다 헷갈리는게 정리됐어요
진짜 설명 잘하심, 국내 피그마*원탑 강사
원툴이 아니라 원탑😅
강좌 너무 좋아요
잘 보고 갑니다 👍🏻
Figma강좌를 많이 본 건 아니지만 정말 깔끔하네요 👍
00:28 버튼의 속성과 Value
01:45 머터리얼 아이콘 가져오기
02:40 오토 레이아웃 버튼 Base 생성 도입부
04:19 버튼 Label 텍스트 디테일 수정
05:35 동일한 짝수 높이의 오토 레이아웃 버튼 생성하는 방법
06:04 버튼 높이를 일정하게 만들기 위한 투명 Base 추가하는 방법
06:13 프레임의 가로 길이를 0으로 만드는 방법
07:03 컴포넌트 기초
09:15 컴포넌트 Variants 속성
09:32 Variants 속성 추가하는 방법1
10:44 컴포넌트의 속성과 Value 수정하는 방법
11:57 Variants 속성 추가하는 방법2
12:31 컴포넌트 Boolean 속성
14:38 컴포넌트 Instance Swap 속성
16:04 컴포넌트 Text 속성
16:52 버튼 속성 적용 사례
17:31 버튼 컴포넌트 제작을 위한 부연설명
*피그마 커뮤니티의 Material Design Icons 샘플 파일 링크 : figma.com/community/file/1014241558898418245
감사합니다
연정님 너무 감사합니다. 단비같은 강의입니다.🌈 버튼 Radius 설정하실 때 999로 하는 이유가 있을까요?
영상 항상 잘 보고있고, 너무 많은 도움이 됩니다!!
혹시 여유가 되신다면 프레임 이름을 어떻게 구분하는지도 알려주시면 너무 좋을 거 같습니다ㅠㅠ
신입인데 프레임 이름이 중복되는게 많아서 너무 헷갈리고 그러네요..ㅜ
실무에 도움이 되는 영상들이라 항상 잘 보고 있습니다.
궁금한게 있는데, 피그마로 작업한 파일에서 여러개의 페이지 중 한 개만 공유할 수 있는 기능은 없을까요?
해당 페이지의 마우스 오른쪽 클릭 후 copy link to page로 공유해도 다른 페이지 목록이 다 보이더라구요.
이번 영상도 도움이 많이 되었습니다 :)
혹시 보통 디자인할때 페이지와 컴포넌트 이름들을 정할때 실무에서 사용하는 규칙이 있나요??
자주 사용하는 컴포넌트들은 이미 대부분 정해져 있기때문에 Button, Card, Input 등과 같은 컴포넌트들은 머터리얼 디자인 시스템, 부트스트랩 등과 같이 사용하는 라이브러리를 기준으로 정의하고 있고여, 나머지 Elements 요소들은 네이밍 규칙을 정의해서 생성하고 있어여. (ex. 대소문자 규칙)
컴포넌트 속성과 관련된 참고 레퍼런스는 spectrum.adobe.com/page/action-button/ 추천 드립니다. 이번 영상 제작 시 참고했었습니다.
늘 잘보고 있습니다. 보다보니 예제로 작업하시는 것들의 간격이 전부 8의 배수더라고요 혹시 기회가 되시고 시간이 되신다면 ui작업하실때 8의 배수로 간격이나 폰트 크기 작업하는 강의도 가능할까요 ㅠㅠ 저는 이 8pt 개념이 이해가 잘안가서요 ㅠㅠㅠ
와 진짜 너무너무 도움받고 있어요. ㅠㅠ 구독도 했어요! 근데, 저는 저 아이콘 한번에 선택하는 조준아이콘? 이 안나오는데 왜 안나오는걸까요 ㅠㅠㅠㅠㅠ 하나하나 다 잡고 있어요..
혹시 레이어 이름 만드는 방법과 정리하는 동영상이 따로 있는지 궁금해요. 본것 같은데 다른곳인가 싶기도 하고... 혹시 동영상 있으시면 알려주세요~~
*버튼 컴포넌트 참고 파일 > www.figma.com/@yeonjung
움직이는 시물레이션도 같이 영상에 넣어주셨으면 좋겠어요
좀더 자세히 말씀해주실 수 있을까요? ex시물레이션
안녕하세요.
매번 영상 잘 보고 있습니다.
영상과 관련 없는 궁금한 사항이 있어서요. 문의 드립니다.
피그마의 특정 파일만 슬랙의 특정 채널로 연동하는 방법이 있을까요?
(ex. 피그마로 제작된 "회원가입" 파일에서 코멘트를 남기면, 슬랙의 "회원가입" 채널에서만 내용을 확인하고 싶습니다.)
영상과 관련없는 질문이라 죄송스럽네요~
안녕하세요!
최근에 어도비가 피그마를 인수했던데 앞으로 피그마는 전체 유료화가 될까요?? 어떤식으로 운영이 될지 궁금하네용
좋은 영상 감사합니다! 추가로 질문이 있는데요, instance된 아이콘 버튼에서 swap instance를 써서 아이콘을 바꾸는 것과 직접 버튼내의 아이콘을 클릭한 후 오른쪽 사이드바에서 직접 바꾸는 것과 어떤 차이가 있는지 궁금합니다 🤔
좋은 질문 감사합니다. 피그마는 협업에 강점을 둔 툴이라는 것에 초점을 두고 추측을 해볼 수 있을 거 같아요
*직접 바꾸는 것의 문제점: 컴포넌트는 만든 사람만이 컴포넌트를 어디까지 오버라이드(인스턴스를 수정하는 것이 어디까지 허용되는지 여부) 할 수 있는지 정확히 안다는 이슈가 있습니다. 이를 가이드에 컴포넌트를 만든 사람이 안내를 할 수 있지만 협업하는 사람들이 쉽게 놓치는 부분이라 교정이 필요한 경우가 발생하곤 합니다. 협업하는 사람들이 매번 물어보면 그것도 커뮤니케이션 리소스가 되겠죠.
-> 즉 두 명 이상의 피그마 편집자가 있다고 가정 할 때, instance swap property 뿐만아니라 variants,property 기능은 오버라이드 허용 범위를 제한함으로써 협업하는 사람으로 하여금 디자인 패널에서 쉽고 직관적으로 인지할 수 있도록 할 수 있는 장점이 있습니다. 컴포넌트 제작자 입장에서는 리펙토링 및 불필요한 커뮤니케이션 리소스를 줄일 수 있습니다.
구글 머테리얼 심볼에 복제 대신 트라잇나우 던데 ㅠㅠ 아이콘 등록 부분 어떻게 하는지 모르겠습니다 ㅠㅠ
아이콘만 있는 버튼을 만들려면 Boolean 속성이 아닌 아이콘 버튼의 variant를 따로 만드는 것이 나을까요? auto layout padding 값이 좌우/상하가 달라서 완전한 동그라미가 안그려져서요ㅜ
다크모드를 했을 때, 상단과 좌우는 Dark가 되는데, canvas는 여전히 light 합니당. 연정님 화면은 canvas도 다크모드여서요~ 이 부분 질문드려도 될까요?
아, 배경컬러는 수동으로 설정해야 해요. 캔버스 클릭하고 우측 디자인 패널에서 배경 컬러 지정하시면 되요~
컨포넌트 버튼중 아이콘만 단독으로 있는 버튼을 만들때는 'base'와 text를 인스턴스로 만들어서 ture, false로 안보이게 하시는건가요?
(텍스트들만 선택하고 ture false를 만드니까 만들어둔 'base'가 간격 인식이 돼서 정 원형의 버튼이 안만들어져서요)
입문자로써 강좌 너무 도움됩니다. 콘텐츠 만들어주셔서 감사합니다.
네 설명하신 데로에요. 아이콘 단독으로 있는 경우는 가로 세로 사이즈 및 안에 있는 아이콘 사이즈를 조정하여 베리에이션 하시면 돼요. base가 필요 없습니다. 😀
이거 안드로이드에서 사용가능한가요? 앱만들고 있는데 신기하네요
프로퍼티스 기능에서 영상에선 없던 State, HiddenLabel, Size 등록 방법은 어떤 영상을 참고 하면 될까요? 베리언츠 한 버튼을 텍스트 없이 아이콘만 남겼을때 원형이 안되고 타원형이 되는데 그부분에 대한 자세한 영상은 없을까요? 영상 링크 알려주시면 감사하겠습니다~
최근 다른 시청자분이 같은 질문이 있어서 고정댓글로 부연 설명을 추가 했습니다.
해당 내용(아래)
*이 영상에 대한 부연 설명: 이 영상은 프로퍼티의 기능에 대한 기본 가이드라인 영상으로 보시면 되고 이 영상을 참고 및 응용 하셔서 시청자님 스타일의 버튼을 생성하시면 됩니다.
예를들어 버튼 개체수와 스타일, Property 속성 등에 에 따라 버튼을 만드는 방법이 5개 이상이 될 수 있는거처럼, 이게 맞다 아니다 정답은 없습니다.
다만 이 영상을 만들 당시 이 방식이 최선이었고 프라퍼티 기능이 없었을 때 버튼을 생성하는 방법이 달랐던 것처럼 이후 더 효율적인 방법이 있다면 다른 방법으로 만들 수 있으니 이점 양해부탁드립니다
너무 궁금했던 부분인데 자세한 설명 감사합니다!! 그룹화 되어있는 컴포넌트 안의 아이콘을 스왑버튼 만들고 싶은데 properties 아이콘이 안보이는 건 왜 일까요ㅠ
3겹으로 중첩(버튼 인스턴스를 다시 컴포넌트로 만든 경우)되어 있는 컴포넌트이거나, 아이콘이 인스턴스가 아니어서인 경우로 추측되네요.
label-wrap에 불린 값을
줘서 아이콘만 있는 버튼 상태일때
패딩값이 들어가 있어서 완전한 원이 아니게되는데 어떻게 하신건가요?
영상 잘봤습니다. 추가로 궁금한 점이 있는데, 버튼 안쪽의 아이콘과 텍스트의 높이를 같게 하기위해 텍스트에 프레임에 씌워 오토레이 아웃으로 크기를 맞추셨던데, 그냥 텍스트의 라인 하이트를 조정하여 높이를 갖게 맞춰도 무방할까요?
테스트를 해보시면 좋을거 같아요~ 오토레이아웃 기능이 해제되어 텍스트 길이에 따라 버튼 container 길이가 자동으로 변경이 되지 않으실 거에요.
안녕하세요. 혹시 오토 레이아웃에서 가운데 정렬 마우스 커서 갖다대면 영상처럼 가운데 파랑색이 뜨지않는데 이 경우에는 어떻게해야하나요?
연정님 안녕하세요 : ) 훌륭한 강의 항상 감사합니다. 아이콘만 있는 버튼 제작하면서 궁금한 점이 있어 문의드려요.
variant의 HiddenLable 프로퍼티 값에서 레이블을 보임/숨김을 하기 위해, label_wrap(base+레이블)에 프로퍼티 값만 적용하면
좌우 패딩이 그대로 16, 상하 패딩 11 이라 정원형이 되지 않습니다.
'디자인 시스템을 위한 핵심 기능 Variants' 영상 내 인스턴스로 아이콘만 있는 버튼을 보여주시는 예시에서
HiddenLable 값만 조정해도 좌우 20에서 11로 패딩값이 함께 변경이 되던데, 프로퍼티 값만 조정해도 패딩값이 함께 변경된 부분을 해야될 지 알려주실 수 있을까요?
variants로 베리에이션 된 상태(lable이 없는 아이콘만 있는 버튼)의 버튼 컴포넌트들을 선택하여 padding도 함께 조정해 주시면 되요~ //가로 세로 사이즈가 동일하도록 세로 길이 기준으로 좌우 padding값 조정
선생님 안녕하세요. 인프런을 통해 알게 되어 유튜브까지 왔습니다.
선생님 강의 따라 버튼을 만들었는데 버튼 사이즈를 키우거나 늘이고 싶은 경우의 문의입니다. 비율에 맞춰 늘이고 줄이려고, 선택아이콘 > 스케일 아이콘 변경해서 크기를 조정했더니 소수점이 생겨버렸습니다. 이런 경우 (아이콘+텍스트 조합의) 버튼을 24px, 48px 사이즈 별로 따로 제작하시는 지 궁금합니다.
7:04 북맠
안녕하세요! 강의듣다가 질문드립니다! 저는 버튼아이콘을 선택하면 조준아이콘이 안되던데 어떻게해야되나요?? ㅠ
버튼 아이콘 누르고 컨트롤+알트+a 누르면 잡혀요 !
다시한번보다 궁금해지는점이 있는데요 base 방법 말고. 텍스트 높이를 hug가 아닌 fixed로 18로 변경해서 아이콘과 높이를 동일하게 하는 방법으로 하지 않은 이유는 뭔가요??
좋은 질문 감사합니다.😀 혹시, 높이를 hug가 아닌 fixed로 테스트 해보셨나요? 아마 fixed로 하고 텍스트 길이를 수정하시면 Auto Layout 기능이 안 먹힐거에요.
선생님 궁금한 점이 있습니다 머터리얼 아이콘 피그마 커뮤니티에서 복제해서 사용하는 방법으로 했는데 라인 굵기가 하나 밖에 없는 것 같아서요 ㅠㅠ 구글 머터리얼 아이콘 웹에 있는 것처럼 다양한 굵기 아이콘을 사용하려면 하나하나 다운로드 받아서 피그마에 적용해야 하나요? ㅠㅠ
그렇죠~ 하지만 이 영상에서 소개된 파일의 리소스만 사용하셔도 충분하실거에요!
연정님 혹시 마지막 적용사례에 Button variants 프레임이 옆으로 넓어지게 하는 것은 어떻게 해야될까요?
드레그 하시면 돼여~ (수동으로 변경 가능해요) 하지만 만약 사이즈 변경 시 안의 내용물의 위치가 의도되지 않게 변형 될 경우, 프레임의 constraints 속성 때문이니, 이때는 cmd(ctrl) 누른 상태에서 드레그하여 사이즈를 조정하시면 돼요~
안녕하세요 좋은 강의 감사합니다:) 궁금한점이 있어 문의드립니다. 아이콘+텍스트 버튼 컴포넌트를 생성할때 버튼 프레임의 높이값을 hug로 하고 투명프레임을 추가하는것과, 버튼 프레임의 높이값을 hug가 아닌 fixed 값으로 두고 사용하는것. 둘은 어떤차이가 있나요? (예시) 버튼프레임의 높이값을 hug로 하고 내부 투명프레임으로 높이40을 맞춤 vs 버튼프레임의 높이값을 40으로 fixed)
텍스트 레이어의 높이를 fixed 또는 오토 레이아웃 프레임의 높이를 fixed로 할 경우 오토 레이아웃 기능이 제대로 실행되지 않습니다. 예를 들어 텍스트 길이가 변경되어도 버튼 전체 사이즈가 고정됩니다.
도움이 되는 영상 정말 감사합니다!
영상대로 따라해서 머터리얼 아이콘을 복붙 하였는데요~
쉬프트+아이 를 눌러서 person을 쳐도 [No result for 'person'] 이라고 나오는데 ㅠㅠ 왜 이럴까요? 도움을 주실 수 있을까요?
으앗!! ㅎㅎ 제가 Admin Only 에서 복사한게 아니라 그냥 Design Icons에서 복사했네요;; ㅎㅎ
잘 해결되었습니다 :)
안녕하세요~ 버튼 행간 높이를 100%로 안하고 높이값 준 후 텍스트 Align 를 중앙으로 해서 사용해도 가운데에 정렬이 잘 되던데, 그렇게 해도 문제 없나요? 아니면 100%로 해야하는 피그마만의 이유가 있을까요? 작업하다가 궁금해서 문의드립니당!
안녕하세요. 좋은 질문 감사합니다. 방법은 여러가지가 있습니다. 다만 행간을 px로 할 경우 폰트 사이즈를 기준으로 행간을 매번 수정해야하는 데, 이 번거로움을 줄이기 위해 100%로 지정하는걸 선호하고 있습니다. 그 외에도 상하 여백을 주지 않고 버튼 높이를 기준으로 텍스트 행간을 px로 지정하는 방법도 있습니다.(이 방법은 브라우저별 호환성 대응을 위해 퍼블리싱 시 주로 사용하는 방법이나, 피그마에서 재수정 시 손이 많이 갈 수 있어요.)
@@yeonjung-figma 아하 수정하는 것에 대해 고려해서 방법을 선택하시는거군요! 답변 감사합니당💜
Negative = Error 로 보면 될까요?
넵. danger State 또는 error 등으로 보시면 될거 같습니다.
안녕하세요 연정님! 히든레이블 적용하실때 label만 적용하시는건지 아니면 오토레이아웃으로 만든 label_Wrap을 적용하시는지 알 수 있을까요? ㅠㅠ 적용해봤는데 피그마상에서 보라색네모박스가 잔흔처럼 남아보여서요 ..
혹시 어디를 말씀하시는지 분초로 알려 주실 수 있을까요 ? ex) 00:00
@@yeonjung-figma 아~ 적용하는걸 보여주시는 장면은 없구 17:31에 보면 Property 속성에 히든레이블이 있어서 저도 따라해봤거든요 ㅎㅎ 버튼만드실때 label 상위에 label_Wrap으로 만드셔서 어떤걸로 적용하시는지 궁금해서 여쭤봤어요~
안녕하세요,, 피그마 공부하는데 도움이 많이 됐습니다. 궁금한게 있는데, text에 create component preperty 설정하고나서 삭제할려면 입력한 속성을 삭제할려면 어떻게해야돼나요?
메인 컴포넌트 선택-> 속성에 대해 design 패널에서 Variants > 속성 이름 > 마우스 우클릭 후 delete 클릭하여 삭제 // 요렇게 하시면 되요~😀
@@yeonjung-figma 아~ 감사합니다~ 토근화하는 영상도 기대 많이 하겠습니다~^^
영상 잘봤습니다~ 질문이 있는데, 컴포넌트 프로퍼티 설정까지 하고서, Choose instance를 통해 인스턴스의 아이콘을 바꿔줄 때, 컴포넌트에서 설정된 색이 아닌 기존 아이콘 색으로만 고정되는데, 컴포넌트에서 지정한 색으로 적용되게 어떻게 할 수 있을까요? (영상의 15:53 부분처럼 프로퍼티 변경 시에 아이콘의 색이 같이 변경되지 않습니다)
총 세가지 방법으로 테스트를 해볼 수 있을 거 같은데요.
1.아이콘에셋이 레이어로 분리되어 있으면 그런 현상이 생길수 있어요~ 예를 들어 ‘?’를 백터 아이콘으로 생성 했는데 ‘.’ 이 별도로 분리되어 있다면 벡터 boolean > union selection 기능을 통해 두 레이어(각 도형을)를 하나의 레이어(도형)로 합쳐줘야해요. 이 때 하나의 레이어로 합친 후 flatten selection 으로 완전히 합체하는 걸 권장. (단, 이 경우 아이콘 형태 재수정이 힘들 수 있으니 원본 에셋을 복제후 테스트 하기를 권장) 2. 또하나는 아이콘이 선속성일 경우 면속성(마우스 우클릭 후 outline stroke 기능 이용)으로도 변경이 필요합니다.
3. 만약 아이콘이 듀오톤 아이콘이라면, 컬러 투명도별로 그룹핑하여 레이어 명을 통일해 줘야해요. 레이어 명도 컴포넌트 스왑 시 영향을 줄 수 있습니다. (참고 영상: ruclips.net/video/0MINAp0nwJ0/видео.html)
@@yeonjung-figma 친절한 답변 감사합니다! 전부 시도해봐야겠네요 :)
2:32 에서 가져온 붙여넣은 아이콘들은 다음 화면에서 컨버스에 따로 보이는 게 없는데 어디로 갔을까요?
페이지를 전환 했기 때문이 아닐까 추측해봅니다. 해당 화면과 다음 화면의 레이어 패널 및 페이지를 확인하시면 아실 수 있을 거 같아요.
@@yeonjung-figma 아! 말씀하신대로 붙여놓으신 아이콘은 page-icons에 붙여져있는 것 같네요! 중간중간 잘 체크해야겠습니다 :) 답변 감사드려요!! 이번 영상 variants는 알았는데 나머지 boolean, instance swap, text property는 처음 배우는데 신세계네요..! 엮어주신 영상도 추가로 봐야겠네요! 오늘도 좋은 정보 감사합니다 🥰
텍스트 높이값을 100%가 아니라 아예 px로 정해버리면 안되는 이유가 있나요? 선과 오토레이아웃 과정이 추가되는 게 꼭 필요한가 싶어서요.
좋은 질문이네요😀 안되는 이유는 없어요~ 반응형을 고려한다면 퍼센트가 픽셀보다 적합합니다. 그리고 픽셀로 했을 때 단점은 폰트 크기를 조절할 때마다 행간 수치를 조정해야하는 번거로움이 있어요. 결론은 업무적으로 더 효율적인건 퍼센트입니다.
다만, 버튼의 높이가 고정 사이즈인 경우, 텍스트를 버튼 높이 기준, 중앙에 고정시키기 위해 label의 행간을 버튼의 pixel 높이와 동일하게 하는 경우는 있습니다.
@@yeonjung-figma 음..저는 기본적으로 픽셀로 저장하는 버릇이 있다보니 여쭤본 거긴 한데 아무래도 폰트 크기가 변경될 수 있는 걸 감안해서인 것이군요. 답변 감사합니다. 좋은 참고가 되었습니다. :-)
16:24 부분 따라해보고 있는데요 . button 을 조준 아이콘으로 선택하고 컴포넌트 세트 안에 있는 모든 레이블을 선택하면 우측에Content 가 보여야하는데 찾을 수가 없습니다.왜 그런건지 제발 알려주세요🙏
혹시 버튼 variants 생성 시 중첩해서 컴포넌트 생성하셨나요?(ex. 버튼 컴포넌트를 다시 컴포넌트화)
@@yeonjung-figma 와 감사합니다. 새로운 버튼으로 다시 해보니 content 가 보여요.
제가 detach instant를 한 줄 알았는데 컴포넌트를 다시 컴포넌트화 했었네요~ 빠르고 정확한 설명 너무 감사드립니다🤗
Base와 텍스트 함께 오토레이어 적용하고 싶은데 안되네요.. (텍스트높이 hug입니다)
base와 텍스트를 감싸는 오토 레이아웃 프레임의 높이 리사이징 옵션도 hug인지 확인이 필요할 거 같아요. 만약 fixed 로 되어 있다면 hug로 변경하시면 됩니다.
연정님! 안녕하세요!.. 제가 궁금한점이있는데요.. 버튼 생성하고 프로퍼티 설정에서 아이콘 인스턴스를 추가했는데.. 인스턴스 컴포넌트로 빼서확인해 보니.. 아이콘을 다른 아이콘으로 변경했을 때 색상이 변하지 않던데, 이건 뭐때문인가요? ㅠㅠ 어떤건 되고 어떤건 안돼서 너무 답답합니다 ㅠㅠ
아이콘의 레이어가 혹시 하나 이상인가요? 혹시 아니라면 boolean 기능을 사용해서 모두 한 레이어로 합치시고 테스트해 보세요~
아웃라인과같은 stroke의 경우 stroke 속성을 해제해야 하고요~ 관련해서는 제가 업데이트 했던 영상중 아이콘 생성하기 영상을 참고해주세요~ruclips.net/video/4_WS782s96c/видео.htmlsi=NEgMDwyX4c48VRg8 이 영상에서 라인 속성 해제하는 방법 및 다중 벡터레이어에 대해 하나로 합치는 방법에 대해 다룬적이 있어요~
피그마 공식 영상 중 이 영상도 보시면 도움이 되실거에요~ ruclips.net/video/0MINAp0nwJ0/видео.htmlsi=Rbhz-DhS6xK8jsyY
@@yeonjung-figma 늦은시간 피드백 감사합니다…! 그 인스턴스 스왑할때 아이콘 에셋을 별도로 지정하지 않고 생성하니까 문제없이 잘되더러고요! 공유주신 영상 확인해보겠습니다 감사합니다!! 🫶🏻🫶🏻🫶🏻🫶🏻🫶🏻
12:39 boolean property는 언제 쓰는 건가요? 컴포넌트 상태에서 눈 깜빡이는 기능과 동일해보이는데 굳이 boolean property를 정해주는 이유를 잘 모르겠습니다.
좋은 질문 감사합니다.
boolean propery를 사용해야 하는 이유로, 다른 property와 마찬가지로 컴포넌트의 재사용 편의성 측면이 있을 거고요, 특히 협업 하는 사람도 컴포넌트를 어디까지 수정할 수 있는지 여부를 속성 옵션들로 인해 쉽게 인지 할 수 있게 하는 역할을 해요.
이 boolean property 기능이 추가되기 전에는 variant 의 value값을 true 또는 false, yes 또는 no로 아이콘과 같은 특정 레이어를 표시하거나 숨길 시 설정했었는데, boolean property를 사용하게 되면서, 컴포넌트를 대량 베리에이션 하는 수고를 줄일 수 있게 되었습니다.
쓰고 안쓰고는 개인의 선택이나, 위에 제가 나열한 사항을 고려해 보면, 업무효율성 측면에서 더 나은 옵션이라고 할 수 있어요.
단순히 콤포넌트의 일부 레이어를(ex . 아이콘) 레이어 패널에서 눈 아이콘으로 숨기거나 표시할 경우, 나중에 해당 컴포넌트들을 수정 할 때 일일이 하나 하나 찾아서 수정을 해야하는 이슈가 발생하므로 지양해야합니다. 가급적 variant 및 propery 기능들을 활용하여 컴포넌트를 생성하는 걸 권장드려요.
property를 사용해야 하는 적당한 예가 있어서 공유 드려요. facebook.com/100001337074592/posts/pfbid0NS9RZ1cbSDpNaQeTyxNiWKHJ9GpLXJ8nJv7u71xEXs1ddc46dobCAYj7zpqSVUrXl/?mibextid=kdkkhi
또한 극단적인 예로 컴포넌트의 Variants 베리에이션 개수를 120개에서 40개로 줄일 수 있기도 해요. 결론적으로 작업자의 시간도 절약이 되는거죠.
@@yeonjung-figma
늦은 시간인데도 정성스런 답글주셔서 감사합니다. 급한 마음에 냅다 질문 드렸는데, 더 공부하고 나니 왜 property를 쓰는지 알겠더라구요.
앞으로 다른 영상에서도 제 댓글이 더 보일지도 모르겠습니다. 좋은 영상 감사합니다!!
오늘 하루도 잘 마무리 하셨길 바래요🙂
@@yeonjung-figma 감사합니다!!!! 좋아요 꾸욱
안녕하세요. 머터리얼 아이콘 찾아 들어가니까 복제가 안뜨고 그냥 플러그인 추가라고 뜨던데 똑같은 건가요..? ㅠ 이제 처음 쓰느라 하나도 모르겠네요 ㅠ
영상 소개 내용 하단에 바로가기 링크 있어요~
아 감사합니다. ㅠ 기초부터 먼저 들어야겠네요..ㅠ
저는 행간 높이가 %가 아니라 숫자로 나오는데 바꿀 수 있는 방법이 있나요?
100% 처럼 뒤에 %를 붙이고 엔터하시면 되요~
감사합니다:)
12:44 boolean
구글 아이콘즈 이제 피그마에서 플러그인 된거 맞져??
앞 영상(ruclips.net/video/0d_yDFH47A4/видео.html)의 플러그인으로 이용하셔도 되고 이 영상의 예시처럼 파일을 이용하셔도 되요. 선택사항입니다.
12:52
감사합니다🙏🏻❤️🥲❤️
🤔 p̲r̲o̲m̲o̲s̲m̲