figma-to-flutter-skill은(는) 무엇을 하나요?
Figma 프레임을 Flutter로 변환하고 디자인 시스템 감사 및 아키텍처/레이아웃/성능 최적화 작업을 제공하는 Codex 스킬입니다.
개요
이 스킬은 Figma에서 디자인된 UI 프레임을 가져와 Flutter 위젯 코드로 변환합니다. 변환 과정에서 디자인 시스템 일관성을 감사하고, 아키텍처 개선, 레이아웃 최적화, 성능 향상을 위한 권장 사항을 함께 제공합니다.
주요 기능
- Figma → Flutter 변환: Figma 프레임을 자동으로 Flutter 위젯 트리로 변환합니다.
- 디자인 시스템 감사: 색상, 글꼴, 간격 등 디자인 토큰의 일관성을 검사합니다.
- 아키텍처 작업: 변환된 코드에 대한 아키텍처 패턴 (예: BLoC, Provider) 제안.
- 레이아웃 최적화: 반응형 및 적응형 레이아웃을 위한 제안.
- 성능 최적화: 불필요한 리빌드 방지, 위젯 분할 등 성능 개선 팁.
사용 방법
- Figma에서 변환할 프레임을 선택합니다.
- 스킬을 실행하여 프레임을 가져옵니다.
- 생성된 Flutter 코드를 검토하고 프로젝트에 통합합니다.
- 디자인 시스템 감사 결과를 확인하고 일관성을 유지합니다.
지원 플랫폼
- Codex
참고 사항
- 변환된 코드는 기본적인 Flutter 프로젝트 구조를 따릅니다.
- 디자인 시스템 감사는 미리 정의된 규칙을 기반으로 수행됩니다.
- 성능 최적화 제안은 일반적인 Flutter 모범 사례를 따릅니다.
예시
// 변환된 Flutter 위젯 예시
class MyFigmaScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Figma 변환 화면')),
body: Center(child: Text('Hello from Figma!')),
);
}
}
라이선스
MIT