Как в фигме измерить ширину контента и как верстать макет, если его ширина больше ширины монитора и появляется горизонтальная полоса прокрутки??

Question

[Фёдор]

Дамы и господа, этот вопрос сводит меня с ума. Как измерить ширину контента в макете из под Фигмы?

В фотошопе было проще. Включил сетку, взял линейку и измерил. Задал нужную ширину для обёртки, а тут фиг пойми. Я уже с калькулятором и так, и эдак уже. Всё равно не могу понять, какая ширина контента в макете. Даже если я правильно всё рассчитал, то исходят из общей ширины 1920px ширина контента 1442px. Соответственно появляется полоса прокрутки. Как верстать такие макеты, чтобы быть уверенным, что всё будет смотреть, как в макете?

Comments

[Rustam Bainazarov]

Как фундаментальные правила дизайна макета отличаются в Figma? Почему 1442px? Ширину контейнера можно определить по группе, которая держит контейнер, если, конечно, грамотно сделан макет. Можно спросить у дизайнера, если он, конечно, знает, что делает.

[Фёдор]

Рустам Байназаров, Исходя из общей ширины макета 1920 я вычел отступы слева и справа. Они составили 239px. Получилось 1442px. Смею предположить два варианта. Либо я что-то не так посчитал и понял, либо сам макет кривой.

[Rustam Bainazarov]

Фёдор, я бы спросил дизайнера, почему такая странная ширина, но дизайна я не вижу на проверку его жизнеспособность на самом популярном разрешении (1360px - 17px).

Может, там всё будет тип-топ, а посему — почему, собственно, нет?

.container {
  width: 100%;
  max-width: 1442px;
  /* */
}

Хотя и другие крупные скопления разрешений, по идее, тоже должны учитываться (1200, 1024, 768, 375, 360 + 320 для старых телефонов и мелких iPhone), если мы говорим об адаптивном макете.

[Фёдор]

Рустам Байназаров, спросить не у кого. Сайт на забугорных интернетах с целью прокачать навыки работы с Фигмой и вёрстки. Ваш пример помог. Но весь контент занимает весь экран без отступов слева и справа.

Я могу выложить сюда скриншот макета. Если это как-то поможет делу.

[Rustam Bainazarov]

Фёдор, занимает экран — какой? Вы же сказали, что есть область контента. Можно ссылкой на макет вместо скриншота.

[Фёдор]

Рустам Байназаров, ссылка на макет: https://www.uistore.design/items/covid-19-landing-...

Как выглядит сайт на данный момент:

[Rustam Bainazarov]

Фёдор, это просто есть контейнер общий (во весь экран) и внутренний держатель контента (ограниченный по ширине).

Вот так:


Сжимайте-разжимайте. Вылетающие декоративные элементы — на фон общего контейнера, сам контент — внутри внутренного контентного блока.

[Антон Литвиненко]

Я в работе часто пользуюсь наэкранной линейкой
https://developer.roman.grinyov.name/blog/13
А также колорпикером

[Фёдор]

Рустам Байназаров, да я всё это понимаю. Просто видимо заработался и не смог понять как вместить контент. Надо чаще делать перерывы.

И всё же. Есть такой же практичный вариант измерить ширину контента как в ФШ?

[Фёдор]

Антон Литвиненко, Спасибо взял на заметку.

[Rustam Bainazarov]

Фёдор, если создатель макета не сделал олицетворяющую контейнер группу с нормальным значением ширины, чтобы её посмотреть, либо не указал её, условно, на словах — то направляющими, либо сделать прямоугольник и с его помощью измерить. Отступы от границ контейнера, если они не сделаны на autolayout с нормальными значениями, то так же.

Answer 1

[be_a_man]

Дело не в фигме а в том как макет делали. И тем не менее в нем есть направляющие.
Shift + R включить направляющие и линейку. Растянуть прямоугольник (в фигме все прилипает друг к другу просто великолепно), посмотреть размеры.


Как верстать. Так например:

.container {
    width: 100%;
    max-width: 1662px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
}

Comments

[Фёдор]

В общем не всё так прозаично, как хотелось бы. Спасибо.

[be_a_man]

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

[Фёдор]

be_a_man, Умею готовить сетки, просто пора на сегодня заканчивать. Да и бустрап не особо люблю.