문제점
•
개발자는 스타일링할때 figma에서 제공하는 css 보고 개발한다. 하지만 figma에서 제공하는 코드를 그대로 사용할 수 없고 변환을 하는 과정을 거쳐야한다. 이 과정이 비효율 적이라는 생각이 들었다.
◦
border-radius ⇒ borderRadius
◦
ds에 맞는 값 사용 등
// ASIS
border-radius: "var(--border-radius-md, 8px)",
/* elevation/3 */
box-shadow: 0px 5px 8px -2px black.a400, 0px 1px 4px -1px black.a100, 0px 6px 16px 0px black.a300;
border-right: 1px solid common.5;
// TOBE
borderRadius: 'md',
boxShadow : '3'
borderRight : '1px solid token(colors.common.5)'
JavaScript
복사
해결방안
•
figma에서 만든 css값을 하나씩 돌면서 원하는 값으로 변환해주는 plugin을 만든다.
◦
A 라는 패턴으로 값이 들어왔을 경우 B라는 패턴으로 변경해~
◦
A 라는 패턴에 걸리지 않을 경우 figma에서 생성한 값이 그대로 들어감
개선 사항
1.
아직은 figma css 패턴에 대한 수집이 부족하여, 제대로 변환이 되지 않아 수동으로 변경을 해야하는 경우들이 있을 수 있음
{
padding: '12px var(--border-radius-border-radius-16px, 16px) 12px 12px',
gap: 'var(--16, 16px)',
}
JavaScript
복사
2. 디자인 시스템에 있는 컴포넌트를 바로 복사 붙여넣기 해서 사용할 수 있도록 코드 제공
•
피그마 시안을 디자인시스템 사용 코드로 자동 변환하여 프론트엔드 개발자의 개발 효율성을 높이고, 디자인 시스템을 사용할 수 있도록 돕는다.
•
피그마 구조?에 대한 이해가 좀 필요해 보인다.(componentNode, InstanceNode, ComponentSetNode...)
•
컴포넌트 정보 추출을 위해 디자이너의 도움이 필요할 수 있음
3.
로딩이 좀 걸림ㅋㅋㅋ코드 개선이 필요함!! ⇒ 툴이 유용하다면 플랫폼팀에서 개선시켜 나가면 좋겠다!!
플러그인 사용하기
1.
피그마 plugin 다운로드
2.
dev mode 켜고 code 패널?에서 IDS-TO-CODE 선택
3.
변환된 코드를 가져다 쓴다~!