버튼이 어디 영역에 쓰이느냐에 따라 오토레이아웃 기능으로 만들지 여부를 결정해야합니다. 오토 레이아웃으로 버튼을 만들 경우, 텍스트나 아이콘 가로 길이 기준으로 버튼의 Max 가로 길이가 결정 되기 때문이죠~ 아이콘이 없이 텍스트만 있는 일반 버튼의 경우 오토레이아웃 없이 컴포넌트화 하는 것을 추천드려요. 딱히 룰은 아니지만 제 경험상 그랬습니다. 예를들어 2 또는 3등분 탭버튼을 만들경우, 일반 컴포넌트형 버튼으로, 가로로 스크롤되는 스크롤러블 탭 버튼의 경우는 오토레이아웃을 이용시 편리합니다.
안녕하세요 잘 보고 있는데.. 2:22 이 부분에서 인스턴스 컴포넌트에 Reset Overrides라는 메뉴가 저는 없어요..ㅠㅠ Go to Master Component도 버튼이 없는데 지금은 그냥 단순 아이콘으로 표시가 되는 거 같습니다. 3:03 이 부분 마스터 컴포넌트의 이름을 변경했는데 인스턴스 컴포넌트 레이어 이름이 같이 변경이 안 됩니다..ㅠㅠ 4:14 에서 button 글자 클릭 후 W에 숫자값 넣어주는 것도 저는 입력창이 활성화가 안 돼요ㅠㅠ
안녕하세요. 작은 버튼 템플릿이 아닌, 배경 템플릿에 관해서 인데요. 배경 마스터 템플릿을 컴포넌트로 등록하여 마스터 배경 템플릿으로 만들어서, 그것을 복사해서 대량의 배경 템플릿을 만들고 그 안에 각각의 내용을 작성 한 상태에서, 배경을 일괄적으로 변경하고자 할때 마스터 템플릿 컴포넌트의 배경만 색상을 변경하거나 배경을 변경하면 복사한 템플릿의 배경이 일괄적으로 변경되게 하는 방법이 있나요. 이렇게 하려고 하는데 배경 템플릿을 컴포넌트화 하면 더이상 템플릿이 아니게 되어, 그 배경 컴포넌터 안에 내용을 집어 넣어도 배경 템플릿을 이동했을 때 배경 템플릿 안의 내용물들은 따라오지 않는 문제가 있더라구요. 혹시 수많은 템플릿의 배경을 일괄적으로 변경하는 올바른 방법이 있을까요
사실 영상에서는 detach 기능을 설명드리기 위해서 인스턴스를 detach 했었습니다. 보통 인스턴스는 수정을 하는 것에 한계가 있어서 기존 틀에서 일부를 수정해서 새로운 컴포넌트를 만드는 경우 사용하는데, 의외로 detach 기능을 사용하게 되는 경우가 종종 생깁니다.(생각 보다 자주, 그래서 단축키를 외우게 되었어요 ㅎ) 특히 아이콘 컴포넌트 추가할 때 많이 사용 했습니다. ruclips.net/video/lMOJ1ijO9hs/видео.html 이 영상이 최신 영상이니 이 영상을 참고해주세요~ 그리고 그 영상에는 담지 못했는데 예전에 variants 기능이 업데이트 되기 전에는 편의상 버튼 컴포넌트를 복제한 인스턴스를 다시 create component 해서 중첩하여 hover나 disabled 상태의 컴포넌트를 생성했었습니다. 요즘은 그 방식은 지양하고 있습니다. 그 점도 참고해주세요~
안녕하세요 연정님, 유용한 강의 너무 잘 듣고 있습니다! 감사합니다!! 가능하다면 한가지 여쭤보고 싶은게 있는데요. 화면 프로토타입을 끝낸 후 UI디자인을 할 때, 개발자에게 한 페이지 단위로 디자인해서 주는 것이 아닌 컴포넌트(아이콘 등등..) 먼저 디자인해서 넘기나요..? 저는 현업에 종사하는 전문적인 디자이너는 아니고 개발자친구랑 같이 사이드프로젝트를 진행하고 있는데요. 저는 페이지 단위로 일단 구성을 하고 그 안에 들어가는 아이콘들을 컴포넌트화 한 후, 전달주는게 맞다고 생각하거든요. 예를들어 로그인화면을 구성한다고 하면, 로그인 페이지를 만든 후 -> 회원가입 아이콘 디자인 -> 컴포넌트로 만들어서 전달 .. 으로 알고있는데 개발자 친구는 페이지 단위로 하면 시간이 오래 걸리니, 컴포넌트 먼저 디자인해서 넘겨달라고 했거든요. 근데 이 부분이 잘 이해가 안가서 현업에서는 어떤 프로세스로 진행하는지 알 수 있을까요? 주변에 딱히 물어볼 사람이 없어서 댓글 남겨봅니다 .. !
안녕하세요. 회사마다 일정에 따라 프로세스는 달라질 수 있을 거 같아요, 보통은 더미 아이콘이 포함된 시안 작업 -> 프로토타입핑 -> 더미(임시 리소스) 아이콘 리디자인(시간이 없다면 생략)이 일반적이긴 해요. 하지만 아이콘 디자인은 시간이 많이 소요되므로 일정이 급한경우, 굳이 다 그려서 만들 필요는 없고 유료 아이콘, 또는 오픈 소스도 많이 활용합니다. 더미든 직접 디자인한 아이콘이든 컴포넌트화해서 넘기면 추후 아이콘 디자인이 변경되도 디자이너도 개발자도 수정 & 업데이트 하기 편하기 때문에 컴포넌트화 해서 개발자에게 전달 드리는걸 추천드려요. 팁을 드리자면 저의 경우 웹 프로젝트는 폰트어썸 아이콘을 사용하고 있어요. 아이콘을 폰트처럼 사이즈를 조정하거나 스타일 변경이 자유롭기 때문에 프로토타입핑 작업 시 디자이너도 개발자도 시간을 많이 절약 할 수 있습니다. 이에 대한 자세한 내용은 저의 블로그에 있으니 관심있다면 참고해보세요~ 모바일 앱 프로토타입핑이라면 구글 머터리얼 아이콘을 활용하셔도 되고요~
안뇽하세요..연정님! 아까 학습했던 영상 다시 복습하려고 하는데용..인액티브버튼 밑쪽엔 옅은 회색 라인이 있는데 그 부분은 영상에 안나오는 것 같은데 그런 부분은 인스턴스컴포넌트에서 2px액티브라인 눈감고, 그 자리에 1px회색라인을 넣으면 레이어 패널에서 인스턴스컴포넌트 안에는 안들어가고 바로 위에 레이어링되는데 그냥 그담에 바로 인스턴스+회색라인 싸잡아서 creat component 하면 맞는걸까용...? 답변 주시면 답답함이 싹 가실 것 같습니다!!ㅜ,ㅜ
@@yelli_930 인스턴스의 특성상 제한적으로 수정 할 수 있습니다. (컬러, 폰트 변경, 인스턴스 swap 등) 즉 높이나 가로 길이 속성은 메인 컴포넌트에서 설정해야 해요. (오토 레이아웃 기능을 활용한 컴포넌트인 경우, 여백 사이즈를 조정하여, 인스턴스의 사이즈 조정은 가능하나 권장드리진 않습니다.) variants 기능 관련 영상을 꼭 참고해주세요~
이미 컴포넌트로 만든 객체에 대해서 만들자 마자 Command(Ctrl) + Z로 취소 하지 않는 이상 취소는 불가합니다. 이미 만든 객체를 지우고 다시 생성해서 만들거나 만든 컴포넌트를 수정하여 재활용 할 수있습니다. 조금 번거롭지만 달리 방법이 없어서그렇게 작업했었는데 혹시 더 좋은 방법을 아시는 분이 계시다면 답글로 남겨주세요~
bg의 constraints 옵션을 scale로 안하신듯하네요. 객체를 선택하고 우측 디자인 패널의 constraints 옵션을 scale로 변경해보시는걸 추천드려요. 버튼처럼 프레임 크기를 변경 시, 텍스트가 정 중앙에 표시되길 원하시면 constraints 옵션을 center로 변경하면 됩니다.
기술적인 측면에서의 질문이라면 컴포넌트는 수정이 가능합니다. 컴포넌트를 복제한 인스턴스도 제한적이지만 컬러나 네이밍 등 일부 속성 수정 가능하고요. 메인 컴포넌트를 수정하면 인스턴트도 같이 일괄 수정이 됩니다. 예를들어 아이콘이 없던 버튼 컴포넌트에 아이콘을 삽입하면 연결된 인스턴스에도 아이콘이 생깁니다. 이 인스턴스의 아이콘을 레이어 패널에서 숨길 수도 있습니다. 첨언하자면 한번 제작한 버튼, form 등의 기본 컴포넌트들의 경우 서비스 런칭후 리뉴얼이 되지 않는 이상 수정할 일은 거의 없습니다. 보통 디자이너들은 인스턴스를 가지고 작업을 하게 됩니다. 실제 실무에서는 메인 컴포넌트를 수정 가능 할 사람을(권한) 제한했었습니다. 컴포넌트 수정 시 1픽셀이라도 작은 변화가 있을 시 다른 페이지 또는 다른 결과물에도 영향을 주기때문이죠. 참고 영상 : 피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma ruclips.net/video/uLAqWDoa6oU/видео.html
@@yeonjung-figma 답변 감사드립니다. 모바일 디자인할때 가로사이즈가 414인데 탭바버튼이 5개인데 나누기5하면 가로사이즈가 82.8이 나오는데, 버튼1개당 컴포넌트1개씩 각각 해서 총 액티브5개, 넌액티브5개해서 1개씩 넣어주는식으로 하는거 맞나요? 10개면 10개 다 만들어주나요? , 그리고 5:34, 8:01에 보면 컴포넌트에서 → 끌어와서 인액티브를 만든뒤에 → 그걸 다시 컴포넌트 했는데, 왜 그 컴포넌트에서는 인포넌트위로 컴포넌트가 생기고, Line 레이어가 안지워지나요? 새로 아이콘을 다 바꿔야 하는데 새로 넣어지지도 않습니다. ㅠㅠ 이거떄문에 미치겠어요 ㅠㅠㅠ 좋은강의로 너무 감사드리는데 컴포넌트/오토레이아웃에서 스트레스 너무 받고있어요 도와주세요 ㅠㅠㅠ
![[피그마] 인터랙티브 컴포넌트를 이용한 드롭다운 메뉴 구성하기](http://i.ytimg.com/vi/2REVAaJz3Yo/mqdefault.jpg)
![[UX/UI디자인] 디자인 시스템 작업 실무 프로세스 이야기](/img/1.gif)
와 이 영상내용 진짜 신세계네요.....
스마트하다 정말...일은 이렇게 똑소리나게 해야하는군요!! 너무 멋져요!! 강의도 기능도!!
조곤 조곤 설명하시는게 듣기 너무 편안하네요
헉 이래서 컴포넌트를 사용하는 거였군요..! 이 강의 듣다보니까 툴도 툴이지만 피그마 이제라도 배우길 잘한것 같아요..! 정말 감사합니다
감사합니다 아직 배우는 중이라 어렵게 느껴지긴 하는데, 딱 깔끔하게 정리된 피그마 강의가 별로 없어서 가뭄의 단비같네요 ㅎㅎ
최고입니다 ㅠㅠ 정말 감사합니다
답글 감사합니다~~♡
정말 감사합니다! 디자이너가 저 혼자인데 도움이 되었습니다
너무 좋은 자료들 감사합니다
디테일한 부분까지 설명해 주셔서 오늘도 잘 보고 있습니다! 😘
9/17 figma의 컴포넌트 및 인스턴스 기능 업데이트 관련 포스팅 { designer-story.tistory.com/28 }
[컴포넌트 개념정리 - 블로그] designer-story.tistory.com/18
[변경된 컴포넌트 UX] designer-story.tistory.com/37
처음으로 디자인 툴을 사용해보는 웹개발자입니다. 너무너무 유용한 강의 잘 들었습니다 😄
유익한 강의 넘 감사합니다❤
이어폰으로 듣는데 엔터 치시는 소리가 조금 크네유 ㅠㅠㅎㅎㅎ 습관이신것 같습니다😆
너무 좋은 강의 감사합니다~!! 1편에 이어서 2편도 꿀꿀^-^!
어제 오늘 컴포넌트에 대해 최신 버전으로 새롭게 제작 중입니다~ 다음주 중에 업데이트 예정인데 그 영상도 참고해주세용 ~ 이 버전에서 추가 되거나 변경된 사항을 반영하여 업데이트 예정입니다. ㅎㅎ
기본 개념 정리가 필요했는데 너무 잘보았습니다.^^
컴포넌트에 대한 영상을 준비하는데 피그마에 대한 소개 영상 다음으로 시간이 많이 소요 되었던거 같네요. 그 만큼 중요한 기능인 거 같습니다~ 덕분에 힘을 얻고 다음 영상도 준비해 보렵니다. 감사합니다~
좋은 영상 제작해서 공유해 주셔서 진심으로 감사드립니다.
그룹핑을 하며 인스턴스를 전환하는것은 Variable 기능과 같은거죠?
잘 보았습니다.
언제나 항상 응원해 주셔서 감사합니다~ !! 감기 조심하세요!!
FIGMA에 대한 기본정리가 잘되어있는 채널 찾아서 기쁘네요
포토샵 사용할때 레이어 정리 잘해야 한다는 이야기 많이 들었는데
피그마도 마찬가지겠죠...?
컴포넌트, auto layout, 그룹 종류가 많으니까 정신을 못차리겠네요
넵~ 추후에 수정하기 편하려면 그룹핑과 네이밍 정리는 기본인거 같아요. 영상들을 순서데로 모두 청취하시는 걸 추천드려요. 체계적으로 알아 갈 수있도록 제작했습니다.
Figma 처음 배워보고있는데 너무 잘 보고 갑니다. 감사해요.
긍정적인 피드백 감사합니당 ㅎㅎ 좋은 하루 되세용 ㅎㅎ
*컴포넌트 참고 블로그 : designer-story.tistory.com/18
조만간 최신 버전의 컴포넌트 강좌 영상을 업데이트 할 예정입니다.
* Master 컴포넌트의 명칭이 최근 Main 컴포넌트로 변경되었습니다.
5:19에서 인스턴스 바깥으로 또다시 메인컴포넌트를 해주는 이유는 무엇일까요?? 그냥 인액티브로 바꾼 인스턴스를 디태치해준담에 메인컴포넌트로 만들어주면 안되는걸까요?
꼭 컴포넌트를 두겹(기존 인스턴스+새로 메인) 씌워야 하나요??
[Figma 사용 Tip] 인스턴스 속성 Reset 하는 방법
출처: designer-story.tistory.com/37 [연정's Figma]
박스만들고 텍스트넣어서 컴포넌트 설정이랑. 오토레이아웃으로 바탕칠하고 컴포넌트으로 생성하는거랑은 다른건가요? ㅠ
버튼이 어디 영역에 쓰이느냐에 따라 오토레이아웃 기능으로 만들지 여부를 결정해야합니다. 오토 레이아웃으로 버튼을 만들 경우, 텍스트나 아이콘 가로 길이 기준으로 버튼의 Max 가로 길이가 결정 되기 때문이죠~ 아이콘이 없이 텍스트만 있는 일반 버튼의 경우 오토레이아웃 없이 컴포넌트화 하는 것을 추천드려요. 딱히 룰은 아니지만 제 경험상 그랬습니다.
예를들어 2 또는 3등분 탭버튼을 만들경우, 일반 컴포넌트형 버튼으로, 가로로 스크롤되는 스크롤러블 탭 버튼의 경우는 오토레이아웃을 이용시 편리합니다.
연정's Figma 감사합니다 낼바로 적용해봐야겠어요!
안녕하세요! 강의 듣다 질문이 있어 댓글 남깁니다!!
instance를 만들어줬는데 오른쪽에 DESIGN 옵션에 instance 메뉴가 뜨지를 않습니다 ㅠㅠ 어떻게 해야하나요??
영상의 위치랑 현재랑 달라서 일거에요~ (인터페이스가 업데이트 되면서) 최신 영상 참고해주세요~ ruclips.net/video/BpnJUxl_MwU/видео.html
강의 잘 듣고 가요!! 연정님 혹시 스케치 option+tab 같이 우측 패널 x,y값으로 이동하는 단축키는 없을까요?ㅠㅠ.. 단축키 찾아보다가 못찾아서 질문 남겨봅니당....ㅠㅠ....
shift+방향키로 하면 기본 10px 씩 이동 되요. 이 10px 옵션값도 커스터마이징이 가능합니다. 예를 들어 10px 대신 8px로
질문에 대한 답변이 맞을까요? ㅎㅎ
글자를 컴포넌트 한 다음에 왜 가로 세로 변경이 안되게 설정이 될까요..? ㅠㅠㅠ 여기서 막혔습니다..
여쭤볼게 있습니다
앱 또는 모바일 디자인에서
오토 레이아웃 적용 후
터치 영역 설정은 어떻게 하시나요??
안녕하세요! 강의 잘 보고 있습니다! 4:10 의 숫자 너비 변경이 안되는데 혹시 해결 방법이 있을까요? 제가 놓친건가싶어 계속 반복중입니다 ㅠㅠ
text에서 ㅁ을 눌러보세요
안녕하세요 잘 보고 있는데..
2:22 이 부분에서 인스턴스 컴포넌트에 Reset Overrides라는 메뉴가 저는 없어요..ㅠㅠ
Go to Master Component도 버튼이 없는데 지금은 그냥 단순 아이콘으로 표시가 되는 거 같습니다.
3:03 이 부분 마스터 컴포넌트의 이름을 변경했는데 인스턴스 컴포넌트 레이어 이름이 같이 변경이 안 됩니다..ㅠㅠ
4:14 에서 button 글자 클릭 후 W에 숫자값 넣어주는 것도 저는 입력창이 활성화가 안 돼요ㅠㅠ
안녕하세요~😀 이 영상은 2년전 영상이므로 컴포넌트의 개념 정도만 참고하시고 변경된 인터페이스는 최신 영상을 참고해주세요~ ruclips.net/video/WOQ48AL1_Rk/видео.htmlsi=D4MmNc25-aZd_0Os
안녕하세요. 작은 버튼 템플릿이 아닌, 배경 템플릿에 관해서 인데요. 배경 마스터 템플릿을 컴포넌트로 등록하여 마스터 배경 템플릿으로 만들어서, 그것을 복사해서 대량의 배경 템플릿을 만들고 그 안에 각각의 내용을 작성 한 상태에서, 배경을 일괄적으로 변경하고자 할때 마스터 템플릿 컴포넌트의 배경만 색상을 변경하거나 배경을 변경하면 복사한 템플릿의 배경이 일괄적으로 변경되게 하는 방법이 있나요. 이렇게 하려고 하는데 배경 템플릿을 컴포넌트화 하면 더이상 템플릿이 아니게 되어, 그 배경 컴포넌터 안에 내용을 집어 넣어도 배경 템플릿을 이동했을 때 배경 템플릿 안의 내용물들은 따라오지 않는 문제가 있더라구요. 혹시 수많은 템플릿의 배경을 일괄적으로 변경하는 올바른 방법이 있을까요
컴포넌트 처리 후 텍스트의 넓이 값 수정하고 싶은데 활성화가 안 되면 어떻게 하나요 ?
저도 알고싶어요… ㅠㅠ
10:00~10:32 에 설명해주신
detach component 후 다시 create component를 한 구조는
주로 어떠한 상황에 사용되나요?
사실 영상에서는 detach 기능을 설명드리기 위해서 인스턴스를 detach 했었습니다. 보통 인스턴스는 수정을 하는 것에 한계가 있어서 기존 틀에서 일부를 수정해서 새로운 컴포넌트를 만드는 경우 사용하는데, 의외로 detach 기능을 사용하게 되는 경우가 종종 생깁니다.(생각 보다 자주, 그래서 단축키를 외우게 되었어요 ㅎ) 특히 아이콘 컴포넌트 추가할 때 많이 사용 했습니다.
ruclips.net/video/lMOJ1ijO9hs/видео.html 이 영상이 최신 영상이니 이 영상을 참고해주세요~
그리고 그 영상에는 담지 못했는데 예전에 variants 기능이 업데이트 되기 전에는 편의상 버튼 컴포넌트를 복제한 인스턴스를 다시 create component 해서 중첩하여 hover나 disabled 상태의 컴포넌트를 생성했었습니다. 요즘은 그 방식은 지양하고 있습니다. 그 점도 참고해주세요~
안녕하세요 연정님, 유용한 강의 너무 잘 듣고 있습니다! 감사합니다!! 가능하다면 한가지 여쭤보고 싶은게 있는데요. 화면 프로토타입을 끝낸 후 UI디자인을 할 때, 개발자에게 한 페이지 단위로 디자인해서 주는 것이 아닌 컴포넌트(아이콘 등등..) 먼저 디자인해서 넘기나요..? 저는 현업에 종사하는 전문적인 디자이너는 아니고 개발자친구랑 같이 사이드프로젝트를 진행하고 있는데요. 저는 페이지 단위로 일단 구성을 하고 그 안에 들어가는 아이콘들을 컴포넌트화 한 후, 전달주는게 맞다고 생각하거든요. 예를들어 로그인화면을 구성한다고 하면, 로그인 페이지를 만든 후 -> 회원가입 아이콘 디자인 -> 컴포넌트로 만들어서 전달 .. 으로 알고있는데 개발자 친구는 페이지 단위로 하면 시간이 오래 걸리니, 컴포넌트 먼저 디자인해서 넘겨달라고 했거든요. 근데 이 부분이 잘 이해가 안가서 현업에서는 어떤 프로세스로 진행하는지 알 수 있을까요? 주변에 딱히 물어볼 사람이 없어서 댓글 남겨봅니다 .. !
안녕하세요. 회사마다 일정에 따라 프로세스는 달라질 수 있을 거 같아요, 보통은 더미 아이콘이 포함된 시안 작업 -> 프로토타입핑 -> 더미(임시 리소스) 아이콘 리디자인(시간이 없다면 생략)이 일반적이긴 해요.
하지만 아이콘 디자인은 시간이 많이 소요되므로 일정이 급한경우, 굳이 다 그려서 만들 필요는 없고 유료 아이콘, 또는 오픈 소스도 많이 활용합니다. 더미든 직접 디자인한 아이콘이든 컴포넌트화해서 넘기면 추후 아이콘 디자인이 변경되도 디자이너도 개발자도 수정 & 업데이트 하기 편하기 때문에 컴포넌트화 해서 개발자에게 전달 드리는걸 추천드려요.
팁을 드리자면 저의 경우 웹 프로젝트는 폰트어썸 아이콘을 사용하고 있어요. 아이콘을 폰트처럼 사이즈를 조정하거나 스타일 변경이 자유롭기 때문에 프로토타입핑 작업 시 디자이너도 개발자도 시간을 많이 절약 할 수 있습니다. 이에 대한 자세한 내용은 저의 블로그에 있으니 관심있다면 참고해보세요~ 모바일 앱 프로토타입핑이라면 구글 머터리얼 아이콘을 활용하셔도 되고요~
@@yeonjung-figma 오 상세한 설명 정말 감사합니다! 도움이 많이 됐어요~! 블로그도 참고해볼게요 감사합니다!! :)
👍👍👍👍👍
유용한 강의 감사합니다. 혹시 New file 생성하면 컴포넌트 만들었던 것들이 불러와지는지 궁금합니다.
팀라이브러리 기능 영상 참고하시면 도움이 될 거 같아요.(단 무료플랜 사용시 이용불가)
*최신 버전 컴포넌트 및 Variants 기능 가이드 영상: ruclips.net/video/lMOJ1ijO9hs/видео.html
감사합니다. 하나하나 잘 배우고 있는데 4분10초에 텍스트의 가로길이를 120-32 설정하는 부분이 저는 비활성화 되어있는데 이건 피그마가 이때의 영상과 무엇이 달라져서 그러는건지 모르겠습니다. 이 부분은 꼭 필요해 보이는데 저는 계속 width가 비활성화 되어있네요
Text에서 auto width 또는 auto height가 아니라 Fixed size로 바꾸니까 되네요!
@@냥냥펀치-h8v 완전 감사해요🥰
안녕하세요 연정님 강의 잘듣고있습니다! ㄹ혹시 컴퍼넌트 해제를 하는 방법은 뭘지 궁금합니다..ㅜ
삭제하시는 거 외에는 없을거에요~
제가 아이콘잇는 서브메뉴를 만들엇는데.. 아이콘이랑 텍스트도 같이 바껴 버리는데 혹시 어디가 잘못된걸까요..? 아무리 돌려봐도 똑같이 만들엇는데 왜 안되는걸까요...ㅠㅠ 제발알려주세요........ㅠ
그리구 옆으로 스크롤되는건 어케응용해야할까요 ㅠㅠ
MUI에서 컴포넌트를 가져와
Ditatch Instance를 해버리니 우측 옵션들이 다 사라져버리는데(예를들면 listItmem의 isOpen같은 프로퍼티)
이런 옵션값들을 유지하면서 Ditatch하는 방법은 없을까요?
없습니다!
글자 길이에 따라 라인 길이도 줄었다 길어졌다 하는 방법도 있나요??
안뇽하세요..연정님! 아까 학습했던 영상 다시 복습하려고 하는데용..인액티브버튼 밑쪽엔 옅은 회색 라인이 있는데 그 부분은 영상에 안나오는 것 같은데
그런 부분은 인스턴스컴포넌트에서 2px액티브라인 눈감고, 그 자리에 1px회색라인을 넣으면 레이어 패널에서 인스턴스컴포넌트 안에는 안들어가고
바로 위에 레이어링되는데 그냥 그담에 바로 인스턴스+회색라인 싸잡아서 creat component 하면 맞는걸까용...? 답변 주시면 답답함이 싹 가실 것 같습니다!!ㅜ,ㅜ
이 강의의 다른 댓글들 보니까 연정님께서 이 방식은 요즘 하지않고 variants기능으로 이 과정을 아예 대체한다고 하신 것 같은데 제가 이해한 내용이 말씀하신 내용일까요?_?
그리고 질문 하나만 더 여쭐 수 있다면,, 인스턴스 컴포넌트에는 왜 레이블의 텍스트나 컬러만 바꿀 수 있고 그 안에 도형개체를 추가하거나 도형의 width/height값은 수정 못하나요?ㅜㅜ(인스턴스인)컴포넌트그룹 안에는 안들어가는데 이건 왜일까요..??ㅠㅠㅠㅠ
@@yelli_930 맞습니다. 인스턴스를 다시 컴포넌트화 하지 않고 variants 기능을 사용하는 걸 권장드려요.
@@yeonjung-figma 아하 그렇군요..! variants로 깔끔하게 작업을 하는군요..! 과정은 전자가 더 간편한 것 같은데 협업에는 variants가 편해서 그런걸까요? 라이브러리화?
@@yelli_930 인스턴스의 특성상 제한적으로 수정 할 수 있습니다. (컬러, 폰트 변경, 인스턴스 swap 등) 즉 높이나 가로 길이 속성은 메인 컴포넌트에서 설정해야 해요. (오토 레이아웃 기능을 활용한 컴포넌트인 경우, 여백 사이즈를 조정하여, 인스턴스의 사이즈 조정은 가능하나 권장드리진 않습니다.) variants 기능 관련 영상을 꼭 참고해주세요~
아니 갑자기 2:00 인스턴스는 뭔뜻이고 매영상마다 꾸역꾸역 설명이해가 힘든데.......... 보충설명이 없네요 이해를 위한 보충설명이..
좋은 강의 감사합니다! 궁금한 것이 있는데 컴포넌트화된 객체를 취소하고 싶다면 어떻게 해야하나요?? 인스턴스는 Detach instance를 누르면 되는데 컴포넌트 취소는 어떻게 하는지 모르겠습니당.. 답변주시면 감사하겠습니다ㅠㅠ
이미 컴포넌트로 만든 객체에 대해서 만들자 마자 Command(Ctrl) + Z로 취소 하지 않는 이상 취소는 불가합니다. 이미 만든 객체를 지우고 다시 생성해서 만들거나 만든 컴포넌트를 수정하여 재활용 할 수있습니다. 조금 번거롭지만 달리 방법이 없어서그렇게 작업했었는데 혹시 더 좋은 방법을 아시는 분이 계시다면 답글로 남겨주세요~
@@yeonjung-figma 앗 그렇군요 그런 기능이 있으면 좋을 것 같은데ㅜㅠ 답변 감사합니다!ㅎㅎ:)
연정님 이번에 피그마가 패치되면서 기존의 인스턴스 요소의 체인지 기능이 수정된것 같은데
혹시 이에 대한 영상 제작 계획 있으신가요 ㅜ
관련하여 아래 블로그 링크 에 간략하게 공유 드렸습니다. 참고해주세요~ designer-story.tistory.com/28
와 진짜 컴포넌트 너무 어렵다 7시간동안 잡고있는데 이해가 아직도 가질않는다 스트레스받아서 미쳐버릴거같다 아이스크림만 7개먹었네
😭
컴포넌트 내 bg 길이를 수정해도 컴포넌트 자체는 수정하기 전 길이 그대로인데 이건 뭔가요? 컴포넌트 해제하고 다시 만들어야 하나요? 그리고 텍스트 left&right 옵션 넣어도 컴포넌트가 안따라오는데요 ㅠㅠ
bg의 constraints 옵션을 scale로 안하신듯하네요. 객체를 선택하고 우측 디자인 패널의 constraints 옵션을 scale로 변경해보시는걸 추천드려요. 버튼처럼 프레임 크기를 변경 시, 텍스트가 정 중앙에 표시되길 원하시면 constraints 옵션을 center로 변경하면 됩니다.
오토레이아웃과 함께 사용해서 버튼을 만들수는 없나요?
ruclips.net/video/sAvdvB0vXQg/видео.html 오토레이아웃의 최신 영상을 참고해 주세요~
가능합니다^^ 탭 버튼 조차도 오토레이아웃으로 가능해요.
혹시 마스터 컴포넌트 이름 바꿀때 복사한 컴포넌트 이름이 같이 바뀌지 안흔ㄴ 이유가 뭘까요 ㅠ?
같이 바뀌지 않으니까 asset 에서도 따로 드래그해서 쓸수 없는거 같아서요 ..
designer-story.tistory.com/37 이유에 대해서는 잘 모르지만 되돌릴 수 있는 방법에 대해서 위 링크에 정리했습니다. 참고해주세요~
@@yeonjung-figma 감사합니다 :)
디태치해서 이 구조로 만들어졌다고 하셨는데 이 구조가 뭘까요?ㅠ
요점만 말씀드리면, 인스턴스를 디테치 후에 컴포넌트를 만드는 방법도 있다는 점을 설명드리려 했던 부분입니다~ (즉 작업자의 선택사항)
컴포넌트는 수정이 불가능하나요? 그리고 아이콘 삽입도 안되나요? ㅠㅠ
기술적인 측면에서의 질문이라면 컴포넌트는 수정이 가능합니다. 컴포넌트를 복제한 인스턴스도 제한적이지만 컬러나 네이밍 등 일부 속성 수정 가능하고요. 메인 컴포넌트를 수정하면 인스턴트도 같이 일괄 수정이 됩니다. 예를들어 아이콘이 없던 버튼 컴포넌트에 아이콘을 삽입하면 연결된 인스턴스에도 아이콘이 생깁니다. 이 인스턴스의 아이콘을 레이어 패널에서 숨길 수도 있습니다.
첨언하자면 한번 제작한 버튼, form 등의 기본 컴포넌트들의 경우 서비스 런칭후 리뉴얼이 되지 않는 이상 수정할 일은 거의 없습니다. 보통 디자이너들은 인스턴스를 가지고 작업을 하게 됩니다. 실제 실무에서는 메인 컴포넌트를 수정 가능 할 사람을(권한) 제한했었습니다. 컴포넌트 수정 시 1픽셀이라도 작은 변화가 있을 시 다른 페이지 또는 다른 결과물에도 영향을 주기때문이죠.
참고 영상 : 피그마 기초 강좌 - Part4 #컴포넌트 #팀라이브러리 #디자인시스템 #figma ruclips.net/video/uLAqWDoa6oU/видео.html
@@yeonjung-figma 답변 감사드립니다. 모바일 디자인할때 가로사이즈가 414인데 탭바버튼이 5개인데 나누기5하면 가로사이즈가 82.8이 나오는데, 버튼1개당 컴포넌트1개씩 각각 해서 총 액티브5개, 넌액티브5개해서 1개씩 넣어주는식으로 하는거 맞나요? 10개면 10개 다 만들어주나요? , 그리고 5:34, 8:01에 보면 컴포넌트에서 → 끌어와서 인액티브를 만든뒤에 → 그걸 다시 컴포넌트 했는데, 왜 그 컴포넌트에서는 인포넌트위로 컴포넌트가 생기고, Line 레이어가 안지워지나요? 새로 아이콘을 다 바꿔야 하는데 새로 넣어지지도 않습니다. ㅠㅠ 이거떄문에 미치겠어요 ㅠㅠㅠ 좋은강의로 너무 감사드리는데 컴포넌트/오토레이아웃에서 스트레스 너무 받고있어요 도와주세요 ㅠㅠㅠ
탭처럼 소수점이 나오는 것은 상황에 따라(가로 해상도 기준)자연스럽게 생기는 부분이기에 크게 연연해 할 필요는 없습니다. 실제 퍼블리싱 시에도 가로 해상도 기준으로 계산 되기 때문에 소수점이 발생합니다.
@캡틴보스 designer-story.tistory.com/37 여기에 보충 설명을 해두었는데 부디 도움이 되었으면 좋겠네요. (참고로 버튼 컴포넌트를 만드는 방법에는 이 영상 방법 외에도 여러가지가 있습니다.)
가이드선에 숫자 표시 되는거 어떻게 해요? 전 안되던데
단축키 alt(맥의 경우 option)키 누르고 마우스 hover 해보셨나요?