Все предметы закреплены в дизайне фигма
Я пытаюсь преобразовать дизайн 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. Как это сделать обычным способом?
2 ответа
Не стоит обращать внимание на позицию, которую добавляет фигма. Эти значения позиции берутся из позиции на самой монтажной области. Ваш веб-сайт никогда не будет иметь таких точных размеров.
Мой совет - используйте только стили из фигмы, которые связаны с тем, как выглядит элемент. Например, цвет фона, размер шрифта и так далее. Вы должны делать позиционирование самостоятельно.
Действительно, позицию CSS, которую предоставляет Figma, нельзя использовать в своем HTML/CSS для Интернета. Это в основном для мобильных / настольных графических интерфейсов, где вы обычно позиционируете элементы абсолютно, как это делает Figma, и по своей сути не реагирует.
Что касается ширины 1366 пикселей, это стандартная ширина для веб-сайтов при веб-дизайне. У вас может быть либо фиксированная ширина, которая находится в центре, если размер вашего монитора больше 1366 пикселей, либо вы можете сделать его жидким и позволить ему растягиваться слева направо.
Если вы говорите, что это плохо выглядит на больших экранах, самое простое решение - сделать его фиксированным и центрированным, и он будет хорошо выглядеть для экранов 1366 пикселей, в то время как на больших экранах это просто больше пустого места по бокам.
Также есть Desech Studio, которая импортирует ваши элементы figma и позиционирует их относительно в сетках, как и следовало ожидать в HTML/CSS. Затем вы можете дополнительно настроить, добавить правила адаптивного макета, экспортировать для реагирования и т. Д.