Резиновый контент. Как сделать в Figme?

Question

[Алена]

Не знаю всех тонкостей резинового дизайна, а точнее-делала всегда адаптив.
А клиент попросил резиновый контент на сайте. Как сделать? Перечитала кучу всего, одна теория. Нет цифр, нет примеров, никаких пошаговых инструкций...

Comments

[Vladislav]

Width 100%

Answer 1

[FeST1VaL]

оффтоп...

Не знаю зачем люди отвечают про верстку... Я думаю автор вопроса имел ввиду сам дизайн как рисовать... а не как верстать... ну или я дурак... не правильно понимаю их... Через DevInspector (F12) вы можете посмотреть как у других готовых сайтов какие то блоки меняются в зависимости от экрана)

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

Comments

[Алена]

Да, я имела ввиду именно дизайн.
Но так получается почти, а может и то же самое, что и адаптив?

[FeST1VaL]

Алена, ну верстальщику главное чтобы было понятно как блок складывается в других разрешениях. К примеру было 2 рядом блока, а стал 1 во всю ширину. как в схематичном примере 2 и 1 вариант

[FeST1VaL]

Алена, В Фигме можно сделать конечно чтобы у вас в зависимости от ширины контента менялись размеры блоков (это конечно удобно, но мне кажется не сильно нужно) т.е привязать ширину к ширине другого блока.

[Алена]

Артем Будин, да, наверно именно Это и имеет ввиду заказчик...Сделаю по вашему примеру с блоками, как они меняются в зависимости от устройств.
благодарю за ответ)

Answer 2

[kocherman]

Открывай DevInspector (клавишей F12) и жми комбинацию Ctrl+Shift+M.
Потом найди среди настроек вкладку со списком устройств.
Главное в адаптивной верстке - flex-layout и медиа-запросы CSS.
Ну а что тут еще скажешь...

Comments

[Ankhena]

И как это поможет нарисовать макет в фигме?

[kocherman]

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

А так вопрос был в теме "Веб-разработка". Был бы как сейчас только "Дизайн", мне бы в выборку не попал.

[Ankhena]

kocherman,

вектор рисуют в Inkscape

Про вектор вообще ни слова нет.

Не могу даже близко представить себе что там можно согласовывать с заказчиками

С заказчиками обычно согласовывают дизайн сайта. До верстки.

ведь реально в этой фигме рисовать только скетчи вроде блок-схем, что рисуют студенты

Макеты сайтов в современном мире делают в фигме или скетче.
Погуглите, посмотрите.

[kocherman]

Ankhena, В этом я согласен. Мои методы устарели. Мы просто себе и своим проектам делаем сайты.

Одно я могу сказать точно. Чем больше сайтов/версток/рюшечек человек посмотрит, тем больше наберется опыта, и не важно будь он верстак или дизайнер. Тут спросили про цыфры, математику. Заказчик наверняка и примеры удачных работ привел. Вот будет возможность отмерить свои пиксели [не вектор же] :-)

А мы все также любой объект на странице продолжаем мерить rem-ами.

[Ankhena]

kocherman,

Чем больше сайтов/версток/рюшечек человек посмотрит, тем больше наберется опыта

Это уж несомненно!

Answer 3

[Степан Воеводин]

По сути всё сводится к правильной привязки объекта относительно Frame, где-то надо ставить Constraints - «Scale», где-то «Left & Right».
Вот наглядный пример как парень делает резиновый график
(лучше смотреть на ускорении, т.к. много болтовни)
и другой меняется ширина компонентов в зависимости от ширин...

И есть еще плагин Responsive для просмотра адаптивного дизайна