Загрузите предварительно настроенный файл Figma
Начнем с создания компонента в Figma. В этом уроке мы будем использовать существующий файл Figma в качестве примера. Этот файл содержит фрейм авторазметки с изображением и заголовком. Убедитесь, что вы вошли в свою учетную запись Figma.
- Загрузите этот файл Figma на свой компьютер: HelloFigma.fig .
В файловом браузере Figma наведите указатель мыши на «Черновики» . Появится значок + . Нажмите + , затем «Импортировать… » и выберите только что скачанный файл HelloFigma.fig .
Откройте импортированный файл в Figma.
Создать компонент
Чтобы использовать импортированный дизайн с плагином Relay for Figma, нам сначала нужно преобразовать его в компонент. Выберите рамку Hello Card и на панели инструментов нажмите «Создать компонент» .
Создать пакет пользовательского интерфейса
Плагин Relay for Figma добавляет к компоненту дополнительную информацию, чтобы вы могли работать с разработчиками, которые могут использовать этот компонент в своем коде.
Откройте плагин Relay for Figma в своем файле (в меню Figma: Плагины > Relay for Figma ). Нажмите «Начать» .
Выберите компонент и нажмите «Создать пакет пользовательского интерфейса» .
Выбрав пакет пользовательского интерфейса, добавьте описание в сводку . Например: «Компонент Hello Card, используемый для отображения изображения и содержимого заголовка».
Нажмите «Поделиться с разработчиком» в правом нижнем углу диалогового окна, чтобы перейти к следующему экрану.
Поделиться с разработчиком
Теперь, когда вы создали пакет пользовательского интерфейса, подготовьте свой компонент, чтобы поделиться им с командой разработчиков.
Создайте новую именованную версию файла компонента. Использование именованных версий компонента предотвращает влияние нежелательных изменений на рабочие компоненты.
Введите имя и описание для этой первой версии компонента, затем нажмите «Сохранить» .
Затем создайте ссылку на общий компонент и скопируйте ее в буфер обмена, набрав CMD-L на Mac или CTRL-L на Windows.
Следующий шаг
Теперь вы готовы передать свой компонент пользовательского интерфейса в Android Studio.
Откройте студию Android, чтобы завершить следующую часть этого руководства.
Преобразование проектов в код в Android Studio