묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
[무료 강의] AI로 브랜드 가이드라인, 디자인 시스템 구축부터, 앱 제작, 피칭 덱, 카드 캐러셀까지
안녕하세요, 에릭입니다. 오랜만에 인사드려요.오늘은 요즘 디자인 업계에서 벌어지고 있는 변화, 그리고 그걸 직접 해볼 수 있는 영상 하나를 들고 왔어요.피그마 주가가 하루에 7% 떨어진 날두 달 전에 '클로드 디자인'이라는 게 나왔습니다. 그리고 그날, 피그마 주가가 하루에 7%나 떨어지는 일이 있었어요.시장이 이렇게 반응했다는 건 의미가 커요. 이제 UX/UI 디자인도 손으로 그리는 작업에서 프롬프트로 만드는 방향으로 가고 있다는 것. 그리고 클로드 디자인이 내놓는 결과물이 그 흔한 'AI 티'가 나는 게 아니라, 디자이너가 만든 것 같은 수준으로 나오고 있었다는 겁니다.저도 직접 써보면서 확인했어요. 보라색 그라디언트에 어디서 본 듯한 화면이 아니라, 브랜드의 톤을 지키는 정돈된 결과물이 나옵니다. 말만 하면요.아직 AI로 디자인을 안 해보셨다면, 이번이 좋은 타이밍이에요피그마를 이미 마스터하셨거나 배우고 계신다면 이미 어느 정도 디자인에 대한 능력치를 쌓고 계신거에요. 그리고 여기에 AI디자인까지 활용할 수 있다면 속도에 날개를 달아줄 수 있습니다. 그래서 처음 해보는 분들도 따라올 수 있는 영상을 하나 준비했습니다.클로드 디자인 A to Z 마스터클래스 (유튜브, 47분 분량)브랜드 하나를 처음부터 끝까지 세우는 전체 과정이에요. 이론만 배우는 게 아니라 'Flowdeck'이라는 칸반 보드 앱을 실제로 만들어서 배포까지 했습니다. 순서는 이렇게 됩니다.- 브랜드 컨셉 & 로고 — 프롬프트만으로 시안 3개 뽑고 고르기- 브랜드 가이드라인 — 미션·철학·보이스앤톤까지- PRD & 화면 정의서 — '기획서'가 처음인 분들을 위한 개념 설명 포함- 디자인 시스템 구축 — 컬러·폰트·컴포넌트를 하나의 원천으로- 와이어프레임 → 하이파이 프로토타입 — 그리고 클로드 코드와 연동해서 실제 작동하는 앱으로 구현- 랜딩 페이지 + 피칭덱 + 카드 캐러셀까지 — 전부 같은 브랜드 톤으로포인트는 산출물 하나하나가 아니라, 브랜드 가이드라인이라는 뿌리 하나에서 모든 결과물이 일관되게 뻗어 나오는 워크플로우를 가져가시는 겁니다. 회사에서 몇 명이 나눠 하던 일을, 이제 혼자서 하실 수 있어요."PRD가 뭐지, 디자인 시스템은 어디까지지" 막막했던 분들, 포트폴리오에 '실제 출시한 제품'을 넣고 싶었던 분들에게 특히 도움이 될 거예요.▶ 마스터클래스 영상 보러 가기커피 한 잔 준비하시고, 가능하면 화면 옆에 클로드 켜두고 따라 해보세요. 실습에 쓴 문서들(브랜드 가이드라인·PRD 등)도 해당 유튜브 영상 댓글에 공개해뒀습니다.그럼, 다음에 뵈요.에릭 드림[카카오 그룹챗 안내]카카오톡에서 "AI 빌더 커뮤니티" 그룹챗을 운영을 시작했습니다. 앞으로 AI 관련된 컨텐츠 소식을 이 채널을 통해서 공유하고 AI 및 스터디 정보를 공유하고 함께 성장하는 공간으로 활용합니다.그룹챗 조인하기 >>
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
figma.com/@boldux 계정이 없다고 나옵니다
bold님 계정 운영을 안하시는건가요?강의에서 보이는 화면이 검색에서 나오지 않습니다
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
강의 수강 기간 연장 부탁드리겠습니다
연장 부탁드립니다. 학습 열심히 하겠습니다. 감사합니다
-
미해결기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스
7강 도형+펜툴 중 막혔습니다ㅠㅠㅠ
안녕하세요,7강 듣는 중 막혀서 질문드려요!원 4개 대충 배치한 다음에, ctrl+x 오려내주고, 펜툴로 점찍고 다시 붙여넣기 하니까, 저는 도형이 선생님처럼 따로 안떨어지고 붙었어요 ㅠㅠ 왜일까요 ?
-
미해결기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스
안녕하세요! 작업 속도를 높여주는 단축키와 플러그인 강의는 없는걸까요?!
안녕하세요!커리큘럼 스케줄표 노션에는 [작업 속도를 높여주는 단축키와 플러그인]강의가 하나 더 있는데, 실제 강의목록에는 없어서요! 바뀐걸까요 강의 내용이?!
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
항목부분만 필로 변경
3:52초에 오토로 변경하고 항목 부분만 필로 변경을 눌러도 에디터부분이 픽스로 고정되어있다고 안바뀌고 에디터를 다시 허그로 변경해도 항목부분을 필로 변경하려고 하면 다시 자동으로 픽스로 변경되어버려서 필로 변경이 안되는데 왜그런지 아시나요……….
-
미해결기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스
선생님 섹션 2의 색상 설명 자료는
없는걸까요?.. 예제 연습파일만 있고!강의 ppt는 따로 제공이 안되는걸까요?ㅎㅎ
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
반응형 웹 디자인
안녕하세요 볼드님! 정말 알차고 좋은 강의 감사합니다. Theme의 브랜드 컬러 모드 설정은 잘 활용하고 있는데요, Typography에서 desktop/mobile 모드를 적용해보니 변화가 거의 없어서 결국 폰트를 하나하나 수동으로 지정했습니다.여기서 질문은 1. 볼드님은 반응형 웹 디자인 작업 시, 모바일을 디자인한 후 오토레이아웃으로 웹 1920 사이즈로 확장하시나요? 같은 디자인이더라도 모바일과 웹 간에 레이아웃이 조금씩 달라지는 부분이 생기는데, 이런 부분은 어떻게 처리하시는지 궁금하고, 폰트 부분에서는 모드로 잘 적용이 되는지도 궁금합니다. 답변부탁드립니다. 감사합니다:)
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
액션 아이콘 컴포넌트 질문
초반에 액션 컴포넌트를 설정할 때 범용적으로 icon placeholder 아이콘을 설정해 두는데, 게시판 별로 액션 아이콘을 다르게 설정하는 경우가 많잖아요?? 그러면 첫 부모 컴포넌트는 placeholder로 냅두고 첨부사진과 같이 컬럼 컴포넌트로 아이콘을 지정해두는게 맞나요? 근데 이렇게하면 셀렉티드로 변환 상태의 아이콘도 바꿔야해서 Columns/Status Actions 를 True/Flase 2개를 만들어놔야 하는건지.. 게시판 별로 부모를 만들어 놓는 것과 컬럼 컴포넌트로 여러개 만들어 놓는 것, 어떤게 효율적인 방법인지 질문드립니다.
-
해결됨디자인 감각? 타고나는 게 아닙니다. '뇌과학'으로 설계하는 UX/UI 디자인 법칙
3차시 실전 예시학습중입니다
저는 기획 및 시스템 운영 업무를 주로 하고 있는데 UIUX 쪽을 좀 아는게 도움이 될것 같아 이 강의를 학습중입니다.현재 3차시를 학습 중인데,서비스소개 페이지 만드는 예를 들어서 보고 따라하고 싶은데PPT로 하기에는 조금 한계가 있어보이는데,이런 걸 하실때 강사님은 어떤 툴을 사용해서 작업 하시나요?간단하게 따라 해 보고싶은데 간단하지가 않네요
-
해결됨디자인 감각? 타고나는 게 아닙니다. '뇌과학'으로 설계하는 UX/UI 디자인 법칙
강의자료 공유 부탁드립니다
혹시 강의하실때 사용하신 자료를 pdf 형태로 공유 부탁드려도 될까요? 메모 하면서 강의 들으면 훨씬 도움이 많이 될 것 같습니다.제 메일은 dytleekd@korea.kr 입니다
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼
오른쪽 화면 selected에서 ture/false가 강의에서는 토글로 껐다켰다 할 수 있게 나오는데저는 화면에 다르게 구성되어 있어서 어느 부분을 놓친건지 헷갈립니다.강의를 여러번 돌려봤는데도 문제점을 모르겠습니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
스피너 아이콘 크기 질문
강의 내용 중 스피너 세그먼트 아이콘을 만들고 버튼에 붙여 넣어보는 작업이 있었는데 큰 버튼에는 정상적인 크기로 들어가는데 왜 Small button 에 넣었을때는 크기가 줄여져서 들어갈까요?sm-16px의 크기인데 10.67 의 소수점 크기로 들어갑니다 .
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
미리보기 빈칸생기는 현상
미리보기 했을 때 바텀 네비게이션 쪽에 빈틈이 생겨요 간격 0 이고 바텀네비게이션은 fill 로 되어있어요 인디케이터랑 바텀네비게이션 간격도 0 이고요! 어떻게 처리하면될까요?우선은 그냥 네비게이션 아이템에 왼쪽 스트로크 넣고 홈 인디케이터 위아래로 스트로크 넣었어요! (아웃사이드로!)
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘 빌런 부분
안녕하세요 최근에 결제 후 수강하고 있습니다!그래서 그런지 지금 아이콘 빌런부분 (앤트맨 전략) 스케일 조정후 깨지는 부분 관련해서 수강듣고있는데요, 최근 피그마가 계속 업데이트하면서 해당 오류가 없어진것 같은데.. (아닐수도 있지만..)그래도 유니온 하고 플랫 하는 방식으로 사용하는게 좋은거죠?
-
해결됨디자인 시스템 with 피그마
borderTransparent를 라이트/다크모드에 이중등록
네이티브에 등록된 borderTransparent를토큰플러그인에 라이트/다크모드에 이중 등록이 안되고, 둘중 하나에만 등록이 됩니다.어떻게하면 되나요?https://www.figma.com/design/sNZYxS6FzfkmvAHKOxm6rD/%E2%9D%96-Uber--Started-?node-id=41-558&t=KCo6yU95fQT5nFgL-1
-
해결됨디자인 시스템 with 피그마
해결되었습니다.
해결되었습니다.
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
채팅 UI 추가 속성 설정 질문
저는 선생님처럼 왜 아래 말풍선이안보일까요..ㅠㅠ 제 프레임 말풍선 아래(안보임)선생님 프레임 아래 말풍선(보임)
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
배리어블 Value에 관해 질문있습니다.
강의를 보면서 뇌를 비우고 따라 만들다보니 어느순간 궁금증이 생겼는데, style의 경우는크기,행간,자간등을 입력해 놓고 입력된 텍스트를 style로 만들면 되는거니까 상관이없는데배리어블의 경우엔 name을 붙히고 value에다가 값만 썼는데 그 값이 자동으로 연결되는건가요? 완성된 데이터를 넣질 않았는데 피그마가 자동으로 인식하는건가요? 어떤식으로 물어봐야될지 몰라서, 두서가 없는점 죄송합니다. 폰트 패밀리로 다시 여쭤보자면name은 제가 임의로 붙히는거니까 상관이없고문제는 value입니다. inter라는 텍스트 파일을 따로 넣지를 않고 단순 텍스트로만 Inter라고 적었는데 피그마프로그램에서 알아서 찾아서 연결지어주는지가 궁금합니다. 만약 그렇다고 한다면텍스트 이름을 대소문자, 띄어쓰기를 유의하면서 적어야할까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
semibold에 짝대기가 생겼는데 연결이 깨졌다는 의미일까요? 짝대기가 없어지려면 어떻게 해야하나요?