[피그마] 디자인 시스템 구축과 재사용을 위한 Component(컴포넌트)와 Instance(인스턴스)

Поделиться
HTML-код
  • Опубликовано: 16 дек 2024

Комментарии • 31

  • @kennygo5053
    @kennygo5053 Год назад

    정말 중요한 내용이네요. 다량의 프레임을 한번에 수정하는게 정말 중요하더라구요. 감사합니다

    • @UXUI
      @UXUI  Год назад +1

      영상 쭉 정주행 해주셔서 감사합니다.^^ 피그마의 매력에 빠져보세요 응원합니다!!

  • @flynoa4012
    @flynoa4012 9 месяцев назад

    많은 도움이 되었습니다.
    영상 너무 감사합니다~

    • @UXUI
      @UXUI  9 месяцев назад

      댓글 감사합니다! 피그마 공부하는데 도움이 되셨다니 기뻐요~~~

  • @참내-z5j
    @참내-z5j 2 года назад

    개념정리 하는데 도움 많이 되었어요. 감사합니다!

    • @UXUI
      @UXUI  2 года назад

      피그마 정주행 하시네요^^ 영상 시청해주셔서 감사합니다.

  • @WAIwdk
    @WAIwdk Год назад

    설명을 정말 쉽게 해주시네요 ㅠㅠ 감사해요😊

    • @UXUI
      @UXUI  Год назад

      두부님~~ 영상 시청해주시고 댓글도 감사합니다^^

  • @숨덕탈출
    @숨덕탈출 18 дней назад

    제 피그마가 이상한건가요? alt ctrl B 눌려도 컴포넌트 해제가 안 돼서 고통을 받고 있어요. ㅜㅜㅜㅜ(8:23) 설마 인스턴트 컴포넌트만 돼고 마스터 컴포넌트는 안 돼는 거예요?

    • @UXUI
      @UXUI  18 дней назад

      @@숨덕탈출 인스턴스 해제만 있어요. 컴포넌트 해제는 없어요. 플러그인 detatch component 사용해주세요^^

  • @kennygo5053
    @kennygo5053 Год назад

    항상 많은 도움됩니다. 정의를 명확하게 설명해주시는게 너무좋네요. 덕분에 활용이 가능합니다. 1. Nested component 로 만들어진 그룹에서 말단의 텍스트를 선택하려고 하면 더블클릭을 많게는 10번 이상 해야 겨우 원하는 것이 선택되어 색상을 바꾸곤 하는데 좀 더 쉽게 선택하는법이 있을까요. 만들다 보면 넘 복잡해져서요.

    • @UXUI
      @UXUI  Год назад +1

      중첩 되어있는 오브젝트는 Cmd(Ctrl) 클릭하면 바로 선택할수 있습니다^^

    • @kennygo5053
      @kennygo5053 Год назад

      @@UXUI 오오 사막의 오아시스같은 답변 감사합니다

    • @kennygo5053
      @kennygo5053 Год назад

      피그마로 일본 기획부에서 여태 보지 못한 프로토타입을 프레젠 했는데 아직 시대에 뒤떨어진건지 복잡한걸 고집하는건지 엑셀과 글자로 표현하는 제품UX 아이디어 자료를 더 선호하네요. 엑셀로 만든거 보면 뭘눌러서 어디로 넘어가는지 알수도 없고 복잡하기만 한데 그걸 피그마로 간단히 앍쉽게 표현한거는 뭔가 야다간지로 보는 경향이 있네요. 시니세라서 그런가봅니다. 이겨나가야죠

    • @kennygo5053
      @kennygo5053 Год назад

      참. 개별 오브젝트는 cmd로 선택가능한데, 그룹을 한번에 선택하는 방법도 있을까요

    • @UXUI
      @UXUI  Год назад +1

      ​@@kennygo5053 는 하위 오브젝트 선택, 는 상위 오브젝트 선택으로 하면 조금더 빨리 선택할 수 있어요^^ 시청해주셔서 감사합니다!!

  • @kennygo5053
    @kennygo5053 Год назад

    추가로 제가 유용하게 사용하고 있는것은 instance 컴포넌트를 set to frame으로 해서 instance 프레임으로 사용하면서 수많은 페이지들의 배경을 메인 프레임 하나 변경하면 일괄적으로 변경할 수 있더군요

    • @UXUI
      @UXUI  Год назад +1

      일할때 컴포넌트가 있어 정말 편합니다!! 베이스 컴포넌트를 만들어두고 인스턴스를 다시 컴포넌트로 만들면 일괄 변경도 되면서 변형 주기도 좋습니다^^

  • @바림-h4j
    @바림-h4j Год назад

    궁금한게 하나 있습니다. 텍스트를 컴포넌트로 만들고 복사해서 인스턴트로 만들어서 사용할 경우, 텍스트 크기를 조정하고 싶을때, 메인 컴포넌트의 텍스트크기를 키우면 컴포넌트를 만들었을 때 생기는 보라색 테두리에 글씨가 밖으로 벗어나는데 이부분은 어떻게 해결해야하나요? ㅠ

    • @UXUI
      @UXUI  Год назад

      안녕하세요 바림님
      메인 컴포넌트의 보라색 테두리? 이게 멀까요? 컴포넌트 만들면 보라색 테두리는 없는데. 혹시 컴포넌트 세트로 만들었을 때의 보라색 점선을 말씀하시는 건가요?

    • @UXUI
      @UXUI  Год назад

      영상 시청해 주셔서 감사합니다

    • @바림-h4j
      @바림-h4j Год назад

      @@UXUI 아 답변 감사드립니다. 텍스트 자체를 컴포넌트화 시키고 텍스트의 크기를 늘리면 박스 텍스트 테두리 밖으로 텍스트가 넘어가서 정렬을하거나 할때 힘들더라고요 그래서 알아보던 중 오토레이아웃을 먼저 텍스트에 입히고 컴포넌트화 시키니깐 해결되었습니다. ㅠ
      보통 gnb나 헤더영역에 아이콘 혹은 카테고리 텍스트를 만들때, 오토레이아웃을 쓰는데 저는 xd, 스케치만 하다가 이번에 회사 툴이 피그마로 교체되면서 공부 중이었거든요 ㅠㅠㅠ 버튼을 만들때 오토레이아웃 기능을 사용하는 건 좀 생소하네요... 그래도 영상 덕분에 피그마 기본기부터 차근차근 배우고 있습니다:)

  • @dada56-b5w
    @dada56-b5w 3 года назад

    안녕하세요~ 루씨님의 피그마 강의를 잘 보고 있습니다. 맥으로 피그마 사용하고 있는데요, 며칠 전부터 갑자기 한글 자음, 모음이 분리되어서 입력이 됩니다. 구글링으로 알아보니 맥 설정에서 키보드 텍스트 맞춤법을 한국어로 변경하는 팁이 있어서 변경을 했는데도 이런 오류가 해결이 안됩니다. 루씨님은 혹시 이런 오류를 수정하는 방법을 알고 계시는지요... 문의를 할 곳이 없어서 글을 남깁니다.

    • @UXUI
      @UXUI  3 года назад

      피그마의 프로그램 오류인거 같아요.. 저도 한동안 고생을..ㅠ.ㅠ
      우선 한글을 입력하고 스페이스바 눌러보세요. 그럼 되는거 같아요..
      그래도 안되면 키보드-맞춤법 자동 수정, 자동으로 문장을 대문자로 시작, 스페이스를 두번 눌러 마침표 추가 ... 부분의 체크 해제 해보세요.
      오늘은 포토샵이 한글 입력 오류가 계속 나던데....ㅠ.ㅠ

  • @dorodooro3762
    @dorodooro3762 2 года назад

    그냥 일반 레이어를 인스턴스로 바꿀 수는
    없나요??

    • @UXUI
      @UXUI  2 года назад +1

      일반 레이어를 인스턴스로...... 인스턴스를 가져와서 스타일 변경은 가능합니다.
      속성 복붙해보세요.
      Copy properties (Ctrl+Alt+C ) -> Paste properties (Ctrl+Alt+V )

    • @UXUI
      @UXUI  2 года назад

      영상 시청해주셔서 감사합니다^^

    • @dorodooro3762
      @dorodooro3762 2 года назад

      @@UXUI 감사합니다!

  • @구독자-k8u
    @구독자-k8u 8 месяцев назад

    쉽게 설명해주셔서 이해가 잘 됐어요 감사합니다!

    • @UXUI
      @UXUI  8 месяцев назад

      시청해 주시고 댓글까지 너무 감사합니다!!!!!