Моя жена — дизайнер, и недавно она столкнулась с проблемой при работе над новым проектом: у команды не было дизайн-системы. Первое, что приходило в голову, — это долго и муторно вручную переносить весь существующий сайт в Figma. Однако её разработчики порекомендовали отличный плагин — html.to.design. Но и тут возникла загвоздка: на один аккаунт можно было скопировать всего 5 страниц. Для постоянной работы это неудобно, а выбивать бюджеты на платную версию достаточно сложно. Пришлось создавать новые аккаунты, что тоже не самое лучшее решение.
Жена предложила идею сделать подобный плагин как пет-проект, на котором можно заработать. Я решил изучить эту тему и выяснил, что аналогов действительно нет. Есть множество плагинов для переноса из Figma в код или разметку (например, в JSX), но обратного процесса нет. Я решил разобраться, как можно реализовать своё решение.
Выяснилось, что это не так просто. Во-первых, нужно правильно парсить не только HTML, но и CSS, чтобы потом всё это совместить, учитывая разные разрешения экранов. Затем нужно отрисовать это в Figma через api плагина — задача не одного вечера.
Покопавшись в плагинах от издателя html.to.design, я обнаружил, что у них есть плагин code.to.design. С его помощью можно html импортировать в Figma. При этом у нас будет не 5 попыток на аккаунт, а целых 100! Если вы дочитали до этого места, то, вероятно, вас это заинтересовало, и вам не хватает лимита в 5 страниц.
Небольшая вставочка: вначале я хотел сделать мини-сервис для скачивания сайтов, но для этого пришлось бы сделать чуть больше телодвижений, чем просто написать небольшой UI и развернуть на vercel.com. Если это будет востребовано, дайте знать — я подсуечусь и, конечно, сделаю!
Как воспользоваться code.to.design без знания кода
Предлагаю пошаговую инструкцию:
- Скачиваем страницу сайта одним файлом
Вам нужно скачать страницу сайта в виде одного HTML-файла, который содержит разметку, стили и скрипты. Для этого лучше всего воспользоваться расширением SingleFile.
Установка SingleFile:
- Нажмите кнопку «Установить» или аналогичную в вашем браузере.
- Подтвердите установку расширения.
После установки:
- Найдите иконку SingleFile на панели инструментов (обычно в правом верхнем углу).
- Если её нет, включите через «Настройки -> Расширения».
Скачивание страницы:
- Зайдите на нужный вам сайт.
- Нажмите на иконку SingleFile.
- Расширение скачает страницу одним файлом.
Ура! Самое сложное позади. 🎉🎉🎉
2. Импортируем страницу в Figma через code.to.design
- Установите плагин code.to.design в Figma.
- Запустите плагин и вставьте содержимое скачанного HTML-файла.
- Получение токена: Зайдите на сайт code.to.design.
Авторизуйтесь (можно через Google).
В разделе Authentication скопируйте ваш ключ. - Вставьте токен в плагин.
- Экспортируйте HTML в Figma.
Заключение
Этот способ может показаться чуть более сложным, но он значительно экономит время по сравнению с созданием новых аккаунтов или ручным переносом. Надеюсь, эта информация была вам полезна!