Pixelay Development Comparison

Плагин Pixelay Development Comparison позволяет сравнить проекты Figma с вашими локальными веб-разработками, используя наложения браузера (т.н. Pixel Perfect).

Характеристики

• Сравните несколько дизайнов Figma и URL-адресов одновременно.
• Не требуется учетных записей пользователей, расширений браузера или приложений.
• Наложения: прозрачный, разделенный экран, переключение, перетаскивание и изменение.
• При желании можно указать разные URL-адреса страниц веб-сайта для каждого фрейма Figma.
• Поддерживает localhost с помощью BrowerSync или Hot Module Reloading.
• Встроенная пиксельная линейка для измерения пространственных различий в сравнениях.
• Легко перезапустить прямо с боковой панели Figma в ваших проектах.
• Получайте идеальные веб-сборки, которые всегда соответствуют вашим дизайнам Figma.

Как пользоваться

1. Установите Pixelay и запустите плагин внутри вашего проекта.
2. Выберите фреймы, которые хотите сравнить с вашим сайтом.
3. Вставьте URL-адрес, с которым хотите сравнить ваши фреймы.
4. При желании добавьте разные URL-адреса страниц веб-сайта для каждого фрейма.
5. Нажмите кнопку «Сравнить дизайны».
6. Нажмите на ссылку, чтобы сравнить внутри вашего браузера.

ВАЖНО: Pixelay использует iFrames, чтобы можно было сравнивать несколько URL-адресов одновременно; поэтому убедитесь, что URL-адреса, которые вы пытаетесь сравнить, не содержат никаких блокировщиков (например, «политика одного и того же источника»), которые будут препятствовать их загрузке в iFrame за пределами собственного домена веб-сайта (что происходит, если вы попробуйте загрузить https://google.com, например). Это не проблема для локальных сред разработки (например, http: // localhost: 3000) или серверов разработки, которыми вы управляете для своих собственных веб-сайтов.

Если CSS вашего сайта использует единицы «vh» для каких-либо элементов, имейте в виду, что они могут казаться намного выше, чем обычно при резонирующей высоте браузера, поскольку Pixelay устанавливает высоту области просмотра так же, как ваш полный макет Figma.

Если вы добавляете / удаляете какие-либо кадры в Figma во время работы Pixelay, вы можете щелкнуть значок «Обновить» в правом верхнем углу плагина Pixelay Figma, чтобы обновить список доступных кадров для сравнения.

Лицензия

После того, как вы попробовали сравнить проекты Figma с Pixelay 10 раз, вам будет предложено ввести лицензионный ключ. Ваш лицензионный ключ позволит вам или вашей команде сравнивать неограниченное количество дизайнов Figma с помощью Pixelay.

Чтобы приобрести лицензию или узнать больше, посетите https://figmaticapp.com/pixelay