Идея нового инструмента в Figma

Интерактивный прототип и иллюстрированное описание инструмента Breakpoints, который можно было бы воплотить в Figma.

В закладки
Аудио

Всем привет, это моя первая статья и как сказал один чувак: “к счастью не уголовная”. Поэтому надеюсь на ваше понимание.
В ней я хочу вам рассказать о потенциально новом функционале который мог бы вывести работу в фигме на новый уровень.

Предисловие

Работая в фигме над большим проектом, мне в голову начали приходить идеи потенциальных функций и инструментов которые можно было бы добавить в фигму.

И одной из таких идей был инструмент Breakpoints.
Согласитесь, было бы неплохо если бы в фигме можно было создавать не просто резиновый дизайн а адаптивный! Чтобы изменяя ширину страницы дизайн адаптировался под новые размеры.

Так мы могли бы более тщательно протестировать все адаптации еще на этапе дизайна, а верстальщику было бы удобней видеть в реальном времени как изменяется тот или иной элемент дизайна в зависимости от ширины сайта. Да и клиенты могли бы сразу видеть как будет выглядеть их сайт не зависимо с какого устройства они открыли вашу ссылку.

Что такое брейкпоинты?

Брейкпоинты это контрольные точки проходя через которые дизайн сайта изменяется и адаптируется под новые условия.

Схема работы брейкпоинтов

У нас есть три дизайна страницы сайта:
Дизайн №1 - отображается на экранах от 400 px до 500 px по ширине.
Дизайн №2 - отображается на экранах от 500 px до 800 px по ширине.
Дизайн №3 - отображается на экранах от 800 px до 1000 px по ширине.

Вот эти переходы от одного диапазона к другому и есть прохождение через контрольные точки.
Для наглядности откройте сайт medium.com и уменьшая/увеличивая ширину браузера вы сможете наблюдать изменения расположения блоков на странице сайта.

Брейкпоинты в других программах

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

Как это будет выглядеть в итоге?

Перед тем как перейти к подробному описанию инструмента я хотел бы показать как это могло бы выглядеть в итоге.
Давайте представим что мы уже открыли фигму, создали три дизайна страницы, 960, 740 и 480 пикселей по ширине, потом всё настроили, создали брейкпоинты и перешли в режим просмотра.

На видео видно как при изменении ширины сайта, дизайн страницы адаптируется под новые размеры.
Подробнее об интерфейсе и принципе работы инструмента будет описано далее.

Независимо от настоящего значения слова “брейкпоинт” в статье я буду ему придавать немного другое значение (не спрашивайте почему).
В статье я называю брейкпоинтом пакет фреймов разного размера. Хотя правильно было бы называть брейкпоинтами сами фреймы.

Принцип работы нового инструмента и его интерфейс

На картинке ниже вы видите как выглядит проект с одним созданным брейкпоинтом “Homepage” в который мы добавили три фрейма “Homepage 960”, “Homepage 740”, “Homepage 480”.
Слева панель “Breakpoints” со списком брейкпоинтов и фреймов которые они содержат.
А в центре на холсте отображаются фреймы добавленные в тот или иной брейкпоинт.

Прежде чем перейти к подробному описанию интерфейса и принципов работы инструмента, я хочу вам показать интерактивный прототип в котором мы рассматриваем сценарий создания и настройки брейкпоинта. Пройдите сценарий от начала до конца чтоб лучше понимать о чем в дальнейшем пойдет речь.

Давайте представим что мы уже нарисовали дизайн главной страницы сайта в трех размерах 960px, 740px, 480px и для удобства поместили каждый размер на отдельную страницу (Pages) на панели слои.
С этого и начнем:

P.S. естественно при реальной работе с брейкпоинтами нам не придется так долго настраивать параметр “breakpoint width” у каждого фрейма, достаточно лишь раз создать стиль настроек, выбрать все фреймы к которым мы хотим добавить этот стиль и применить его.
В прототипе я специально показал работу инструмента максимально подробно.

Подробное описание элементов интерфейса

1 Вкладка “Брейкпоинты”

Новая вкладка при нажатии на которую открывается панель с брейкпоинтами. По аналогии с панелью “слои”.

2 “Добавить брейкпоинт”

Нажимая на “+” мы создаем брейкпоинт (в примере “Homepage”) в который мы будем добавлять фреймы разного размера.
Структура панели “брейкпоинты” аналогична панели “Слои”.
Сначала мы создаем страницы/брейкпоинты, а потом выбрав нужную страницу/брейкпоинт создаем в ней фреймы.
В случае со вкладкой “брейкпоинты” мы фрейм не создаем а добавляем уже ранее созданный из панели “слои”.

