inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

안녕하세요! 강의잘 들었습니다.

해결됨

디자인 시스템 with 피그마

좋은강의 잘 들었습니다 :) 아토믹디자인 시스템에대한 원리와 개발자 관점(?)에서의 구조적 설명이라 조금 더 원론적으로 잘 와닿았어요! (후반부에 실제로 git에 푸시하고 동기화하는 내용이 참 흥미로웠어요) 저는 프론트엔드 국비 6개월과정을 2년전에 수강하구 작은 회사에서 디자인겸 퍼블리싱을 같이한지 만 1년된 주니어 퍼블리셔입니다. 회사에서 개발인력이 백엔드개발자와 저밖에없고, 그동안 피그마를 못다뤄서 화면 만들 때 v0에서 그럴듯해보이는 적절한 템플릿을 먼저 다운받아서 tailwind.config를 수정하고 그뒤에 컴포넌트들 스타일을 AI 활용해서 원하는 방향으로 수정하면서 디자인을 해왔습니다. . 그러다 성장에대한 한계를 느껴서 피그마를 배웠고 이제는 강의로 사용법이나, 디자인시스템에대한 개념도 잡히는것 같아요 (테일윈드 기반으로 ai를통해 기본 토큰을 만들어서 넣어두고 그것을 시스템 삼아서 연습해보았어요) 문제는 이제 피그마 작업물 -> 개발환경 퍼블리싱 구현을 제가 하게되면 , 26년 현재 기준에서 어떤 방법이 가장 수월할지 고견을 여쭙고싶습니다. 회사에서 codex나 claudecode를 툴을 사용하고있어서 AI를 활용하면 ...우당탕탕 어찌저찌 조금씩 구현은 될것 같은데 ..실무기준에서 방향성을 알려주시면 그쪽으로 더 공부해보려 합니다 ! 스크린샷과 전반적인 컴포넌트 효율적인 재사용을 위한 프롬프트를 잘 전달하는것? 아니면 mcp(전혀 모르지만..) 요즘 피그마완성본을 요즘개발환경으로 최대한 유사하게 제품화 하기에어떤방법이 가장 많이 쓰이며, 어떤점을 공부하면 도움이 될지 고견주시면 너무나 감사하겠습니다!

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
Meaw 댓글 2 좋아요 0 조회수 181

로고이미지가없는데요..

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

로고이미지 업로드해주세요

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
소진 댓글 2 좋아요 0 조회수 126

피그마 AI기능 관려

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

피그마에서 레이어 이름 일괄바꾸기 기능을 쓰면 전부 첫글자가 대문자로 바뀌는데 직접 소문자로 바꾸는 작업을 해야하나요?

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
DongHawn Hwang 댓글 2 좋아요 0 조회수 145

프레임 조정 관련

미해결

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

프레임의 사이즈를 조정하려고 축소할 때 벡터의 경우 프레임과 함께 사이즈가 줄어들고 위치가 조정되어 문의 드립니다. 프레임의 사이즈를 조정할때 벡터 사이즈와 위치를 고정할 수 있는 방법은 무엇인가요? 벡터 이미지를 고정 걸어보았는데도 안돼서 문의드려봅니다 답에 참고가 되실까 싶어 조정하기 전과 조정한 후를 보내드립니다.

  • 웹-디자인
  • 모바일-디자인
  • figma
  • 프로덕트디자인
12334152124 댓글 2 좋아요 0 조회수 160

16강 Print Variables 출력 질문

미해결

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

안녕하세요. 수업 재미있게 잘 듣고 있습니다!! 16강 마무리부분에서 Print Variables에서 저는 강사님과 조금 다른 아웃풋이 나와서 옵션을 조절해보려고 해도 그런 부분이 없더라구요. 이 부분은 큰 문제 아닐것 같은데 Varibales 세팅에서 제가 뭔가 잘못해서 이렇게 나오는 건 아닌지 궁금해서 질문 남깁니다 ^^ 감사합니다 .

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
sena Park 댓글 2 좋아요 0 조회수 145

타이포그래피 16 -> 14 변경 시 XXXL만 변경 안 됨

해결됨

디자인 시스템 with 피그마

피그마 화면 자체에서 등록 한 후 토큰 스튜디오로 임포트 했던 XXXL 항목의 경우에만 Default 값을 16 -> 14로 바꿨을 때 적용이 안 됩니다. XXXL 가 토큰 스튜디오 내에서는 44.202로 적용이 되었지만 피그마 화면, 그리고 네이티브 스타일 에서는 여전히 50.5 사이즈를 보이고 있습니다. 문제가 무엇일까요?

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
cs 댓글 2 좋아요 0 조회수 126

hero-img 이미지

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

선생님이 주신 이미지중, hero-img(png)는 있지만 svg는 없습니다. 확인부탁 드립니다.

  • HTML/CSS
  • figma
  • 포트폴리오
  • ai-활용-(ax)
  • 바이브코딩
빛이나 댓글 1 좋아요 0 조회수 139

open in Figma 누르고 ui kit 다운?받았을 때

미해결

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

25강에서 피그마 커뮤니티에서 open in Figma 누르고 다운받고 Drafts 가면 썸네일로 표시되는게 안에 color 페이지 이미지와 Icons 페이지 이미지 들로 나오는데 강의에서 나오는 썸네일 이미지로는 안뜨는데 왜 그런걸까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
한별 댓글 2 좋아요 0 조회수 162

폰트확인 부탁 드립니다.

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

