*이 영상에 대한 부연 설명: 이 영상은 프로퍼티의 기능에 대한 기본 가이드라인 영상으로 보시면 되고 이 영상을 참고 및 응용 하셔서 시청자님 스타일의 버튼을 생성하시면 됩니다. (재사용이 쉽게 구조화) 예를들어 버튼 개체수와 스타일, Property 속성 등에 에 따라 버튼을 만드는 방법은 5개 이상이 될 수 있는거처럼, 이게 맞다 아니다 정답은 없습니다. 다만 이 영상을 만들 당시 이 방식이 최선이었고 프라퍼티 기능이 없었을 때 버튼을 생성하는 방법이 달랐던 것처럼 이후 더 효율적인 방법이 있다면 다른 방법으로 만들 수 있으니 이점 양해부탁드립니다.
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
컨포넌트 버튼중 아이콘만 단독으로 있는 버튼을 만들때는 'base'와 text를 인스턴스로 만들어서 ture, false로 안보이게 하시는건가요? (텍스트들만 선택하고 ture false를 만드니까 만들어둔 'base'가 간격 인식이 돼서 정 원형의 버튼이 안만들어져서요) 입문자로써 강좌 너무 도움됩니다. 콘텐츠 만들어주셔서 감사합니다.
선생님 안녕하세요. 인프런을 통해 알게 되어 유튜브까지 왔습니다. 선생님 강의 따라 버튼을 만들었는데 버튼 사이즈를 키우거나 늘이고 싶은 경우의 문의입니다. 비율에 맞춰 늘이고 줄이려고, 선택아이콘 > 스케일 아이콘 변경해서 크기를 조정했더니 소수점이 생겨버렸습니다. 이런 경우 (아이콘+텍스트 조합의) 버튼을 24px, 48px 사이즈 별로 따로 제작하시는 지 궁금합니다.
안녕하세요. 매번 영상 잘 보고 있습니다. 영상과 관련 없는 궁금한 사항이 있어서요. 문의 드립니다. 피그마의 특정 파일만 슬랙의 특정 채널로 연동하는 방법이 있을까요? (ex. 피그마로 제작된 "회원가입" 파일에서 코멘트를 남기면, 슬랙의 "회원가입" 채널에서만 내용을 확인하고 싶습니다.) 영상과 관련없는 질문이라 죄송스럽네요~
연정님 안녕하세요 : ) 훌륭한 강의 항상 감사합니다. 아이콘만 있는 버튼 제작하면서 궁금한 점이 있어 문의드려요. variant의 HiddenLable 프로퍼티 값에서 레이블을 보임/숨김을 하기 위해, label_wrap(base+레이블)에 프로퍼티 값만 적용하면 좌우 패딩이 그대로 16, 상하 패딩 11 이라 정원형이 되지 않습니다. '디자인 시스템을 위한 핵심 기능 Variants' 영상 내 인스턴스로 아이콘만 있는 버튼을 보여주시는 예시에서 HiddenLable 값만 조정해도 좌우 20에서 11로 패딩값이 함께 변경이 되던데, 프로퍼티 값만 조정해도 패딩값이 함께 변경된 부분을 해야될 지 알려주실 수 있을까요?
자주 사용하는 컴포넌트들은 이미 대부분 정해져 있기때문에 Button, Card, Input 등과 같은 컴포넌트들은 머터리얼 디자인 시스템, 부트스트랩 등과 같이 사용하는 라이브러리를 기준으로 정의하고 있고여, 나머지 Elements 요소들은 네이밍 규칙을 정의해서 생성하고 있어여. (ex. 대소문자 규칙) 컴포넌트 속성과 관련된 참고 레퍼런스는 spectrum.adobe.com/page/action-button/ 추천 드립니다. 이번 영상 제작 시 참고했었습니다.
실무에 도움이 되는 영상들이라 항상 잘 보고 있습니다. 궁금한게 있는데, 피그마로 작업한 파일에서 여러개의 페이지 중 한 개만 공유할 수 있는 기능은 없을까요? 해당 페이지의 마우스 오른쪽 클릭 후 copy link to page로 공유해도 다른 페이지 목록이 다 보이더라구요.
안녕하세요. 좋은 질문 감사합니다. 방법은 여러가지가 있습니다. 다만 행간을 px로 할 경우 폰트 사이즈를 기준으로 행간을 매번 수정해야하는 데, 이 번거로움을 줄이기 위해 100%로 지정하는걸 선호하고 있습니다. 그 외에도 상하 여백을 주지 않고 버튼 높이를 기준으로 텍스트 행간을 px로 지정하는 방법도 있습니다.(이 방법은 브라우저별 호환성 대응을 위해 퍼블리싱 시 주로 사용하는 방법이나, 피그마에서 재수정 시 손이 많이 갈 수 있어요.)
안녕하세요 좋은 강의 감사합니다:) 궁금한점이 있어 문의드립니다. 아이콘+텍스트 버튼 컴포넌트를 생성할때 버튼 프레임의 높이값을 hug로 하고 투명프레임을 추가하는것과, 버튼 프레임의 높이값을 hug가 아닌 fixed 값으로 두고 사용하는것. 둘은 어떤차이가 있나요? (예시) 버튼프레임의 높이값을 hug로 하고 내부 투명프레임으로 높이40을 맞춤 vs 버튼프레임의 높이값을 40으로 fixed)
좋은 질문 감사합니다. 피그마는 협업에 강점을 둔 툴이라는 것에 초점을 두고 추측을 해볼 수 있을 거 같아요 *직접 바꾸는 것의 문제점: 컴포넌트는 만든 사람만이 컴포넌트를 어디까지 오버라이드(인스턴스를 수정하는 것이 어디까지 허용되는지 여부) 할 수 있는지 정확히 안다는 이슈가 있습니다. 이를 가이드에 컴포넌트를 만든 사람이 안내를 할 수 있지만 협업하는 사람들이 쉽게 놓치는 부분이라 교정이 필요한 경우가 발생하곤 합니다. 협업하는 사람들이 매번 물어보면 그것도 커뮤니케이션 리소스가 되겠죠. -> 즉 두 명 이상의 피그마 편집자가 있다고 가정 할 때, instance swap property 뿐만아니라 variants,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를 쓰는지 알겠더라구요. 앞으로 다른 영상에서도 제 댓글이 더 보일지도 모르겠습니다. 좋은 영상 감사합니다!! 오늘 하루도 잘 마무리 하셨길 바래요🙂
프로퍼티스 기능에서 영상에선 없던 State, HiddenLabel, Size 등록 방법은 어떤 영상을 참고 하면 될까요? 베리언츠 한 버튼을 텍스트 없이 아이콘만 남겼을때 원형이 안되고 타원형이 되는데 그부분에 대한 자세한 영상은 없을까요? 영상 링크 알려주시면 감사하겠습니다~
최근 다른 시청자분이 같은 질문이 있어서 고정댓글로 부연 설명을 추가 했습니다. 해당 내용(아래) *이 영상에 대한 부연 설명: 이 영상은 프로퍼티의 기능에 대한 기본 가이드라인 영상으로 보시면 되고 이 영상을 참고 및 응용 하셔서 시청자님 스타일의 버튼을 생성하시면 됩니다. 예를들어 버튼 개체수와 스타일, Property 속성 등에 에 따라 버튼을 만드는 방법이 5개 이상이 될 수 있는거처럼, 이게 맞다 아니다 정답은 없습니다. 다만 이 영상을 만들 당시 이 방식이 최선이었고 프라퍼티 기능이 없었을 때 버튼을 생성하는 방법이 달랐던 것처럼 이후 더 효율적인 방법이 있다면 다른 방법으로 만들 수 있으니 이점 양해부탁드립니다
선생님 궁금한 점이 있습니다 머터리얼 아이콘 피그마 커뮤니티에서 복제해서 사용하는 방법으로 했는데 라인 굵기가 하나 밖에 없는 것 같아서요 ㅠㅠ 구글 머터리얼 아이콘 웹에 있는 것처럼 다양한 굵기 아이콘을 사용하려면 하나하나 다운로드 받아서 피그마에 적용해야 하나요? ㅠㅠ
영상 잘봤습니다~ 질문이 있는데, 컴포넌트 프로퍼티 설정까지 하고서, Choose instance를 통해 인스턴스의 아이콘을 바꿔줄 때, 컴포넌트에서 설정된 색이 아닌 기존 아이콘 색으로만 고정되는데, 컴포넌트에서 지정한 색으로 적용되게 어떻게 할 수 있을까요? (영상의 15:53 부분처럼 프로퍼티 변경 시에 아이콘의 색이 같이 변경되지 않습니다)
총 세가지 방법으로 테스트를 해볼 수 있을 거 같은데요. 1.아이콘에셋이 레이어로 분리되어 있으면 그런 현상이 생길수 있어요~ 예를 들어 ‘?’를 백터 아이콘으로 생성 했는데 ‘.’ 이 별도로 분리되어 있다면 벡터 boolean > union selection 기능을 통해 두 레이어(각 도형을)를 하나의 레이어(도형)로 합쳐줘야해요. 이 때 하나의 레이어로 합친 후 flatten selection 으로 완전히 합체하는 걸 권장. (단, 이 경우 아이콘 형태 재수정이 힘들 수 있으니 원본 에셋을 복제후 테스트 하기를 권장) 2. 또하나는 아이콘이 선속성일 경우 면속성(마우스 우클릭 후 outline stroke 기능 이용)으로도 변경이 필요합니다. 3. 만약 아이콘이 듀오톤 아이콘이라면, 컬러 투명도별로 그룹핑하여 레이어 명을 통일해 줘야해요. 레이어 명도 컴포넌트 스왑 시 영향을 줄 수 있습니다. (참고 영상: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0MINAp0nwJ0.html)
아이콘의 레이어가 혹시 하나 이상인가요? 혹시 아니라면 boolean 기능을 사용해서 모두 한 레이어로 합치시고 테스트해 보세요~ 아웃라인과같은 stroke의 경우 stroke 속성을 해제해야 하고요~ 관련해서는 제가 업데이트 했던 영상중 아이콘 생성하기 영상을 참고해주세요~ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4_WS782s96c.htmlsi=NEgMDwyX4c48VRg8 이 영상에서 라인 속성 해제하는 방법 및 다중 벡터레이어에 대해 하나로 합치는 방법에 대해 다룬적이 있어요~
좋은 질문이네요😀 안되는 이유는 없어요~ 반응형을 고려한다면 퍼센트가 픽셀보다 적합합니다. 그리고 픽셀로 했을 때 단점은 폰트 크기를 조절할 때마다 행간 수치를 조정해야하는 번거로움이 있어요. 결론은 업무적으로 더 효율적인건 퍼센트입니다. 다만, 버튼의 높이가 고정 사이즈인 경우, 텍스트를 버튼 높이 기준, 중앙에 고정시키기 위해 label의 행간을 버튼의 pixel 높이와 동일하게 하는 경우는 있습니다.
@@yeonjung-figma 아! 말씀하신대로 붙여놓으신 아이콘은 page-icons에 붙여져있는 것 같네요! 중간중간 잘 체크해야겠습니다 :) 답변 감사드려요!! 이번 영상 variants는 알았는데 나머지 boolean, instance swap, text property는 처음 배우는데 신세계네요..! 엮어주신 영상도 추가로 봐야겠네요! 오늘도 좋은 정보 감사합니다 🥰