Все элементы исправлены в дизайне figma

Я пытаюсь преобразовать дизайн figma в html и css, но в дизайне все позиции элементов абсолютны.

Один из стилей элемента навигации:

position: absolute;
width: 79px;
height: 16px;
right: 395px;
top: 13px;

Стили элементов сетки:

position: absolute;
height: 200px;
left: 0px;
right: 0px;
top: 0px;

Я новичок в фигме и такое вижу впервые. Я не знаю, традиционно это или нет. Они также ожидают, что я сделаю дизайн адаптивным. Но поскольку все они исправлены, я не могу использовать системы flexbox и grid. Каков обычный способ сделать это?


html css figma-api psd figma
person poena    schedule 07.10.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

Мой совет — используйте только те стили из figma, которые связаны с тем, как выглядит элемент. Например, цвет фона, размер шрифта и так далее. Вы должны сделать позиционирование самостоятельно.

person Rowan van Zijl    schedule 07.10.2020
comment
Хорошо, я понял, но у меня есть еще одна проблема. Ширина дизайна составляет 1366 пикселей, и они ожидают, что я сделаю этот сайт адаптивным. Когда я делаю ширину контейнера 1366 пикселей, страница выглядит довольно плохо. Также есть большие размеры экрана, но они не упомянули об этом. Так что я должен игнорировать этот 1366px или как я могу заставить это? @Рован-ван-Зейл - person poena; 07.10.2020
comment
Вы действительно должны сделать свой контейнер 1366px. Почему ваша страница выглядит плохо, когда вы делаете это? - person Rowan van Zijl; 08.10.2020
comment
Becase плохо смотрится на широких экранах. Итак, я должен начать с 1366 пикселей и сделать адаптивным для больших и маленьких экранов, верно? @Роуэн ван Зейл - person poena; 08.10.2020
comment
Контейнер вашего веб-сайта имеет максимальную ширину 1366 пикселей. Таким образом, он не должен становиться больше, в основном вы будете добавлять весь обычный контент вашего веб-сайта в этот контейнер, однако вы можете иметь некоторые элементы полной ширины, такие как заголовок. Ваш контейнер должен иметь следующие свойства, чтобы его можно было масштабировать на мобильных устройствах: max-width: 1366px; ширина: 100%; - person Rowan van Zijl; 09.10.2020

arrow_upward
0
arrow_downward

Действительно, позиция CSS, которую предоставляет Figma, — это не то, что вы можете использовать в своем HTML/CSS для Интернета. Это в основном для мобильных / настольных графических интерфейсов, где вы обычно позиционируете элементы абсолютно, как это делает Figma, и по своей сути не реагирует.

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

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

Также есть Desech Studio, которая импортирует ваши элементы figma и размещает их относительно в сетках, как и следовало ожидать в HTML/CSS. Затем вы можете дополнительно настроить, добавить адаптивные правила макета, экспортировать в реакцию и т. д.

person dreamLo    schedule 14.05.2021