타이포그래피 토큰 개발팀에서 적용 시 문제 관련해서 질문드립니다!

Question

안녕하세요! 현재 아래와 같이 베리어블을 등록했는데, 개발팀에서 타이포그래피가 정상적으로 적용이 안 되는 것 같다고 하셔서 질문드립니다! 컬러(시맨틱까지) 타이포그래피(프리미티브까지 적용 후 스타일에 적용함) 간격/패딩 값(시맨틱까지) 토큰 스튜디오 사용해서 깃허브에 푸시해 드렸는데, 다른 건 문제 없는데 타이포그래피가 정상적으로 안 뜬다고 하셔서요. 다트에 검색하셨을 때 검색이 안 되는 것 같습니다..! 여러가지로 시도해 보았지만 제대로 적용이 안 돼서 기존 스타일 사용 시처럼 직접 조합해서 사용하신다고 하셨는데 혹시 제가 뭘 잘못 전달드린 걸까요? 플러터로 앱 개발중이라 css는 사용하시지 않으신다고 하셨습니다! 등록한 베리어블과 스타일, 토큰 스튜디오에 임포트 한 상태 이미지 첨부합니다! 확인 부탁드립니다. 감사합니다!! !

볼드 UX · Answer

안녕하세요, MATH POST님, 우선, 제 강의에서는 Token Studio를 다루지 않기 때문에 자세한 답변을 드리기 어려운 점 양해 부탁드립니다. 다만, 보내주신 이미지를 확인한 결과, 피그마와 Token Studio가 잘 적용된 것으로 보입니다. 제 경험상, Token Studio에서는 “Typography”를 생성한 후 이 안에다가 Primitive를 모아두는 방식 을 추천드립니다. 그래야지 fontStyle을 제대로 내보낼 수 있습니다.(이렇게 하셨으리라 생각합니다.) 한편, 개발자분들이 “안된다고 한다”는 피드백은 범위가 넓어 정확한 원인을 파악하기 어려운 점이 있습니다. Style Dictionary 공식문서와 플러터용 커스텀 스타일 딕셔너리를 참고해보시는 것을 추천드립니다. https://styledictionary.com/ https://github.com/aloisdeniel/style-dictionary-figma-flutter 감사합니다! 😊

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. MATH POST님, 타이포그래피 토큰이 개발팀에서 정상적으로 적용되지 않는 문제를 겪고 계신다고 하셨군요. 이 문제를 해결하기 위해서는 여러 가지 점을 확인해볼 수 있습니다. 토큰 파일 확장자 확인 : 개발팀에서는 Dart를 사용하니, Figma에서 내보낸 디자인 토큰 파일이 Flutter의 스타일링에서 인식 가능한 포맷인지 확인해보세요. Dart에서는 JSON 형식을 많이 사용하므로, JSON 포맷으로 내보내기가 가능한지 확인해보세요. 타이포그래피 속성 확인 : Figma에서 설정한 타이포그래피 속성들이 Flutter의 TextStyle 위젯과 일치하는지 확인하시기 바랍니다. 폰트 페밀리, 폰트 사이즈 등 중요한 속성들이 제대로 매칭되는지 확인해보세요. 충돌 확인 : Flutter 프로젝트 내에서 다른 스타일 파일과 충돌이 없는지 확인해보세요. 이 경우, 중복되는 스타일 정의가 있는지 검토해보세요. 경로와 레퍼런스 문제 : 토큰을 참조하는 과정에서 경로나 사용 방법에 오류가 없는지 점검하세요. 빌드 및 캐시 문제 : 프로젝트의 빌드를 새로 하거나 캐시를 클리어해보는 것도 문제 해결에 도움이 될 수 있습니다. 위의 사항들을 하나씩 확인해보시고 수정하신 후에도 문제가 해결되지 않는다면, 개발팀과 함께 어떤 부분에서 정확히 문제가 발생하는지 구체적으로 논의해보시는 것이 좋습니다. 추가적인 질문이 있으시면 망설이지 말고 문의해 주세요! 이미지 URL: 1. 이미지1 2. 이미지2