inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

베리어블 활용에 질문이 있습니다 :)

해결됨

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

안녕하세요, 선생님! 본격적으로 베리어블을 활용/운영하다보니 궁금한점이 있어 글 남겼습니다. 1.semantic으로 지정되지않은 컬러 활용? Primitive의 color-100/200/300 이런 베리어블들은 사용을 지양해야하나요~? Primitive는 시멘틱처럼 용도가 따로 지정되어잇지않아 다른 디자이너들이 보면 어떤 때 200,300을 써야하는지 헷갈릴것같은데 어떻게 해야할까요? 예를들어 미세하게 컬러를 조정할떄가 생기는데 그때마다 시멘틱의 text,bg,border,icon을 각각 1컬러당 4세트씩 작업해줘야하는 점이 번거로울것 같기도한데, 그러자니 primitive를 바로쓰면 용도에 대해 적혀있지않은 네이밍이라 헷갈릴 것 같습니다. 조언 주실 부분 있으실까요? 2.텍스트나 도형을 생성하고 컬러칩 라이브러리를 열면 라이브러리 상단에 semntic이 우선으로 뜨지 않고 primitive가 먼저 뜨게 되는데 상단에 우선으로 뜨게 하는 방법이있을까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
김성진 댓글 1 좋아요 0 조회수 431

프레임을 씌울 때

해결됨

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

종종 그룹을 먼저 씌운 후, 오토레이아웃을 설정하시던데 특별한 이유가 있는지 궁금합니다!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
overbold 댓글 1 좋아요 0 조회수 230

darkmode에 기존 gray50~900을 사용하지 않으려면

해결됨

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

Primitive에 다른 gray팔레트를 만들어줘야 하나요? 이때 네이밍은 어떻게 지정하면 좋을지 궁금해요.. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Jayna 댓글 1 좋아요 0 조회수 233

Color Style Guide 플러그인

해결됨

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

Color Style Guide 플러그인이 그레이만 제공 되는 것 같아요. 혹시 플러그인을 사용하지 않고 컬러 팔레트를 만드는 방법은 없을까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Jayna 댓글 1 좋아요 0 조회수 610

앱 메뉴 구조도 작성툴

미해결

앱 기획의 새로운 방식, Figma!

안녕하세요! 강의를 올려주신 시점과 제가 강의를 수강하고 있는 시점에 차이가 조금 있다보니, 현재 시점에서 앱 메뉴 구조도를 엑셀이나 구글 시트 외에 효율적으로 혹은 좀 더 잘써볼 수 있게 서포팅해주는 툴이 있을까요 ? 피그마처럼요!

  • figma
  • 서비스-기획
suim0331 댓글 1 좋아요 0 조회수 619

실습을 보고 2차변수를 추가하려는데 유료버전만 되는 거 같습니다.

미해결

[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)

이번 실습을 보고 2차 변수를 추가하려니까 무료 버전에서는 변수 모드 1개만 가능하다고 하네요.. 유료 결제를 해야만 해당 실습을 따라할 수 있을까요?

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
eyagi_11 댓글 2 좋아요 0 조회수 602

보조색을 다른 hue로 사용할 경우엔 베리어블 구조를 어떻게 짜야할까요?

해결됨

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

머테리얼 컬러 가이드처럼, 프라이머리 컬러를 블루 계열로 두고 세컨더리 컬러를 틸 계열로 두고 싶은데, 예제는 하나의 색상 계열로 프라이머리, 세컨더리를 나누고 있어서 베리어블 구조를 어떻게 짜야할지 잘 모르겠습니다. 테마-브랜드 컬러에 틸 계열을 추가한 뒤 시멘틱-bg-인터랙티브세컨더리에 해당 브랜드 컬러를 참조하면 되는걸까요? 아니면 프리미티브 컬러에만 틸 계열을 넣어둔 뒤 시멘틱-bg-인터랙티브세컨더리 컬러에 프리미티브-틸500 을 바로 참조하면 되는걸까요?..

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Gyeongmin Jeong 댓글 1 좋아요 0 조회수 263

인스턴스 섹션이 보이지 않습니다.

해결됨

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

create instance swap property를 적용하려는데, 인스턴스 섹션이 안보입니다. 어디서 찾을 수 있나요? 오른쪽 바에는 보이지 않습니다. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
torori 댓글 3 좋아요 0 조회수 412

figma tokens 관련 질문입니다!

해결됨

디자인 시스템 with 피그마

안녕하세요! 컬러 강의 중 피그마 토큰에서 스크롤이 안내려가서 컬러가 다 안보이는 현상이 있어서요 혹시 이 문제에 대해 해결할 방법이 있을까요??

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
shin 댓글 2 좋아요 1 조회수 329

Color scoping 적용이 안되어 문의드립니다!

해결됨

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

안녕하세요! 선생님 색상 배리어블 등록하기 강의를 보며 실습하는 중입니다. Color scoping 적용이 안되어 문의드립니다! 첨부 이미지 처럼 text에서는 Text, bg에서는 bg 만 체크, border, icon 각각 해당 항목만 체크하였습니다! 이후 텍스트를 작성하고 등록한 배리어블 컬러를 적용해보니, 체크한 Text 외에 bg, border, icon 컬러가 모두 보이는 문제가 있습니다! Text에 적용할 때는 Text 컬러만 보여야 하는데요~ 1)번 설정 시, 추가로 더 체크해야될 부분이 있는 걸까요? 도움 부탁 드립니다! 1) 2) 좋은 강의 감사드립니다!!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
askare 댓글 2 좋아요 0 조회수 361

