inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Swap instance 질문

해결됨

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

아이콘을 직접 만들어서 components 화 시키고 사용하고 있는데 Swap instance 를 사용해서 아이콘을 변경하면 모두 아이콘 제작 당시 Component 에 적용된 색상으로 변경 됩니다. 선생님이 진행한 부분에서는 자동으로 Variant에 적용된 색상으로 적용되고 있는데 이렇게 하려면 어떻게 해야하나요... 아님 제가 수업 중 놓치고 있는 부분이 있는지.. 확인 부탁드립니다. 감사합니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
an_daseul 댓글 6 좋아요 0 조회수 1077

피그마 토큰 스튜디오 vs 베리어블

해결됨

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

현재 스타트업에서 디자인 시스템 구축을 준비하고 주니어 프로덕트 디자이너입니다. 피그마 토큰 스튜디오랑 베리어블중 어떤걸로 디자인 시스템을 구축하는게 좋을지 갈팡질팡 하고 있는 중입니다. 피그마 자체 기능인 베리어블로 사용하는게 좋을 것 같지만 아직 기능이 토큰 스튜디오 플러그인보단 다양하고 좋진 않아서 더고민이 되네요 베리어블을 사용해야하는 이유와 장점 같은게 있을까요

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

체크/라디오박스 등 라벨이 2줄이상 적용될 때는 어떻게 해야하나요?

해결됨

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

보통 체크박스와 라벨의 오토레이아웃을 Align Left로 설정하게 되는데, 2줄 이상의 텍스트가 필요할때는 어떻게 제작하시나요? 디자인시스템에 1줄일 경우, 2줄이상일 경우를 따로 등록하시는지, 아니면 다른방법을 쓰시는지 궁금합니다. 추가 질문) 저는 간간히 2줄 이상일 경우에는 컴포넌트 전체의 오토레이아웃을 Align top left를 한다음, 체크박스에 한번 더 오토레이아웃을 설정하고 위아래에 (텍스트 박스와의 시각보정을 고려한) 여백을 설정해서 하나의 컴포넌트로 1줄(=1line,solo...),2줄이상(=2line,multi...)의 경우를 하나로 관리할 때도 있는데요. 이 방식으로 개발자에게 전달을 해본적이 없어서, 전달과정에서 문제가 없는지도 궁금합니다!

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

color variable 등록 시 naming 및 색깔 기준 문의...

해결됨

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

안녕하세요. 강의 몇 번이나 돌려보고, 자료 보면서 제가 진행하고 있는 개인 프로젝트에 맞춰서 수정/작성하고 있습니다. 그러던 중 color variable 등록할 때 궁금증이 생겨서 글을 작성하게 되었습니다. theme에서 neutral로 재정의하는 이유가 뭘까요? (primitive에 greyscale이 있음에도 불구하고) semantic color 에서 primary / secondary / tertiary가 뜻하는게 뭔가요? semantic color에서 bold와 subtle은 언제 쓰는건가요~? semantic color에서 그냥 컬러들이랑 INTERACTIVE에 넣은 컬러들이랑 사용처가 어떻게 다른지 궁금합니다 ㅠㅠㅠ

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
dav 댓글 1 좋아요 2 조회수 609

[실습] 색상 배리어블 등록하기

해결됨

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

3:27~ theme 등록 중에 라이브러리에서 참조 브랜드 컬러 50을 주신다고 하셨는데, 컬러 스타일 기본 셋팅이 안되있는 상태에서 실습이 가능한걸까요? 플러그인 설치부터 다시 해봐도 같은 셋팅값 설정이 안되있어서 질문남깁니다! 아직 초~중반 수강중인데, 퀄리티가 너무 좋네요. 감사합니다.

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

[실습] 간격 배리어블 등록하기

해결됨

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

간격 배리어블 스타일가이드 만들 때는 어떤 플러그인 사용하셨는지 알 수 있을까요..?

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

슬랙 커뮤니티 초대 문의

해결됨

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

안녕하세요! 선생님 슬랙 커뮤니티 초대 부탁드립니다!!

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

아이콘 관련 문의드립니다.

해결됨

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

안녕하세요. 선생님! 아이콘 자료를 다들 공유를 받으시고 진행하시는지 궁금하며, 이전에 아이콘을 모두 유니온으로 여러 벡터를 병합을 했었는데, 그 중 몇 아이콘은 버그인지 제대로 병합이 안되는 아이콘도 있었고, 선 하나로 된 아이콘도 있어서요! 그래서인지 체크박스 작업 중 체크 아이콘에 inverse 컬러가 라이브러리에서 없었습니다! (체크아이콘 = 선형 아이콘) 추가로 혹시 위와 같은 상황에서는 어떻게 처리를 해야할지 궁금합니다. 다른 질문인데요, 아이콘은 제작 후 모두 면으로 변형시켜서 작업을 진행하는 걸까요? 그렇다면 선으로 제작한 아이콘은 어떤방법으로 면으로 변형하는지 궁금하기도 합니다!

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

픽스드, 플루이드 반응형 레이아웃 그리드 적용 질문

해결됨

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

