Figma 와 함께 Grida 시작하기

Grida 는 오픈소스 Design2Code 툴킷입니다. Grida 를 사용해 통합된 디자인/코드 환경을 구축하고, UI 구현을 자동화 할수있습니다.

디자인과 개발 사이의 갭이 없도록 Grida 와 함께 개발하는 방법을 알아보겠습니다.

디자인 임포트 하기

시작하기 앞서, 먼저 준비된 디자인이 필요합니다. 사용하실 디자인이 없다면, 이 파일 을 복사 하여 사용하세요 ("Diplicate" 버튼을 누르시면 됩니다).

옵션 1. 플러그인을 통한 사용

Grida 에서 최초로 디자인을 읽어오는 방법은 2가지가 있습니다.

첫째는 “Assistant” 플러그인을 통해 피그마 앱/웹 에서 디자인을 읽어오는 방법입니다. (이곳에서 설치할수 있습니다). 설치후, 피그마에서 원허시는 디자인 파일을 열고, 메뉴 -> Plugins -> Assistant by Grida 를 눌러 실행 시켜주세요.

플러그인을 실행할수 없나요? - 피그마는 해당 파일에서 플러그인을 실행시키고자 할때, "쓰기 권한"이 있는 계정만 가능하도록 되어있습니다. 계정 관리자에게 쓰기 권한을 요청하거나, 해당 파일을 Copy 하여서 자신의 계정 Drafts 에서 실행 할수 있도록 하면 됩니다.

After you run the plugin, select the design you want to import, and press Next. Signin required on this step.

---

옵션 2. Grida 사이트에서 바로 임포트 하기

두번째 방법은 Grida 에서 바로 디자인을 불러오는 것 입니다. 먼저 grida.co 를 방문해 주세요.

Figma design url 를 입력하는 인풋이 있습니다. 그곳에 여러분의 디자인 Url 을 입력하면 됩니다. (이후, 피그마 계정 인증이 요구됩니다)

디자인이 불러와 지지 않나요? 피그마 계정 인증에 사용한 계정이 불러오고자 하는 파일에 권한이 있는지 확인해주세요. 해당 계정으로 볼수 있는 파일이여도, 해당 계정으로 불러올수 없는 파일일수 있습니다.

축하드립니다. 여러분의 첫번째 디자인을 임포트 했어요. 추후에도, 동일한 방법으로 신규 디자인을 임포트 할수 있습니다.

다음 - 퀄리티 높이기

생성된 결과물에 만족하시나요? 아마 아닐것입니다. 아웃풋의 품질을 높이고, 유지 가능한 디자인-코드 환경을 유지하려면, 우선 디자인의 품질을 높여햐 합니다. 다음에는 디자인의 품질을 높이고, 원하는 품질의 결과물을 얻는방법에 대해 알아봅니다.