3 “Свернуть брейкпоинты”

При нажатии на стрелку, список брейкпоинтов скрывается по аналогии со списком страниц на панели “слои”.
На левой картинке список брейкпоинтов развернут а на правой свернут.
В данном случае у нас только один брейкпоинт “Homepage”.

4 “Брейкпоинт”

Тут отображается список брейкпоинтов которые мы создали.
В данном случае у нас только один брейкпоинт “Homepage”.

5 “Добавить фрейм”

Нажимая на “+” открывается панель “слои” для выбора фрейма или нескольких фреймов которые нужно добавить в брейкпоинт.

6 “Фреймы”

Фреймы которые мы добавили в брейкпоинт “Homepage”.
Во вкладке “брейкпоинты” так же как и во вкладке “слои” можно раскрыть фрейм для просмотра содержимых слоев и для работы с ними.
Благодаря этому дизайнер может переходить во вкладку “брейкпоинты” и работать с отдельной страницей сайта всех размеров на одном холсте не отвлекаясь на другие страницы сайта, при этом не нарушая структуру расположения фреймов на панели “слои”.

7 “Иконка фрейма”

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

8 “Название брейкпоинта”

При создании брейкпоинта, автоматически присваивается имя: “breakpoint 1”, “breakpoint 2”, “breakpoint 3” и тд.
Брейкпоинт можно переименовать дважды кликнув по его имени.

9 “Убрать фрейм из брейкпоинта”

Чтобы убрать фрейм из брейкпоинта достаточно нажать на фрейм правой кнопкой мыши и выбрать “Remove frame”.

Брейкпоинты на панели инструментов

Вверху на панели инструментов есть иконка “брейкпоинты” по нажатию на которую выпадает список созданных брейкпоинтов и кнопка создания брейкпоинтов.
Далее подробнее:

10 “Создать брейкпоинт”

Создать брейкпоинт можно не заходя в панель“брейкпоинты”.
При нажатии на “New Breakpoint” создается новый брейкпоинт с присвоенным по умолчанию именем.

11 “Переименование брейкпоинта”

Чтобы переименовать брейкпоинт, нужно нажать на иконку которая появляется при наведении на брейкпоинт и ввести новое имя.

12 “Добавление фреймов в брейкпоинт”

Добавлять фреймы в брейкпоинт так же можно не заходя во вкладку “брейкпоинты”.
Находясь на панели “слои” можно выбрать нужный фрейм, открыть данное всплывающее окно на панели инструментов и выбрать брейкпоинт в который вы хотите добавить фрейм.
Слева показан брейкпоинт “Homepage” в который мы хотим добавить фрейм, а справа уже показано что фрейм добавлен в брейкпоинт.

Подробнее о настройках фреймов

Давайте подробнее рассмотрим как настраиваются фреймы которые мы будем добавлять в брейкпоинт.
Выбрав нужный фрейм, на правой панели мы можем добавить ему новый параметр “breakpoint width”.

13 “Создать настройку”

Нажимая на “+” создается настройка фрейма.

14 “Минимальная ширина”

Минимальная ширина до которой будет сжиматься фрейм.

15 “Максимальная ширина”

Максимальная ширина до которой будет растягиваться фрейм.

16 “Иконка фрейма”

Иконка которая будет отображаться рядом с названием фрейма на панели “Breakpoints”.

17 “Добавить стиль”

При нажатии на кнопку “Добавить стиль” открывается окно в котором можно выбрать ранее созданный стиль настроек.

18 “Редактировать стиль”

При нажатии на иконку открывается стандартное окно редактирования стиля в котором можно изменить все настройки стиля, изменить имя и добавить описание стиля.

Как влияют настройки фрейма

Давайте разберем примеры чтоб понимать за что отвечает каждая настройка параметра “breakpoint width”.
Картинка состоит из двух частей:
Слева - настройки фрейма.
Справа - за что отвечают настройки в режиме просмотра.
Оранжевым я показал рабочую ширину фрейма. Это та ширина которую мы задаём при создании фрейма.

Фрейм "Homepage 480"
Фрейм "Homepage 740"
Фрейм "Homepage 960"

Режим просмотра и подробное описание его интерфейса

Так выглядит режим просмотра, вы его уже видели в начале статьи в видео.
В новом режиме просмотра внизу появилась размерная шкала на которой отмечены границы фреймов и другие элементы управления о которых мы поговорим далее.
Так же я переместил кнопку “Restart” и кнопки переключения слайдов в углы.