폰트 PPEditorialNew 폰트다운 : https://pangrampangram.com/products/editorial-new Martian_Mone 폰트다운 : https://fonts.google.com/selection Montserrate 폰트다운 : https://fonts.google.com/selection?query=mont 첫번째 폰트는 무료버전만 연결해서 사용해도 되는지. martian mone가 아니라 mono같습니다. 오타 체크~와 montserrate폰트는 검색이 안됩니다. 노션체크 부탁드려요.

  • HTML/CSS
  • figma
  • 포트폴리오
  • ai-활용-(ax)
  • 바이브코딩
댓글 2 좋아요 0 조회수 138

variables 이름 지을때 소문자,대문자 사용에 관해..

미해결

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

19:51 에 italic 등록 할 때 Name은 소문자로 시작하고 Value는 대문자로 시작하도록 값을 넣으셨는 데 이유가 있나요? bold님 만의 규칙인가요? 아니면 실무에서 보통 그렇게 하는지 궁금합니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
한별 댓글 2 좋아요 0 조회수 175

보너스 컨텐츠

미해결

입문자에서 실무자로: 피그마로 마스터하는 디자인 시스템 A to Z

보너스 컨텐츠는 언제 받아볼 수 있을까요?! 리뷰 후 수강 인증을 했는데 아직 받지 못했어요ㅜㅜ!

  • figma
  • figma-tokens
  • 디자인-시스템
  • responsive-design
  • uiux
그미 댓글 1 좋아요 0 조회수 111

미니프로젝트 파일이 이상해요

해결됨

입문자에서 실무자로: 피그마로 마스터하는 디자인 시스템 A to Z

미니프로젝트에 대한 피그마 파일 링크가 제대로 된게 맞을까요? 강의 영상에 보여지는 파일이랑 전혀 다르고 뒤에 종합 실전 피그마로 연결돼요

  • figma
  • figma-tokens
  • 디자인-시스템
  • responsive-design
  • uiux
그미 댓글 2 좋아요 0 조회수 126

수업용 자료는어디서 받을 수 있을까요?

해결됨

SaaS Presentation Animation: From UI Design to Motion in After Effects-2026

강의 내용에 수업용 자료 pdf가 있다고 하셨는데(자료, 레퍼런스 영상 등) 혹시 어디서 받을 수 있을까요? 🙂

  • 모션그래픽
  • figma
  • adobe-illustrator
  • after-effects
  • ui
congsim 댓글 1 좋아요 0 조회수 108

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

미해결

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

섹션3을 수강중입니다. 강의의 내용은 category - property - role - variant - state - scale로 이어지고 vriant안에 primary등이 쓰여집니다. 이미지는 대한민국 정부 디자인 시스템의 내용인데 여기서 primary는 type이고 쓰는 순서나 역할군도 다른거 같아서 너무 헷갈리는 것 같습니다.. 네이밍 순서를 어떻게 외워야할지 고민입니다..!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
  • 지금-베스트
gusdyd20 댓글 2 좋아요 0 조회수 192

여러 요소들 하나의 프레임으로 묶기

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

안녕하세요 오토레이아웃 그리드 배워보기 강의를 듣고있습니다. 강사님께서 8:32에 shift+option+f를 누르면 하나의 프레임으로 묶을 수 있다고 말씀하시면서 수업이 진행되는데 전 그 단축키를 사용했을때 프레임으로 묶이지 않아요 혹시 command option g 가 아닌지 잘 모르겠어서 문의드리고 또 1개의 이미지가 그리드 선 사이를 넘나드는게 왜 저는 안될까요?? 이미지를 아무리 드레그 해도 크기만 커질 뿐 다음 그리드로 선이 넘어가지 못하는데 이건 뭘 잘못하고 있는걸까요

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
강노니 댓글 2 좋아요 0 조회수 223

피그마를 웹에서 활용하는 것과 앱에서 활용하는 것의 차이가 궁금합니다.

미해결

AI 도구와 피그마를 활용한 앱 서비스 기획

현재 피그마 관련 Basic 기능을 익히고 있는데 사이트를 보니, 윈도우에서도 앱버전으로 쓸 수 있네요. 혹시 앱과 웹의 차이가 클까요? 계속 웹으로 들어가는 것보다 바로 앱으로 해놓고 바로 접속하는 것도 편할거 같아서 여쭙니다!

  • 프로토타이핑
  • figma
  • 서비스-기획
  • 인공지능(ai)
  • uiux
Jiyoon Chae 댓글 1 좋아요 0 조회수 133

47.그리드 주요 용어

미해결

입문자에서 실무자로: 피그마로 마스터하는 디자인 시스템 A to Z

그리드에서 사용하신 피그마 플러그인 Breakpoint 가 유료인데 추천해주실만한 무료 플러그인 있을까요?

  • figma
  • figma-tokens
  • 디자인-시스템
  • responsive-design
  • uiux
Sharon Park 댓글 1 좋아요 0 조회수 149

예제 파일이 다릅니다.

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

예제파일을 열어도, 현재 강의 내용과 일치하는 화면이 없습니다. 어떤걸 보고 따라 해야하나요? 아니면, 실습없이 강의를 듣는 영역인가요?

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
RooRoo 댓글 2 좋아요 0 조회수 133

시작 파일

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

시작할때, 새로 만들기를 눌러서 시작하는게 아니라 주신 예제파일을 열어서 실행하는건가요? 저는 frame을 만들면, section이 없는데 강사님은 이미 section부터 시작하셔서요. create 밑에 있는 import로 앞서 주신 Practice v1.fig 파일을 불러오고 시작하나요?

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
RooRoo 댓글 1 좋아요 0 조회수 110

6강 질문

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

6강에서 컴포넌트를 detach 하는 버튼이 보이지 않아요 단축키도 안먹힙니다 ㅠ

  • figma
  • ui
김보민 댓글 1 좋아요 0 조회수 170

인기 태그

인프런 TOP Writers

주간 인기글