Как сверстать сайт с нуля: HTML, CSS и Figma в действии | Верстаем MAIN
Как сверстать сайт по макету из Figma: пошаговый процесс
Figma — инструмент дизайнера. Браузер — инструмент пользователя. Между ними — процесс, который называется вёрстка. Разберём, как перенести то, что нарисовано в Figma, в реальный работающий сайт — без написания кода вручную. Figma показывает статичную картинку. Сайт — живой: кнопки нажимаются, формы отправляются, тексты меняются. При переносе нужно не просто «сделать похоже», а реализовать поведение каждого элемента. Плюс: адаптивность. В Figma вы рисуете для конкретных размеров. На сайте он должен работать на 375px и на 1920px одновременно...
5 ошибок при передаче макета из Figma в конструктор сайта
«Сделайте как в макете» — фраза, после которой что-то обязательно идёт не так. Не потому что конструктор сайтов плохой, а потому что в Figma можно нарисовать всё что угодно, а на сайте работают другие правила. Вот пять ошибок, из-за которых готовый сайт выглядит иначе чем, дизайн в Figma. В Figma элементы можно расположить буквально по пикселям: заголовок на 120px от верха, иконка на 44px слева. Выглядит точно. Но на сайте это — фиксированные отступы, которые ломаются на разных экранах. Решение: используйте Auto Layout в Figma для всех блоков, которые должны адаптироваться...