Давайте разберем подробнее что нового в интерфейсе режима просмотра:

1,2,3 Магнит

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

Функция имеет три режима:
1) Выключено — можно свободно уменьшать и увеличивать ширину дизайна, бегунок не будет магнититься.
2) Включено — можно свободно уменьшать и увеличивать ширину дизайна но приближаясь к минимальной, максимальной и рабочей ширине фреймов - бегунок как бы магнитится к ним.
3) Усиленно — при уменьшении и увеличении ширины дизайна бегунок передвигается только по точкам минимальной, максимальной и рабочей ширине фреймов без промежуточных размеров.

Эта функция нужна чтобы было удобно переключатся между минимальной, максимальной и рабочей шириной фреймов.

4) Поле ввода

Поле для точного ввода ширины дизайна. Если вы хотите посмотреть дизайн в определенной ширине, то гораздо легче ввести значение в поле чем вручную передвигать бегунок по шкале.

5) Бегунок

Работает как индикатор текущей ширины дизайна а так же как слайдер потянув за который можно уменьшить или увеличить ширину дизайна.

6) Уменьшить

Уменьшает размерную шкалу по ширине, на случай если не все брейкпоинты помещаются на экране.

7) Увеличить

Увеличивает размерную шкалу по ширине, на случай если нужно более точно протестировать отдельный брейкпоинт.

8) Маркер

Маркер для уменьшения или увеличения ширины дизайна.

Теперь прочитав статью и поняв как работает инструмент можно еще раз посмотреть демонстрацию работы инструмента:

Конец

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

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

Например когда я разрабатывал этот инструмент мне пришлось его 3 раза переделать с нуля, и 2 раза переписать статью, так как в процессе разработки я вдруг понимал что инструмент становится слишком сложным, или начинает конфликтовать с другими функциями фигмы, или становится слишком ограниченным и бесполезным.
По этому не факт что и этот вариант идеален, но я старался.

У меня есть еще несколько идей для новых функций и инструментов фигмы, в том числе и по улучшению создания адаптивного дизайна в фигме, по этому если вам интересно — подписывайтесь, ну или не подписывайтесь.

P.S. в статье 57 раз упоминается слово “брейкпоинт” и 50 раз слово “фрейм” .

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Андрей Насонов", "author_type": "self", "tags": [], "comments": 48, "likes": 44, "favorites": 89, "is_advertisement": false, "subsite_label": "design", "id": 61413, "is_wide": false, "is_ugc": true, "date": "Sat, 30 Mar 2019 18:50:28 +0300", "is_special": false }
Объявление на vc.ru
Личный опыт
Почему вы читаете, как семиклассник?
Догадывались ли вы, что от вашей техники чтения в младших классах будут зависеть сегодняшние успехи в делах, бизнесе…
0
{ "id": 61413, "author_id": 268568, "diff_limit": 1000, "urls": {"diff":"\/comments\/61413\/get","add":"\/comments\/61413\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/61413"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
48 комментариев
Популярные
По порядку
Написать комментарий...
9

нет никаких гарантий что он когда нибудь появится в фигме

Эх, да нам даже не могут дать саморастягивающуюся кнопку (которая самостоятельно адаптирует свой размер под длину надписи), не говоря про прочие БАЗОВЫЕ css-фишки. Не только в фигме, а вообще. Так и продолжаем рисовать прямоугольники разными инструментами. Может, акшур когда-нибудь превратят в полноценный инструмент дизайна, вот тогда фигме со скетчем станет очень туго - в акшуре уже реализована условная логика, брейкпойнты, анимация, некоторые css-фишки и какая-никакая поддержка js, но high-fidelity дизайн в нём делать тяжело, и нет толкового developer hand off.

Ждём, любим, надеемся, конечно. Надеюсь в основном на то, что такой инструмент появится при моей жизни))

Ответить
1

то что ты говоришь про кнопки, в этом году появиться в Скетче

Ответить
1

Скетч тупиковая ветвь эволюции пока он остаётся в яблочном огороде =/

Ответить
5

очень странная логика

Ответить
0

В конце года появится в браузере

Ответить
0

Где про это почитать?

Ответить
0

Откуда инфа?

Ответить
–1

Ну да, не хватает этого, согласен. Но я думаю они не спроста тянут с такими функциями.
Я думаю что если взять какую то определенную функцию допустим "кнопку которая тянется в зависимости от текста" то ее не так уж сложно внедрить в фигму.
Сложно придумать целую систему, чтоб это был максимально гибкий инструмент и максимально простой в использовании.
То есть чтоб эта фишка работала не только с кнопкой а в целом как отдельная функция программы, да так чтоб чтоб она вписывалась в уже существующий функционал.

