🎁2024 역대급 사랑주간 시작🎁

Thumbnail
2024 사랑주간 할인 중(D-7)
BEST
디자인 · 아트UX/UI

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

(5)
114개의 수강평 ∙ 1,021명의 수강생
25%198,000원148,500원

월 29,700원

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

    혹시 쿠폰이벤트는 끝났을까요? 쿠폰함으로 이동은 되는데 보이지 않아 문의 드립니다!!

    볼드 UX
    볼드 UX
    볼드 UX
    2024-12-11385979

    "피그마배리어블"이라고 할인쿠폰 코드 입력란에 입력하시고 등록하시면 됩니다. ㅎㅎ

  • 마이클 프로필마이클
    2024-12-081456392

    안녕하세요. 강의전 궁금한 사항이 있어서 문의드립니다. 현직 개발자로 일하고 있습니다. 회사에서 디자이너가 따로 없어서 웹페이지를 리뉴얼중에 있습니다. 디자인을 전체적으로 한다기보다는 전체 레이아웃 / 버튼 / 테이블 / 체크박스 / 폰트 등 공통으로 쓰이는 부분을 통일성 있게 구성을 하려고 생각하고 있습니다. 혹시 이 강의를 들으면 많은 도움이 될까 해서 문의 드려봅니다.

    볼드 UX
    볼드 UX
    볼드 UX
    2024-12-09385591

    안녕하세요, 마이클님 목표가 통일성 있는 웹페이지 구현이라면 제 강의가 적합할 수 있습니다. 제 강의에서는 전체 레이아웃, 버튼, 테이블, 체크박스, 폰트 등 주요 UI 요소들을 스타일 가이드를 기반으로 공통된 스타일을 설정하고, 베리어블(변수)을 활용하여 일관된 디자인을 구현하는 방법을 다룹니다. 이 베리어블들은 JSON 파일로 내보내어 Style Dictionary라는 npm 패키지를 통해 CSS로 변환해 바로 사용할 수 있어 개발 효율성도 높입니다. 다만, 강의는 다음과 같은 점들을 고려하셔야 합니다: 난이도: 베리어블 활용은 개발자 분에게는 상당히 어려울 수 있습니다. 지금까지 완강하신 분들 중 대부분이 프론트엔드 개발자들이셨고, 난이도가 있다는 피드백을 주셨습니다. 그리고 백엔드 개발자분들께는 다소 어려울 수 있습니다. 강의 시간: 강의 분량은 약 14시간이며, 실습까지 제대로 진행하신다면 30시간 이상 소요될 수 있습니다. 스터디 모임이 진행 예정 중이라 같이 공부하시면 다 끝내실 수 있습니다. 결론적으로: 마이클님이 목표로 하시는 웹페이지 구현에는 강의 내용이 적합하지만, 위에서 언급한 난이도와 학습 시간 투자를 꼭 고려해 주세요. 다른 강의들도 살펴보시고, 마이클님께 가장 알맞은 강의를 찾으시기를 바랍니다. 감사합니다.

  • gangsugi 프로필gangsugi
    2024-08-101348807

    2024년6월에 대대적으로 피그마 화면부터 싹 바뀌었는데요, 그 부분이 반영이 된 강의인지 궁금합니다. 새로 바뀐 UI 로 강의를 볼수 있는건지요???

    볼드 UX
    볼드 UX
    볼드 UX
    2024-08-10359570

    질문해 주셔서 감사합니다. 본 강의는 새로운 UI가 아닌 기존 UI를 기반으로 만들어졌습니다. 강의를 수강하실 때는 ‘Go back to previous UI’로 돌아가셔서 학습을 완료하시는 것을 추천드립니다. 완강하시면 모든 개념과 변수(variable)를 어떻게 활용하는지 이해하실 수 있을 것입니다. 이후, 제가 8월 중순에 진행할 라이브 강의에서는 UI2에서 UI3로 무엇이 어떻게 바뀌었는지 분석해 드릴 예정입니다. 이 강의를 들으시면 새로운 UI에서 어떤 부분이 어떻게 적용되었는지 더 잘 이해하게 되실 것입니다. 9월 초,중순에 녹화 강의도 업로드할 예정입니다. 이 강의를 수강하시면 조금이라도 UI3를 사용하는 데 큰 도움이 될 것입니다. 당분간은 아직 베타 버전이라 UI를 바꿔서 강의를 찍을 계획은 없습니다. 이번 주에도 툴에서 Clip content와 Constraints이 변경이 되었고 앞으로도 계속 바뀔 예정입니다. 하지만 베타 버전이 종료되면 강의를 재촬영할 예정입니다. 마지막으로 새로운 UI의 피그마 툴을 배우고 싶으시면 본 강의는 적합하지 않습니다. 하지만 피그마 베리어블을 활용한 전반적인 토큰, UI 킷 디자인 시스템을 배우고 싶으시다면 단언컨대 강력 추천합니다. 수강생 분들이 남기신 리뷰 꼭 확인 해보시기 바랍니다. 강의를 수강하시기 전에 이 정보가 도움이 되었으면 좋겠습니다.

  • moonjulu 프로필moonjulu
    2024-08-071346136

    혹시 강의 할인 이벤트 진행 계획이 있으신가요~?

    볼드 UX
    볼드 UX
    볼드 UX
    2024-08-08359040

    인프런에서 진행하는 이벤트는 항상 있습니다. 저장해놓고 기다리시면 알림이 가는걸로 알고 있습니다. 감사합니다!

  • 은비 프로필은비
    2024-07-121319904

    혹시 피그마 유료계정으로 들어야 하는 수업이 있을까요?

    볼드 UX
    볼드 UX
    볼드 UX
    2024-07-12353282

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

  • 오미현 프로필오미현
    2024-06-291306988

    혹시 스터디를 나중에 또 진행하실 예정이 있으신가요?? ㅠㅠ 오늘 이 강의를 사이트에서 처음 보는 바람에..ㅠㅠ 스터디가 어제 마감인걸 오늘 알아버려서요 ㅠㅠㅠ

    볼드 UX
    볼드 UX
    볼드 UX
    2024-06-29350388

    안녕하세요. 스터디 7월 3일까지 더 연장해서 모집할 예정입니다. 20명 넘게 모이시긴 했는데, 강의 수강하시고 지원해주세요!

  • imagineMaker 프로필imagineMaker
    2024-06-021281197

    베리어블을 프로토타이핑에 쓸 수 있는 방법도 배우고 싶습니다. 이것에 대한 강의 내용도 혹시 있을까요? 아니라면 강의를 해보실 의향은 있으실까요??

    볼드 UX
    볼드 UX
    볼드 UX
    2024-06-02343733

    imagineMaker님 안녕하세요. 본 강의에서는 프로토타이핑은 다루지 않고 있습니다. 본 강의가 아닌 다른 강의를 통해 준비를 하고는 있긴합니다. 혹시 구체적으로 어떤 부분에 대해서 궁금하신지 여쭤뵙고 싶은데, 혹시 관심있으시면, 제 이메일로 boldplus.ux@gmail.com으로 연락주시면 감사하겠습니다. 감사합니다!

  • 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

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

채널톡 아이콘