질문있습니다!

해결됨

UIUX 포트폴리오 Part.2 -UIUX 디자이너로 취업하기

안녕하세요~ 강의 들으면서 포트폴리오 준비하려고합니다! 다름이 아니라 영상에 있는 것처럼 어플 흐름도를 전부 디자인하는건가요??.. 실제 어플 출시처럼요?? 영상첨부해주신 사이트에서 참고 자료 봤는데 다들 웹, 앱 모두 이미 개발하신 분들 이길래요 ㅠ

  • 웹-디자인
  • 모바일-디자인
  • figma
  • 콘텐츠-제작
  • 클론-디자인
gmd0503 댓글 2 좋아요 0 조회수 279

아이콘 관련 질문

해결됨

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

icon/settings를 제외한 다른 아이콘은 하나의 '그룹'으로 만들어져 있습니다. 하지만 settings는 그렇지 않아 색을 바꾸려고 할 때 'Border'로 인식되더라구요. 두 개를 그룹화 시켜도 '아이콘'으로 변하지 않습니다. 어떻게 하면 두 개를 합쳐 '아이콘'으로 인식될 수 있게 할 수 있을까요? 고맙습니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
김보준 댓글 2 좋아요 0 조회수 354

local variables vs local styles

해결됨

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

안녕하세요. 디자인 토큰을 만들기 시작한 프로덕트 신입 디자이너입니다! 색상은 local variables에서 만들었는데 타이포는 local styles에서 만드는 이유가 있을까요? 아니면 그것또한 토큰을 만드는 방법인가요? 토큰과 관련해서 너무 초보라.. 이해부탁드립니다! 감사합니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
klj00700 댓글 1 좋아요 0 조회수 540

variables 색상이름 설정

해결됨

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

variables-theme-Plus에서 Libraries색상을 지정하면 색상이름이 blue/50만 뜨고 앞에 color/가 없이 나오는데 같이 나오게 하려면 어떻게 하나요? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
torori 댓글 1 좋아요 0 조회수 260

배리어블 컬러 추가한 것만 볼 수 없나요?

해결됨

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

안녕하세요. 스타일로만 작업하다가 이번 작업부터 배리어블 활용해서 디자인시스템을 구축해보고자 합니다. 다른 파일에서 배리어블 컬러가 적용된 에셋을 복사해오거나 하면 그에 연결된 배리어블이 자동으로 추가되는데, 자동으로 추가되지 않고 제가 사용하고자 하는 파일에서 추가한 배리어블만 볼 수는 없나요? 그리고, 해당 파일의 배리어블 콜렉션 외의 컬러가 적용된 오브젝트를 찾는 방법이 있을까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
mina 댓글 3 좋아요 0 조회수 547

도대체 예제 파일이 어딨죠?

미해결

[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)

보면서 따라 하고싶은데 다운로드 버튼은 어디에도 보이지 않네요......

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
hee 댓글 1 좋아요 0 조회수 724

[하단 네비게이션]

해결됨

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

https://www.figma.com/file/bOSNSdPGVIn8ZpyTacom3d/%5B%EA%B1%B4%EB%84%88%EA%B1%B4%EB%84%88%5D-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?type=design&node-id=7%3A484&mode=design&t=cn6j72TdmocKUhwt-1 badge의 Type을 number나 letter로 만들면 위의 그림처럼 됩니다. dot형태와 동일하게 오른쪽 위에 나타나게 하려면 어떻게 해야할까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
김보준 댓글 2 좋아요 0 조회수 365

피그마에서 한번에 텍스트 수정하는 방법

해결됨

[인프런 X 볼드UX] 디자이너 성장 가이드와 피그마 활용 꿀팁 모음

안녕하세요. 볼드님. 오늘 처음으로 볼드님 강의를 수강하여 따라해 보고 있는 초보자입니다. 피그마에서 컨트롤+F를 누르고 오탈자(텍스트)를 찾아서 하나씩 수정하려니 무척 비효율적이네요. (기획자가 텍스트를 변경하면 디자인에 적용된 텍스트도 일괄적으로 변경해야 하는 상황이 종종 있습니다.) 오탈자를 한번에 변경하는 방법도 강의로 부탁 드리겠습니다^^ 영국에서도 건승하시기 바랍니다. 감사합니다.

  • figma
  • 포트폴리오
  • 커뮤니케이션
  • 디자인-시스템
  • 프로덕트디자인
예리한눈썰미 댓글 2 좋아요 0 조회수 9984

5:11 text fill 로 할 경우 문의드립니다.

미해결

[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)

05:11 텍스트를 fill 로 하면 1자로 텍스트가 변하는데 다음에 해야 할 사항이 있나요?

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
yul taek yu 댓글 2 좋아요 1 조회수 259

간격 조정 관련 질문

해결됨

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

아래 이미지와 같이 여러 개를 선택했을 때 간격 조정이 뜨지 않는 경우가 종종 발생하고 있습니다. 해결방법을 찾아봐도 발견하지 못해 질문 남깁니다. 고맙습니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
김보준 댓글 3 좋아요 0 조회수 506

인기 태그

인프런 TOP Writers

주간 인기글