По поводу "саморастягивающейся кнопки" у меня уже есть идея как это можно осуществить. Как доделаю прототип напишу об этом статью.

Ответить
1

Насколько я знаю растягивающиеся кнопки у них в разработке сейчас. Еще в разработке более интересные вещи. Например стек. Это когда один растягивающийся объект толкает другой. Например хлебные крошки удобно будет реализовывать и еще кучу всего. Это уже даже в тестировании было. Один товарищ мне показывал как это работает

Ответить
1

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

Ответить
0

Сложно придумать целую систему

Оно понятно. Больше удивляет другое - то что вообще нет такого дизайн-инструмента. То есть, проблема отсутсвия "саморастягивающейся кнопки" - это как бы каноническая фундаментальная опухоль дизайн-инструментов. Мы делаем дизайн для веба и приложений средневековым способом, который почти не изменился. Грубо говоря - тот же фотошоп, только в профиль.

Ответить
1

phase.com

У них даже аргументы точь в точь как у вас :)

Ответить
1

Осталось только дождаться)

Ответить
0

подписался на ранний доступ, посмотрим что за зверь)

Ответить
0

На Mail Design Conference 2018 хорошо про него рассказали: https://youtu.be/dhHlaiD0NZc?t=19989

Ответить
0

Спасибо, изучу на досуге. Я вообще как только узнаю про новый инструмент - сразу на него подписываюсь, а потом уже разведываю инфу (раньше делал наоборот).

Ответить
0

Небольшой оффтоп, это не вы: https://spectrum.chat/users/pixel-lens?tab=posts ?

Ответить
0

Я :)

Бываю там набегами. Раньше терроризировал разработчиков и всячески вонял, пока они не прикрутили долбанные стили.

Ответить
1

Забавно, я буквально несколько минут назад написал вам туда совершенно по другому вопросу. Мир тесен.

Ответить
1

Действительно мир тесен )))))))))))))

Ответить
0

И тебе привет!

Ответить
0

Привет привет))

Ответить
1

Гы, да, вспомнил - респект что не поленился записать видео, я их смотрел. Мне вот лень например, потому что долбанные разработчики принимают претензии только по мылу - а нахрена этот спектрум, спрашивается.

Отписался тебе)

Ответить
0

Ну всему свое время, индустрия только набирает обороты) так посмотреть многие еще с фотошопа не слезли)

Ответить
0

В этом и печаль, что индустрия уже давно не молодая. Программы проектируются более полувека, сайты - более 25 лет. И да, фотошоп блин еще слишком жив на этом рынке. На то есть грустные причины - принципиально он слишком похож на новые инструменты, поэтому его всё никак не забросят. Какая разница где рисовать прямоугольники. Вот за это я ругаю современные инструменты (хоть и пользуюсь ими) - они не инновационны. Хотя тут вся инновационность заключается во взятии в оборот множества идей которые не то чтобы даже лежат на поверхности, а давно запрашиваются сообществами ввиду их абсолютной очевидности и доступности на других профессиональных рынках (те же брейкпойнты). Непонятно, почему одни решают взять часть этих фич (например в акшуре есть брейкпойнты), а другие нет. Вроде все в одной индустрии работаем, а разработчики инструментов ведут себя так, будто впервые тут очутились и совершенно не вчухивают в потребности своих клиентов.

Ответить
1

Под индустрией я имел ввиду появление нового специализированного софта для создания веб дизайна.
Скетч только в 2010 появился, а фотошопу уже целых 29 лет.
Появилась конкуренция на рынке, а значит и прогресс в развитии софта будет)

Ответить
1

будет, без сомнений, только сука побыстрей бы уже)))

Ответить
0

Фотошоп жив потому, что это редактор растровой графики. Фигма для дизайна, Фотошоп - для создания и редактирования картинок.
Возможно, простота фигмы закончится, когда в ней появятся недостающие функции. Функционала в ней пока что в разы меньше, чем в illustrator/InDesign.

Ответить
0

Фотошоп - для создания и редактирования картинок

Осталось это объяснить тем, кто до сих пор фотошопит сайты :С

Функционала в ней пока что в разы меньше, чем в illustrator/InDesign

Фигме надо честно спиздить нужный функционал из этих программ, но не весь. Таки да - и в индизайне делался дизайн интерфейсов, и не спроста, но это реально было совой на глобусе

Ответить
0

