Всем привет, на связи Артём. Сегодня поделюсь реально полезной фишкой, которую сам использую, когда нужно быстро «вытащить» дизайн с любого понравившегося сайта в Figma.
Иногда попадается крутой сайт: дизайн, анимация, структура — всё цепляет. И ты такой: «Вот бы сделать что-то похожее». Но с нуля повторить такое сложно — нужно понять, как устроена сетка, какие шрифты используются, откуда изображения и т.д.
Раньше я просто делал скриншоты и вручную воссоздавал страницы в Фигме. Это занимало кучу времени. Сейчас всё стало проще — появились плагины, которые позволяют в один клик перенести любой сайт в макет Figma. Делюсь, как это сделать.
Зачем это вообще нужно?
Во-первых, для вдохновения и обучения. Когда ты новичок в веб-дизайне, ты учишься, повторяя за другими. Это нормально. Смотришь, как кто-то сделал сайт, вытаскиваешь в Figma, изучаешь, как расставлены блоки, какие отступы, какие цвета.
Во-вторых, это полезно, когда теряешь исходники своего проекта. Бывает — сайт залили на хостинг, макет удалился или потерялся. А теперь нужно внести правки. Вместо того, чтобы делать всё заново — просто загружаешь сайт в Figma через плагин и продолжаешь работу.
В-третьих, это помогает анализировать конкурентов. Вы можете взять любой лендинг, который в топе, и посмотреть, как он устроен внутри: какая сетка, какие визуальные акценты, какая структура блоков и текста.
Какие плагины использовать?
Сейчас есть два плагина, которыми я лично пользовался:
- html.to.design
- Web to Figma
Они работают по одному принципу — ты вставляешь ссылку на сайт, а плагин сам «вытаскивает» оттуда структуру и элементы прямо в Figma. Не всё идеально, но 70–80% работы за тебя уже сделано.
html.to.design — мощный и простой
Это, пожалуй, один из самых популярных плагинов. Есть бесплатная и платная версия. Нам хватит бесплатной, чтобы понять, как работает.
Как пользоваться:
- Открываешь Figma.
- Создаёшь новый файл.
- Нажимаешь
Plugins > html.to.design. - Вводишь ссылку на сайт.
- Жмёшь “Import” или «Run» и ждёшь — обычно 10–30 секунд.
После этого плагин создаёт артборд, где вся страница уже разложена на слои: заголовки, кнопки, изображения, контейнеры. Можно двигать, редактировать, менять цвета.
💡 Важно: плагин не всегда вытягивает все шрифты и может заменить их на стандартные. Но это легко поправить — просто установить нужный шрифт вручную.
Web to Figma — альтернатива с интересной фишкой
Этот плагин тоже хорош. Интерфейс попроще, но работает стабильно. Иногда даже точнее передаёт верстку, чем html.to.design.
Как использовать:
- Тоже открываешь новый проект в Figma.
- Устанавливаешь плагин Web to Figma.
- Вставляешь ссылку.
- Выбираешь, какую часть страницы загрузить — можно загрузить только «герой-блок» или конкретный элемент, не весь сайт.
Это удобно, если тебе нужна только часть страницы — например, блок с отзывами или футер.
Минусы и ограничения
Чтобы не было завышенных ожиданий — да, у этой фишки есть минусы:
- Некоторые сайты защищены от копирования — плагин может просто не «подтянуть» их.
- Анимации и интерактивные элементы (меню, попапы, слайдеры) не сохраняются. Только статичная верстка.
- Иногда элементы загружаются как картинки, а не как редактируемые блоки.
- Шрифты могут отображаться неправильно — их придётся выставлять вручную.
Но несмотря на это, инструмент экономит массу времени и отлично подходит для разборов чужих сайтов.
Мой способ: как я с этим работаю
Если нужно сделать сайт по референсу, я сначала:
- Нахожу сайт, который нравится.
- Загружаю его в Figma через html.to.design.
- Изучаю структуру: отступы, типографику, цветовые акценты.
- Делаю свою сетку, свои стили, но на основе логики, которую подсмотрел.
Таким образом я не копирую, а учусь и адаптирую — вырабатываю вкус, начинаю лучше понимать, почему тот или иной блок выглядит именно так.
Как установить плагины?
Всё просто:
- Заходите в Figma (браузер или десктоп).
- Внизу есть блок с инструментами и справа в меню находите нажимаете на Actions —
Plugins > Browse plugins in community. - В поиске вводите
html.to.designилиWeb to Figma. - Жмёте “Install”, или «Run».
После установки они появятся в разделе Plugins при правом клике на холст.
Вот видеоинструкция как всё правильно сделать. Смотреть на YouTube
Подводим итог
Если вы дизайнер, разработчик, или просто любите копаться в сайтах — умение вытаскивать чужие страницы в Figma — это must-have навык. Особенно если вы работаете с лендингами, фрилансом или просто вдохновляетесь дизайнами.
Эти плагины экономят время, дают пищу для размышлений, обучают структуре, а главное — помогают расти. Так что не ленитесь, пробуйте, экспериментируйте.
Если статья была полезна — поддержите лайком, оставьте комментарий, поделитесь своими мыслями. Буду рад общению и вопросам 🙌
С вами был Артём. До связи!
Присоединяйтесь в:
