티스토리 뷰
오늘은 Anima 플러그인을 이용하여 Figma 디자인을 Tailwind css로 자동 변환하는 법을 설명하려고 한다.
https://www.animaapp.com/figma
Figma to Code - Export React, HTML & Vue from any Figma design
Create responsive prototypes, export HTML & CSS, React or Vue, or publish live websites from your design. Use Anima for Figma for free!
www.animaapp.com
사용법
준비물 : 디자인이 된 피그마
1. 피그마 하단의 플러그인 아이콘 클릭
2. plugins&widgets 탭에서 Anima 검색, Run
3. 로그인하라는 창이 뜨는데 Anima 로그인
4. switch 아이콘 클릭
5. 변환하고 싶은 프레임 클릭, 본인이 사용하는 프레임워크/라이브러리, css도구 설정해주면 코드가 뜬다.
6. 복사해서 사용!
'프론트엔드 > 개발' 카테고리의 다른 글
| 배포 브랜치와 디버깅 브랜치 따로 만들기 (0) | 2025.04.07 |
|---|---|
| Zustand를 꼭 써야 하는가? (0) | 2024.10.15 |
| Next.js에서의 서버 사이드 캐싱과 클라이언트 사이드 캐싱 (0) | 2024.09.30 |
| Hydration에 대하여 (0) | 2024.09.26 |