всё уже возможно с Framer X — и данные подтягивать реальные, и адаптивные кнопки делать

Ответить
4

Интересная идея и сама реализация. Я прекрасно представляю, сколько занимает времени придумать идею и ее оформить, так как сам дизайнер.
Круто, Андрей!

Ответить
1

А что мешает верстать на Bootstrap. Не умеешь? Есть куча скриптов конструкторов адаптивных сайтов, а так же тем-конструкторов для разных движков.

"Давайте представим что мы уже нарисовали дизайн главной страницы сайта в трех размерах 960px, 740px, 480px" - а если нужно больше? Если я медиа-запросами могу задать размер в css на 320px у логотипа, то у вас нужно отрисовывать всю страницу целиком из-за этого?

АААА, соррян, что-то с версткой спутал))

Ответить
4

А что мешает верстать на Bootstrap

Во-первых, бутстрапон это говно.

Не умеешь?

Во-вторых, не смешивай области. Чтоб тебе было легче понять боль дизигнера, придётся привести аналогию. Например, с кораблями. Одни люди их проектируют, другие - строят. Проектировщики сидят в тёплых кабинетах, напрягают свой мозг, высирают проект, ломают свои пальцы и вывыхивают кисти. Вторые пачкаются в машинном масле и металлической стружке, вдыхают газ сварочных аппаратов, таскают тяжести. Две совершенно разные сферы труда.

В третьих, дизайнеры обязаны понимать боль разработчиков. Проектировщик кораблей не имеет права нарисовать звезду смерти - он обязан исходить из возможностей трудяг, которые будут реализовывать его проект. А вот разработчикам всё похуй, им вообще не вдомёк, что там существует за пределами их компетенций. Они линейно выполняют проекты, которые спускаются к ним после создания и обработки среди дизайнеров, маркетологов и манагеров. Из-за невежества разработчиков и рождается вонь вроде "долбанные дизигнеры опять навертели", "маркетолухи" и "а что мешает верстать на страпоне?"

Ответить
1

Ну верстать это совсем другой процесс уже) Программа же в первую очередь для дизайна а не для верстальщиков, по этому и задача была другая) так то если верстать умеешь то можешь и программы вообще не юзать, прям кодом и пиши)

Размеров может быть сколько угодно, три я привел для примера.

Ответить
1

Идея уже реализована у плагина для Sketch :)

Ответить
1

+ можно ссылку, скетчем не пользовался, интересно глянуть как именно осуществили

Ответить
0

Paddy плагин, есть ещё 3, не помню названия, runner или Гугл поможет.

Ответить
1

Инструмент с breakpoints есть - и это webflow.
В фигме удобно нарисовать базовые вещи, а брейкпоинты/прототип делать в вебфлоу. Не нужно рисовать iPad/iPhone. Главное примерно представлять, как все блоки сложатся на мобильных экранах.

Ответить
0

Мне кажется очень очень сложная реализация вашего инструмента. Я бы попробовал сделать проще. На уровне стилей. Это же имеет напрямую связано с сетками. Вот и делать надо что то вроде того. Возможно даже не как отдельная настройка, а как свойство сеток

Ответить
0

Возможно как то и можно лучше сделать.
Я прикидывал разные варианты инструмента, представлял как инструмент будет использоваться в том или ином случае и всегда заходил в тупик. Этот вариант по моему универсальный.
Но опять же это только идея, а разрабы думаю и получше сделают.

Ответить
0

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

p.s. идея отличная, реализация немного замудренная) Но спасибо, помечтал о светлом будущем.

Ответить
0

В плагине Pointbreak для Скетча реализована такая функция:

https://protowire.com/pointbreak/?utm_source=designernews

Ответить
0

Полезно, но есть вещи, которые бесят примерно каждые 15 минут:
Настройка базовой линии, пэддинг, привязка элементов друг к другу (уже реализовано в Xcode), а не только к холсту.

Ответить
0

Не спорю, я и не претендую чтоб это осуществили в первую очередь, да и вообще не претендую на осуществление)

Ответить
–3

А можно помощней чего взять... например понимая что прототип это лиш маленький кусок процесса... ну типа посмотрите у пиндосов visual-paradigm. Мощнейший инструмент проектирования и прототипирования... и вообще смысл тратить гору времени в дизайн, когда приходиться по 100 раз менять это чтобы поднять конверсию, нужны совершенно иные, быстрые имплементации.
И смысл тестировать 500 тыщ разрешений гавноэкранов, когда ваш трафик в 95% случаев уложиться в 5 типоразрешений...

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }