Из Figma на сайт: как экспортировать макеты в LF Drive и обновлять результат

Баннер согласован, но через час клиент присылает новую цену. Затем меняется дата, а потом — фотография. Если каждый раз скачивать экспорт, загружать его в облако и отправлять новую ссылку, простая правка превращается в отдельную задачу. Связка Figma и LF Drive сокращает этот маршрут.

Что именно отправляется из Figma

Плагин экспортирует выбранные элементы в PNG, JPG или PDF и загружает результат в LF Drive. Это не синхронизация исходного .fig-файла и не публикация сайта из макета. В хранилище оказывается готовое изображение или документ, который можно разместить по ссылке или передать заказчику.

PNG удобен для графики с прозрачностью, JPG — для фотографий и баннеров без прозрачного фона, PDF — для презентации или документа. Для растрового экспорта выберите масштаб под реальный размер показа; для JPG проверьте качество. Избыточный масштаб увеличит вес, но не исправит нечитаемый мелкий текст в самом макете.

Первое подключение

1. Откройте «Интеграции → Figma» в LF Drive и выполните актуальную инструкцию установки.
2. Создайте отдельный токен Figma и подключите его в плагине. Убедитесь, что указан нужный аккаунт: файл попадёт именно в его хранилище.
3. Выделите один готовый фрейм, выберите формат и параметры. При доступности проектов укажите проект задачи.
4. Выполните экспорт, дождитесь результата и откройте полученную ссылку вне Figma.
5. Проверьте размеры, читаемость, прозрачность и отсутствие служебных деталей: заметок, направляющих, тестовых цен.

Для первого запуска достаточно одного элемента. Когда маршрут проверен, можно отправлять несколько выбранных элементов. При частичной ошибке сначала посмотрите результат по каждому файлу: повтор всей пачки в режиме создания новых объектов способен добавить ненужные копии.

Создать новый файл или обновить существующий

Эти действия похожи только внешне. Новый экспорт создаёт самостоятельный объект с новым адресом. Повторное обновление использует сохранённую привязку элемента Figma к файлу LF Drive. Так можно изменить содержимое уже размещённого баннера, не обходя каждую страницу сайта.

Для обновления нужны подходящий действующий платный тариф и сохранённая привязка. Бесплатный аккаунт не получает право на замену только потому, что запрос пришёл из плагина. Формат связанного файла должен совпадать: если нужен другой тип результата, создайте отдельный файл и осознанно замените адрес в месте публикации.

Пример: комплект баннеров для акции

Представим магазин с баннером на главной странице и иллюстрацией в статье. Дизайнер готовит два фрейма, экспортирует их в LF Drive, а редактор один раз размещает ссылки. Для WordPress можно выбрать эти же файлы через плагин LF Drive; на другом сайте — вставить адреса штатным способом.

При следующем согласовании дизайнер меняет дату и повторно обновляет привязанные файлы. После экспорта редактор открывает опубликованные страницы и сверяет новую дату. Если тема использует отдельную локальную копию изображения, само обновление LF Drive её не заменит: сначала нужно убедиться, что страница действительно обращается к внешнему файлу.

Пример: презентация для согласования

Для PDF удобно разделить адрес для согласования и окончательную передачу. На этапе правок один рабочий файл обновляется по постоянной ссылке. Когда версия утверждена, зафиксируйте результат: сохраните финальный экспорт отдельно, если важно исключить дальнейшее незаметное изменение уже принятой работы.

История версий помогает вернуть ошибочное обновление в пределах правил хранения тарифа. Она не заменяет резервный исходник Figma. Также не стоит считать продаваемый PDF автоматически обновляемой подпиской: доступ покупателей может быть связан со снимком заказа, а не с любым последующим экспортом автора.

Три договорённости внутри команды

• Кто публикует. Назначьте человека, который делает финальный экспорт. Иначе черновик легко попадёт по уже размещённой публичной ссылке.
• Как называются элементы. «Летняя акция — главный баннер» понятнее, чем Frame 482. Название должно помогать выбрать правильную привязку.
• Как проверяется результат. Утверждение макета и проверка опубликованного файла — разные шаги. Проверяйте оба.

Если сайт показывает старую картинку

Сначала откройте файл по ссылке из LF Drive и сравните с экспортом. Затем проверьте страницу в браузере, где уже открывалась старая версия. Если адрес верный, но содержимое различается, причина может быть в кэше браузера, сайта или CDN. Плагин Figma не управляет этими внешними кэшами.

Хороший результат этой связки — не «файл отправился», а новая согласованная версия появилась именно там, где её должен увидеть посетитель. Добавьте эту проверку в обычный процесс сдачи работы.