Transform Figma components to React styled components template

[LimeBeck]

• Create component template
• Connect parsed styles and design tokens to components
• Implement different component states

[LimeBeck]

Можно реализовать через https://styled-components.com/ - там есть возможность оборачивать любой компонент в стили. Сделать отдельно заготовку компонента с логикой и внутренними состояниями, которую больше не трогать, а её уже обернуть в styled component со стилями, который будет каждый раз генерироваться из стилей Figma. Пример оборачивания:

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);