Создание и распространение обновлений дизайна

В этом разделе вы узнаете, как изменить компонент в Figma (в данном случае изменить форматирование текста) и увидите, как изменения распространяются на базу кода в Android Studio, опираясь на ваш предыдущий проект.

Изменения в Фигме

Давайте обновим компонент Figma. Вернитесь в файл Figma:

1. Выберите текстовый слой «Заголовок» . В разделе «Текст» измените стиль на «Жирный» .

   

Сохранить названную версию

Теперь интегрируйте обновленный компонент в свою кодовую базу. Чтобы разработчики использовали новую версию вашего компонента, повторите действия по сохранению версии.

1. Откройте плагин Figma Relay, если он еще не открыт.

2. Нажмите «Поделиться с разработчиком» .

   

3. На экране «Поделиться с разработчиком» вы можете ввести новое имя и описание версии в разделе «Сохранить историю версий» .

   

4. Введите CMD-L на Mac или CTRL-L на клавиатуре Windows, чтобы скопировать новую ссылку в буфер обмена.

Обновите код компонента

Давайте теперь повторно импортируем компонент:

1. В Android Studio убедитесь, что окно инструмента «Проект» находится в представлении Android . Затем щелкните правой кнопкой мыши app/ui-packages/hello_card/ и выберите «Обновить пакет пользовательского интерфейса» .

   

   Подождите, пока полоса загрузки в правом нижнем углу завершится:

   

2. Нажмите для создания своего проекта и просмотрите обновленный компонент в предварительном просмотре app/java/com/example/hellofigma/MainActivity.kt . Обратите внимание, что текст теперь выделен жирным шрифтом.

   

   

3. Запустите приложение, чтобы просмотреть те же обновления в эмуляторе.

   

   

Следующий шаг

Теперь, когда мы обновили дизайн и увидели, как также обновляется результирующий код, мы можем обратить внимание на аннотирование нашего дизайна параметрами контента, которые позволяют использовать переменные данные в наших компонентах.