노력하는 개발자 노력하는 개발자

figma

• Cursor에서 Figma to React rule 적용

  Language/React 2025. 3. 10. 18:14

  Figma 디자인을 React 컴포넌트로 수작업으로 변환하는 과정은 시간이 많이 소요되고 반복적인 작업이다.이 과정은 효율적이지 못하며, 자동화를 통해 개선할 필요가 있다고 생각되었다.초기 목표는 Figma API를 활용하여 디자인 토큰을 추출하고, 이를 바탕으로 React 코드를 자동 생성하는 것이었다. 그러나 여러 기술적 한계로 인해 완벽한 자동화에 실패하였다.특히, Figma의 디자인을 AI를 사용하지 않고 완벽하게 React 코드로 재현하는 것은 몇일간 테스트한 결과 한계가 있는듯 보인다. (더이상 시간투자 X)그래도 노가다 작업을 줄이기 위해서 작업 방향을 급선회 하여, Cursor에서 제공하는 규칙을 사용하여 Figma 디자인에서 React 컴포넌트로의 변환 시간을 단축시키는 방식으로 정리해 ..

  Read More
• Figma 단축키

  Tool/Figma 2024. 10. 31. 10:07

  단축키단축키 패널 보기 (공식 사이트 - 단축키)Mac: ^Control + Shift + ?Windows: Ctrl + Shift + ? 자주사용하는 단축키구분단축키설명개발자/디자인 모드shift + d2024년 1월부터 유료화, 디자인의 세부 사항을 정밀하게 볼 수 있고, 이를 통해 디자인을 정확히 이해하고 코드로 변환하는데 도움이 되는 모드

  Read More
• 디자인 시스템 & 스토리북 & 피그마란?

  Project/Figma+Storybook 2023. 10. 25. 17:16

  제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..

  Read More