Назад

Захват сайта в Figma

Пошаговое руководство.

1

Установить расширение

Перейдите в Chrome Web Store, 'Добавить в Chrome'.

2

Захватить страницу

  1. На страницу.
  2. Иконка PixelSync.
  3. 'Захватить'.
  4. Скопировано.
💡Сначала прокрутите.
3

Выбрать элемент

'Выбрать элемент':

  1. Иконка.
  2. 'Выбрать'.
  3. Нажмите.
💡Для компонентов.
4

Вставить в Figma

Figma, ⌘V (Ctrl+V).

Без плагина.

5

AI-дизайны ⭐ Рекомендуемое

Быстрейший способ. Любая страница.

Claude

Artifacts из браузера.

ChatGPT

Canvas, HTML/CSS.

v0

Страницы v0.

Bolt

Приложения Bolt.

Lovable

Страницы Lovable.

💡Итерация дизайна.
6

Умная очистка

Включите очистку.

💡Для вложенного HTML.
7

За логином

Захватывает всё — и авторизованные.

Данные не покидают устройство.

8

Мобильные

Текущий viewport. Для мобильных:

  1. DevTools (F12).
  2. Ширина (375px).
  3. Перезагрузить.
  4. Захватить.
9

Тёмная/светлая

Текущий prefers-color-scheme:

  1. Захватить.
  2. Переключить.
  3. Перезагрузить.
10

Советы

  • Прокрутите.
  • Выбор элемента.
  • Очистка.
  • Font-family.
  • CSS упрощается.
  • Кросс-origin.
  • Точка старта.
  • Без авто-прокрутки.

Готовы?

Бесплатно — 15/мес.

Установить бесплатно