inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

타이포그래피 네이밍 관련해서 궁금한게 있습니다.

해결됨

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

🔍 상황 현재 타이포그래피 스타일 명명 방식에 대해 고민이 있습니다. 개발자 측에서는 Display1-Bold 와 같이 위계 중심의 토큰 네이밍 을 선호합니다. 코드 연동 시에는 스타일명이 그대로 토큰으로 등록되기 때문에 40px 같은 구체적인 수치를 굳이 명칭에 포함할 필요가 없고 , 오히려 수치가 변경될 경우 네이밍까지 수정해야 하는 유지보수 이슈 가 발생합니다. 디자이너 측에서는 Figma 내에서 스타일을 빠르게 식별하고 사용하기 위해 Display1-Bold-40px처럼 사이즈가 명시된 스타일 네이밍 을 선호합니다. 수치가 함께 있어야 작업 중 빠르게 위계를 파악하고 적용하기 수월 하다는 의견이 있습니다. 🙋🏻 질문 이러한 상황에서 다음과 같은 고민이 있습니다: 디자이너가 스타일 명에서 수치를 보고 싶은 니즈 와 개발자는 위계 중심의 명칭을 유지하고 싶은 니즈 를 동시에 충족시킬 수 있는 구조 가 있을까요? 예를 들어 Figma 내에서 디자이너는 Display1-Bold-40px처럼 수치를 보고 작업하되, 코드로 내보낼 때는 Display1-Bold로만 연동되는 방식 이 가능한지, 혹은 실제 조직에서는 이런 상황을 어떻게 운영 하고 있는지 궁금합니다.

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

라이브러리 스왑관련 문의입니다

해결됨

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

안녕하세요! 라이브러리 스왑관련 문의입니다 manage libraries에서 updates와 browse libraries에 teams에서 라이브러리 스왑이 가능한걸로 아는데요 이 2개 라이브러리 업데이트 기능에 대한 자세한 설명과 차이점을 알고 싶습니다.

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

로딩 스피너 크기 조절

해결됨

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

섹션 7의 41. 로딩스피너 9:37부근 질문 드립니다 레이아웃을 고정하고 안에 있는 백터를 스케일을 조절해서 사용하시는데 질문이 있습니다. 1. 영상을 따라하려고했지만 이미지처럼 defult를 16으로, spinner segmants 레이어를 16으로 둘다 postion에서 sacle으로 맞춰주도 보이지 않습니다. 이 상태에서 vector을 클릭하면 우측패널이 잠궈지고 48로 되어있습니다.. 어떻게 해야할지 모르겠네요. K을 눌러서 수정하는 방법으로는 왜 제대로 돌아가지 않나요? 회전 축과 sacle의 관계가 어떻게 되는건지 궁금합니다 .

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

typography 설정시 엑셀

해결됨

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

해당 엑셀 자료가 어디에 있는지 못찾겠네요 ㅠㅠ..

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

25강 Setting 관련 오류

해결됨

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

안녕하세요 제가.. 디자인까지 배워야할지 몰랐는데 따라하다 보니 재미있네요. 다만, 25강에서 하기 publish 하면 오류가 있어서.. 어떻게 고칠수 있을까요?

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

[19강]시맨틱 베리어블 - 폰트

해결됨

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

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 안녕하세요. 19강 15분쯤 듣고 있는데요, properties 에서 밑줄(-) 이 있는데 이건 정의가 안된것일까요 ? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
이선영 댓글 1 좋아요 0 조회수 122

25강.컴포넌트 만들기 전 라이브러리 세팅하기

해결됨

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

안녕하세요. 우선 강의 너무 열심히 만들어주셔서 감사합니다. 25강.컴포넌트 만들기 전 라이브러리 세팅하기 강의를 듣고있는데요. 플러그인 apply variables사용할때 강사님과다르게 semantic만 화면에 나오는데 추후에 문제가없는건가요? publish도 다한거같은데 이유를 모르겠습니다. +추가적으로 27강에서 텍스트에서 label텍스트에 Typography에 기존에 했던 텍스트 스타일을 적용할려고하는데 Body/md/medium 그전에는 Body를 Source Code Pro 적용했었는데 추후에 따로 body도 Pretendard로 적용하신건가요?

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

프로그레스 바 애니메이션이요~

해결됨

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

프로그레스 바 & 스켈레톤 로더 강의 듣는 중인데요 애니메이션 잘 적용시킨 것 같은데 프레임에 넣어도 움직이질 않아요 ㅠ ㅠ 이 상태로 멈춰 있어요 ㅠ

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

변경 기능 관련 강의 업데이트

해결됨

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

안녕하세요 선생님! 강의 잘 듣고 있습니다. 혹시 피그마 자체 기능으로 변경된 강의는 언제 업데이트가 될까요?

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

다크모드의 색상은 반드시 primitive에 정의된 색으로만 진행해야하나요?

해결됨

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

안녕하세요! 강의 잘 듣고 있습니다. 다크모드에서 컬러를 정의할 때 아래와 같은 부분이 궁금합니다: 다크모드에서도 반드시 primitive에 정의된 색상만 사용해야 할까요? 예: light에선 blue-800 , dark에선 blue-200 을 썼는데, 다크 배경과 만나니 채도/명도가 너무 튀는 경우가 있더라고요. → 이런 경우 primitive에 없는 색(hex code 등)을 써도 괜찮은지 궁금합니다. 다크모드 전용 색상을 쓸 경우, 그걸 primitive에도 별도 등록해두는 게 일반적인가요? 아니면 그냥 semantic 토큰의 mode:dark 에만 넣어도 문제없을까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
나만의트랙 댓글 2 좋아요 0 조회수 148

병합된 셀 표현은 어떻게 표현하는게 좋을까요?

해결됨

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

테이블을 보면 종종 병합된 셀 표현도 많이 나오는데요. 병합된 셀 테이블은 별도의 컴포넌트 없이 그냥 따로 만드는 게 나은걸까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
나만의트랙 댓글 2 좋아요 0 조회수 331

섹션5 아이콘 색상 변경 질문입니다.

해결됨

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

섹션5 마지막 강의, 마지막 부분에서 아이콘 색상 변경되는 부분이 안돼서 질문 남깁니다. 알려주신대로, icon placeholder와 아이콘의 색상을 color/icon/primary 로 맞췄고, icon placeholder 에서 24px짜리 복사해서 프레임과 함께 컴포넌트 만들고 아이콘에 인스턴스 스왑 프로퍼티 설정하고, 아이콘 색상 inverse로 변경하고, 컴포넌트 복사해서 아이콘을 바꾸니 inverse 색상으로 아이콘이 바뀌지 않고 primary 색상 그대로 나옵니다. 하라는대로 그대로 따라했는데.. 왜 적용이 안되는걸까요

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

라벨이나 chip에 열 개 정도 컬러가 들어갈 때

해결됨

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

안녕하세요. 서비스 특성 상, 리스트에 들어가는 chip 컬러가 엄청 다양하게 쓰입니다ㅜ 그럴 경우엔 어떻게 컬러를 묶으면 좋을까요?

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

Design Kits관련 질문.

해결됨

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

안녕하세요. Design Kits관련 질문을 드립니다. 지금은 강의를 다 듣고 질문을 드리는데, 초반에 Foundation + Component Library로 하는걸 알려주셨는데, 계속 잘 안되어서 몇일을 시도를 하다가 그냥 Desgin Kits로 진행을 했었습니다. 지금이라도 다시 하는게 좋을까요? 아니면 Design Kits대로 그냥 가도 되는건지 궁금합니다. 이제 만든거를 바탕으로 실제 Product에 만들 시기가 점점 다가오고 있는데, 따로 하는게 맞긴 한데, 이미 만들어놔서 좀 아깝긴하네요... 어떻게 하는게 좋은지 조언해주시면 감사드리겠습니다~!

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

아이콘

해결됨

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

볼드님 항상감사합니다.. ! 아이콘은 괜찮은데 Union을 했는데도 저렇게 표시되는 이유는 무엇일까요? 제대로 먹히지 않은걸까요??

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

피그마 라이브러리 연결 문의건

해결됨

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

안녕하세요! 강의 잘 들고 있습니다.^^ 피그마 라이브러리 연결관련 문제로 문의드립니다. 현재 외부업체와 협업중인데요! 보안문제로 로컬파일로 파일을 주고 받아야 합니다. 그런데 라이브러리가 연결된 파일이지만 전달 받으면 그안에 연결된 컴포넌트가 해제되어 라이브러리 업데이트를 할수 없는 상황입니다. (라이브러리 스왑기능도 안됨) 라이브러리가 업데이트되면 연결된 파일도 업데이트를 해줘야 하는데 할때마다 연결을 할수가 없어 라이브러리가 연결된 상태로 로컬파일을 주고 받을 수 없을까요?? (플러그인이나 다른 방법)

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

플러그인 lock aspect ratio

해결됨

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

안녕하세요 선생님! 강의 잘 듣고 있습니다 다름이 아니라, 제가 지금 설명해주신 플러그인인 lock aspect ratio를 활용해서 카드를 만드려고 하는데, 해당 플러그인이 검색이 되지 않아 질문 드립니다. 혹시 해당 플러그인을 사용해야 하는건지, 또는 피그마 자체 기능으로 있는 lock aspect ratio라는 기능을 사용해도 되는건지 질문드립니다 우선 피그마에 있는 기능으로 사용을 해봤는데, 이 기능의 경우 선생님이 정리하시는 레이어처럼 레이거가 별도로 생성이 되지 않아서요..!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
나낭파수타 댓글 2 좋아요 0 조회수 211

상단에 위치하는 글로벌 네비게이션(Global Navigation/Header) 관련 질문드립니다.

해결됨

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

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다. 안녕하세요. 섹션 9의 상단에 위치하는 글로벌 네비게이션(Global Navigation/Header)를 듣는중 궁금한점이 있어서 질문드립니다. 사실 이미 듣고 나서 해결되지 않은 것때문에 후속에서도 계속 사용되니 문제가 되어서 질문드립니다. global navigation에서 모바일 설정시에 이런식으로 나와서 제가 수정을 열심히 해봤는데도 잘 되지 않아서 어떻게 해야 햄버거 버튼이 오른쪽으로 붙는지 잘 모르겠습니다. 현재 구조는 아래와 같으며, Container는 Auto layout의 fill로 설정되어 있고, 햄버거 버튼은 아래와 같으며, 로고는 아래와 같이 설정되어 있습니다. 되도록이면 혼자서 해보려고 했는데, 몇일동안 해결을 하지 못하여서 질문을 드립니다. 감사합니다.

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

문의

해결됨

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

21:48초 플러그인 강의에서 보면 리 네임을 할 수 있는데. 제가 깐 플러그인에서는 리네임 불가 하고 드롭 다운으로만 펼쳐져요...

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

문의

해결됨

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

미듐md 찾아서 장평? 선택하려 했는데 안떠요.. 시멘틱 베리어블 등록하고 스타일과 연결하기 편 16:50분 경 입니다.

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

인기 태그

인프런 TOP Writers

주간 인기글