brunch

You can make anything
by writing

C.S.Lewis

by 인사라 Nov 01. 2024

스크린샷 피그마 파일로 전환하는 무료 AI 플러그인

Codia AI 피그마 플러그인


스크린샷 디자인파일 전환 피그마 AI 플러그인


Codia.ai란?


Codia는 디자인 작업을 더 효율적으로 만들어주는 다양한 플러그인 세트를 제공하는 툴이다. 특히 디자인을 코드로 변환하거나 레이어 분할을 돕는 기능들이 있어 생산성을 높이는 데 유용하다. 오늘은 그중에서 스크린샷을 피그마 파일로 변환해주는 플러그인을 써봤다.


스크린샷 디자인파일 전환 피그마 AI 플러그인


Codia AI Design 시작하기


플러그인을 실행하고 로그인하면 작업 인터페이스가 뜬다. 이때, 피그마 내부에서 이미지를 바로 선택해도 되고, 외부에서 파일을 드래그 앤 드롭해도 된다. 편리한 점은 작업 환경에 따라 파일을 자유롭게 가져올 수 있다는 것.


스크린샷 디자인파일 전환 피그마 AI 플러그인


무료 버전은 이미지 사이즈 제한 있음 주의


무료 버전에는 1440x1440 이하의 이미지만 변환이 가능하다. 일반적인 스크린샷을 그대로 가져오면 사이즈 제한으로 인해 막히는 경우가 많아 이미지 크기를 줄여야 한다. 스크린샷 이미지 바로 넣고 결제해야하나 오해하기 쉬우니 주의하는게 좋다. 사이즈만 맞춘다면 누구나 무료로 사용 가능하니 큰 제약은 아니다.


스크린샷 디자인파일 전환 피그마 AI 플러그인


<to Figma> 버튼 클릭


이미지가 준비되면 화면에서 “to Figma” 버튼을 클릭한다. 버튼을 누르는 순간 피그마 디자인 화면에 실시간으로 UI가 채워지기 시작하는데, 작업물이 하나씩 레이어로 정리되어 피그마에 나타나는 모습을 볼 수 있다. 결과물을 바로 편집 가능한 형태로 변환해 주는 과정이 상당히 신기하고 직관적이다.


스크린샷 디자인파일 전환 피그마 AI 플러그인


최종 결과


이렇게 변환된 피그마 파일은 레이어가 나뉘어 있어 자유롭게 편집이 가능하다. 버튼, 텍스트 등 UI 요소들이 레이어 단위로 쌓여 있어 수정이 필요할 때 유용하다. 오토레이아웃까지 다해주진 않지만 그래도 빠른 프로토타입 작업에는 충분히 쓸 만한 툴이다.


스크린샷 디자인파일 전환 피그마 AI 플러그인



실제로 요즘IT에서 Codia 피그마 플러그인을 활용해 인스타그램 리디자인을 진행한 사례가 있다. 관심있으신 분은 아래 관련 링크 확인해보시길 바란다.



<관련 링크>

https://brunch.co.kr/@intersarah/1

https://codia.ai/

                    

작가의 이전글 디지털 디자인 규칙 8pt 그리드시스템 진화중?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari