Thumbnail
지식공유자의 깜짝할인 중(D-4)
BEST
디자인UX/UI

피그마 배리어블을 활용한 디자인 시스템 구축하기대시보드

(5)
34개의 수강평 ∙ 618명의 수강생
20%198,000원158,400원

월 31,680원

5개월 할부 시
지식공유자: 볼드 UX
총 80개 수업 (13시간 29분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가공유
  • dlatjdgus 프로필dlatjdgus
    2024-05-011254867

    디자인 시스템 레퍼런스나 실제로 앱을 사용하다보면 OS별로 디자인 컴포넌트들의 height와 같이 사이즈들이 달라지는 경우를 많이 접했는데요, 관련한 내용도 혹시 강좌에 담겨있는지 궁금합니다 :) 혹시 볼드님 회사의 디자인 시스템은 OS별로 타이포부터 컴포넌트들까지 나눠서 관리가 되고 있는지도 궁금합니다!

    볼드 UX
    볼드 UX
    볼드 UX
    2024-05-01336873

    감사합니다. 본 강의에서는 OS별로 다른 디자인 컴포넌트를 다루지 않습니다. 강의의 주 내용은 웹과 모바일에서 공통적으로 사용되는 33개의 디자인 컴포넌트를 하나씩 만들어보는 과정입니다. 이를 통해 컴포넌트의 구성, 프로퍼티, 값을 이해하는 데 도움이 됩니다. 이 과정을 통해 두 가지 중요한 결과를 얻을 수 있습니다: 1. Material UI, Apple HIG, Microsoft Fluent와 같은 UI 키트를 분석할 때 각 구성 요소를 이해하고, 필요에 따라 적절히 활용할 수 있는 능력을 갖추게 됩니다. 2. 어떤 컴포넌트라도 스스로 구성하고 만들 수 있는 지식과 기술을 습득하게 됩니다. 타이포그래피와 같은 파운데이션의 경우 이번에 새로운 베리어블이 업데이트되어서 따로 관리하실 필요가 없구요. 보통 컴포넌트의 경우 OS 별로 따로 만듭니다.(소규모 서비스의 경우는 다 같은 파일 안에 페이지 별로 따로 넣어두는 편입니다.) - 공용 컴포넌트: 버튼, 알림 등등 - 개별 OS별 UI Kit: 네비게이션 바 등등 강의 수강 전 결정하시는데, 도움이 되셨으면 좋겠습니다. 감사합니다

  • 정동원 프로필정동원
    2024-03-051197799

    안녕하세요. 현재 피그마 스타터 플랜 (무료)을 사용중인데요 배리어블의 기능을 사용함에 있어 혹시 제한이 있는지 궁금합니다.

    볼드 UX
    볼드 UX
    볼드 UX
    2024-03-05322989

    질문 주셔서 감사합니다. 강의를 수강하시면 베리어블 기능을 대부분 사용할 수 있는 정보를 안내해드리고 있습니다. - 베리어블 모드 4개까지 등록 - 로컬 베리어블 & 콜렉션 등록 참고로 API 관련한 것은 엔터프라이즈(주로 대기업)와 개발 쪽이라 다루지 않고 있습니다.

  • 황민경 프로필황민경
    2024-02-211185591

    컴포넌트 인스턴스, 배리언트, 프로퍼티 활용법도 포함되어있는 강의 일까요? 아직 이들을 완벽히 사용하기 어려운데 강의 내용이 어느 부분까지 포함되어있는지 궁금합니다.

    볼드 UX
    볼드 UX
    볼드 UX
    2024-02-21319773

    안녕하세요. 강의에 4강부터 8강까지가 컴포넌트를 직접 30가지 다른 컴포넌트를 만들면서 배우는 과정입니다. 다른 타 강의처럼 버튼만 끝내고 가는 강의는 아니고 조금 더 깊게 실무에 관련된 내용들이 많이 들어갑니다. 앞 부분에 기본적인 이론에 다루지만 입문보다는 초급자를 위함입니다. 제가 4월 중에 기초 강의를 출시할 생각이긴합니다. 만약 기본적인 개념이 있고 완벽히 사용하고 싶으시면 강의를 추천드립니다. 강의를 들으시고 모든 실습 다 따라하시몀 어떤 컴포넌트든지 만드실 수 있습니다.

  • coconut31 프로필coconut31
    2024-01-161142231

    안녕하세요 저는 개발자입니다 FIGMA로 디자인하고 나서 DEV 모드로 바꾼 후 CSS를 가져와서 적용하는데 제대로 적용이 안 되는 경우들이 있더라구오 해당 강의에서 배우는 방식을 따라하면 DEV 모드의 css가 오류없이 바로 적용되나요?

    볼드 UX
    볼드 UX
    볼드 UX
    2024-01-16311087

    저도 그부분에 대해서는 확답을 못드리겠습니다. 데브모드는 아직 베타라서 오류가 많은 것 같습니다. 본 강의는 디자인 토큰 형태의 베리어블을 적용하기 위한 강의이며, 베리어블이 나올 때 데브모드에서 어떻게 적용하는지까지만 보여줍니다. 감사합니다.

  • 디건버 프로필디건버
    2023-12-021090959

    안녕하세요 피그마를 이제 처음 접해보려고 합니다. 가장 최근에 나온 강의여서 문의글 남깁니다 :) 아예 처음 피그마를 처음 해보는 사람이 들어도 괜찮을까요? 기존에 일러스트나 이런 UI 툴도 한번도 만져본적이 없는데, 기초 강의부터 알려주시는것일지 여쭙고 싶습니다 !

    볼드 UX
    볼드 UX
    볼드 UX
    2023-12-02299914

    질문 주셔서 감사합니다. 본 강의는 피그마 베리어블을 활용한 디자인 시스템을 만드는게 목적입니다. 목표하시는게 디자인 시스템 구축이시면 강추드립니다. 기초 강의를 필요하시면 제가 추천 드리는 건 세가지입니다. 1. 직접 만들면서 배우기 본 강의에서 기본적인 부분은 따로 설명드리지는 않지만 따라하시다보면 기본적인 부분도 배우실 수 있으십니다. 슬랙 채널을 통해서 언제든지 질문하고 물어보실 수 있습니다. 2. 유투브 강좌 필요하시다면 기초 관련 유투브를 추천 드립니다. 두시간 정도만 투자하시면 기초를 익히실 수 있습니다. 3. 책 활용 개인적으로 소유한 책도 추천드립니다. UX/UI 디자이너를 위한 실무 피그마(클레어 정 저자) 다시 한번 강조드리지만 이 강의는 디자인 시스템을 목적으로 하고 이것을 만들려고 하다보면 기초 인터페이스도 자연스럽게 익히실 수 있습니다.

  • 스펀지 프로필스펀지
    2023-12-011090138

    안녕하세요 30일에 남긴 문의에 대한 답변을 보고 한번 더 문의 드려요. 'Primitive(global)/Theme/Semantic(alias)' 이렇게 배운다고 하셨는데, 그럼 Component 단의 배리어블을 설정하는 것은 따로 포함되어있지 않은건가요? 그리고 Theme은 어떤 건가요?

    볼드 UX
    볼드 UX
    볼드 UX
    2023-12-01299712

    필요에 따라 Component 단에 한다고 언급은 하는데 실제로 실습하면서 보면 Component 단은 사용하지 않습니다. 그 이유는 몇몇 미디엄 아티클, 국내 글에도 보면 컴포넌트 계층은 장단점이 있기 때문입니다. 1. 장점: 엄청 명확합니다. 2. 단점: 갯수가 무한 급수적으로 많아지고 이름이 길어져서 피그마에서 찾기 어렵습니다. 그래서 다른 회사 디자인시스템 보시면 Primitive/Semantic 요런 구조로 되어 있습니다. (몇몇 회사 제외하고) Theme을 넣은 이유는 멀티 브랜드를 보여드리기 위해서입니다. 현재 저의 라이센스(에듀케이션, 오거나이제이션)상 4개 이하 모드만 사용 가능하며, Theme은 브랜드 모드를 Semantic은 다크/라이트 모드를 짰습니다. 본 강의에서는 아래와 같이 짰으며, 역시 이건 강의를 위한 예시일 뿐 실제 만드실 때는 자신의 프로덕트에 맞게 원하시는대로 짜보시면 됩니다. 즉, Primitive; 본래색 Theme; 멀티브랜드 구현을 위한 팔레트 Semantic; 다크/라이트 모드 구현을 위한 시맨틱 팔레트 Component; 필요에 따라 추가하기 제 강의 중 2-3 색상 배리어블 이름, 구조 짜기를 무료로 공개해놓았습니다. 이 모든 내용이 시각 자료와 함께 자세히 설명되어 있고 딱 10분 밖에 안되니 시간 나시면 한 번 보시기는 걸 추천 드릴게요. 더 궁금한 사항 있으시면 언제든지 문의 주세요! 감사합니다.

  • 스펀지 프로필스펀지
    2023-11-291088668

    안녕하세요 해당 강의에서 배리어블 세팅 시 Base 혹은 global/Alias/Component 의 3계층으로 배리어블을 세팅하는 법도 시연하시나요?

    볼드 UX
    볼드 UX
    볼드 UX
    2023-11-30299281

    안녕하세요. 물어보신 부분이 이 강의에 핵심 중의 하나입니다. 당연히 이론부터 실습까지 모두 설명해드리고 피그마에서 보여드립니다. - 계층 뿐만 아니라 어떻게 이름을 짓는지도 하나 하나씩 다 알려드립니다. - 강의에서는 Primitive/Theme/Semantic 으로 짭니다. 그 이유는 피그마에서 추천하는 이름이기 때문입니다. (global - Primitive, Alias - Semantic 이렇게 해당된다고 보시면 됩니다. 이것도 정말 자세하게 다 설명해드립니다.) 이와 관련된 이론이 무료 강의로 오픈 되어 있으니 한번 살펴보시고 수강 여부를 결정하시면 될 것 같습니다. 만약 강의를 수강하시면 실습 강의에서 피그마에서 어떻게 적용하는지 보실 수 있습니다. 추가로 Semantic(Alias)색상 베리어블에 해당하는 부분도 엑셀 시트 공유해드립니다. 이 정보가 수강 여부를 결정하시는데 도움이 되셨으면 좋겠습니다. 더 궁금한 사항 있으시면 물어봐주세요. 감사합니다.

  • 양념직 프로필양념직
    2023-11-211081235

    안녕하세요. 유익한 강의라 관심이 생기네요! 찾아봐도 안보여서 문의 드리게 되었습니다. 신청할 수 있는 기간이 정해져있는지 궁금합니다. 감사합니다.

    볼드 UX
    볼드 UX
    볼드 UX
    2023-11-21297085

    신청할 수 있는 기간은 딱히 정해져 있지 않습니다. 언제든지 신청하실 수 있습니다. 현재 오픈 기념으로 30%행사(최대할인)를 한달간 진행 중이며, 이후에는 기존 가격으로 돌아갑니다. 이후에도 언제든지 신청 가능하십니다.

  • Summer 프로필Summer
    2023-11-201081014

    피그마 유료버전이 필요한가요?

    볼드 UX
    볼드 UX
    볼드 UX
    2023-11-21296994

    무료 계정으로 배리어블 등록은 가능하지만 다중 모드를 사용하기 위해서는 그 이상의 계정이 필요합니다. 본 강의를 들으시면 피그마의 다중 모드 기능을 무료로 사용할 수 있는 방법(에듀케이션 계정)을 안내해드릴 예정이니 걱정하지 않으셔도 됩니다.