안녕하세요, 볼드 멘토님! 픽스드, 플루이드 반응형 레이아웃 중에 많이 사용되는 케이스가 어떤 것일까요? 오토레이아웃 적용해서 반응형 웹 사이트 디자인 중인데요! Pc 사이즈 먼저 제작 후 모바일, 패드 사이즈 제작하려던 중, 헷갈리는 부분이 있어서요! 콘텐츠 이미지 사이즈를 픽스드 처럼 동일하게 적용할지 고민하다가 (픽스드로 디바이스마다 이미지 사이즈를 비슷하게 적용하려니 어색해보여서요) 플루이드로 시도했는데요~ 이미지 사이즈 축소 기준을 어떻게 맞춰야 할지 헷갈려서요! 좌우마진, 거터 정해서 플루이드로 시도해봤는데요! 뭔가 설정이나 사용법이 부족한 것인지 이미지 사이즈를 수동으로 조절하게 돼서요! 콘스트레이트 설정도 안 보이구요ㅠㅠ 콘텐츠(이미지, 카드ui) 플루이드 적용 방법 조언(컨스트레이트 설정 안 보임, 자동 조절처럼 안되는 이유), 또는 첨부 자료 부탁드려도 될까요?ㅠㅠ

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
강의화이팅 댓글 1 좋아요 0 조회수 845

브랜드컬러, 시스템컬러 정의 방법 궁금합니다!

해결됨

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

브랜드 컬러, 시스템 컬러 정의 관련 질문 있습니다!컬러 스타일을 등록하기 전에 브랜드 컬러와 시스템 컬러 색을 정하는 부분이 어렵게 느껴집니다! 브랜드 컬러와 시스템 컬러를 정하는 노하우를가 있을까요?브랜드 컬러는 기존 로고 컬러 톤이 어두워서 웹에서만 채도를 조절해서 좀 더 밝게 정했는데요! 어느 정도까지 조절할지 기준을 정하거나, 시스템 컬러를 같이 도출하는 과정이 아직 어렵습니다ㅠㅠ강사님의 조언 부탁드립니다!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
강의화이팅 댓글 1 좋아요 0 조회수 741

강의 자료 스타일 가이드(타이포그래피) 관련 문의

해결됨

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

안녕하세요, 강의자료에서 스타일 가이드 > 타이포그래피 관련하여 질문드립니다!! 실무 경험이 부족하다보니 신입, 1인 디자이너로 반응형 웹 리뉴얼 진행 중에 스타일 가이드 제작이 쉽지 않아서요~ 강사님께서 만드신 타이포그래피 가이드를 그대로 실무에 적용해도 괜찮을지 궁금합니다!! 실무에서 많이 쓰는 타이포 그래피 사이즈인지 궁금합니다! 도움 부탁 드립니다!!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
강의화이팅 댓글 2 좋아요 0 조회수 449

피그마 에듀케이션 계정 신청 관련

해결됨

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

안녕하세요, 강의 자료에서 알려주신 피그마 에듀케이션 계정 신청이 이제는 안되는 것인지 궁금합니다. 알려주신 가이드 대로 했는데요, 학생 이메일이 아니라서 그런지 신청 버튼을 누르면 계속 초기화돼서 신청이 안 됩니다 ㅠㅠ

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
강의화이팅 댓글 2 좋아요 0 조회수 3629

베릴어블, 아이콘에 궁금한점이있습니다 ㅎㅎ

해결됨

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

안녕하세요 선생님 강의 듣던 중 궁금한점이 있어 질문 3가지 작성했습니다. 다음과 같이 참조된 값에 ?표가 생기는 상황이 발생합니다. 제가 잘못 적용한거 같은데 ㅠ 혹시 어떤 경우의 수 때 발생할 수 있는 현상인지 궁금합니다~ 2. 아이콘 컬러적용 세션에서 union한뒤 vector로 이름을 변경했는데 아이콘을 불러오면 stroke가 0 인상태로 불러와집니다. 또 가끔가다가 색도 반영이 안될때가 있는데 reset all chagne?이런걸 해줘야하는지 궁금합니다. <아이콘 원본컴포넌트> <버튼에서 airplay아이콘 스왑햇을때> 스위치 에러가 쓰이는 실제예시가 궁금합니다 어떤 때 쓰일 수 있을까요? 질문이 좀 많은데 강의 재밌게 잘 듣고잇습니다 감사합니다!

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

강의자료 공유 어디서 받을수있나요?

해결됨

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

안녕하세요, 앞의 강의들중에 어떤 리소스 자료나 비슷한것들을 공유해주시겠다고 말씀이 있는데, 어디서 공유받을 수 있는지 궁금합니다~!

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

B2C 이러닝 과정이 안 보여요.

해결됨

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

B2C 이러닝 과정, B2C 웹 페이지 작성이 궁금해서 강의 등록을 했는데 그 내용이 안 보이는 같아요..그 부분은 아직 안 올라온 건가요? 아님 수업 내용에서 빠진 걸까요?

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

4분 부분에서 궁금한점이있습니다.

해결됨

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

앞족에서 베리어블은 스타일과 베리어블을 참조받을수있따고 설명해주셧는데 3분 20초에서는 스타일을 찾을수 없다고 말씀하셔서요. 실제로도 해보니 베리어블은, 기존 베리어블을 참조할 수잇고 스타일은 참조못하고 스타일은, 라이브러리에서 베리어블만 적용되고 스타일은 안된느데 둘이 각각 서로 참조가 안되는 부분으로 실제 적용되는데 제가 잘못 하고 잇는걸까요? 앞에서 하신 설명과 보여주신 설명이 조금 다르게 느껴져서 혼동이오네요 ㅠ

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

컴포넌트 명칭에 대한 질문

해결됨

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

Intro Component Checklist unSelected, selected, partial unSelected, selected 컴포넌트 명칭에 대해 질문입니다.(워크시트) 대문자가 되었다가 소문자가 되었다가 하는데 이부분은 어떤 기준으로 설정하시는지 알려주실수 있을가요? 항상 피그마 명칭을 작성할때 고민되는 부분입니다.

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

인기 태그

인프런 TOP Writers

주간 인기글