Рассказываем, как использовать платформу Figma для верстки веб-сайтов. Начинающему фронтенд-разработчику стоит ознакомиться с возможностями этой платформы, поскольку Figma хорошо подходит для перевода графического макета в код. Наш фокус — на том, какие функции доступны в Figma для верстки в бесплатном пакете.
Figma — многофункциональная онлайн-платформа, которая изначально была графическим редактором. Именно поэтому в ней удобно делать макеты сайтов: дизайнер размещает или создает визуальные и текстовые блоки согласно техзаданию, затем вносит правки, и так до тех пор, пока заказчик сайта не одобрит макет. После этого за работу принимается верстальщик.
Сильная сторона верстки в Figma — это возможность совместной работы. Ответственный за верстку разработчик просто присоединяется к проекту в Figma и начинает преобразовывать макет в код, используя специальный режим Dev Mode. В этом режиме очень удобно отображаются все стили, и их можно легко экспортировать, чтобы «натянуть» на движок сайта.
К сожалению, теперь Dev Mode доступен только в платной версии Figma, как и режим совместной работы. Но все еще существует бесплатный тариф, в котором недоступны многие функции, хотя с его помощью тоже можно работать над сайтом. Ознакомимся с основными функциями, которые предлагаются в бесплатной версии Figma для верстки.
Сетки помогают выровнять элементы в макете, а направляющие — точно их позиционировать. Вы сможете проверить, все ли элементы макета стоят на нужных местах и правильно ли они выровнены. Используйте клавиши Ctrl + ' (Apostrophe), чтобы включить сетку, или Shift + Ctrl + 4, чтобы включить направляющие.
Чтобы приблизить какой-то элемент и рассмотреть его или, наоборот, отдалить макет и оценить общий вид, используйте Ctrl + Scroll (колесико мыши), или же Ctrl + + \ Ctrl + -. Зажав пробел, можно двигать макет, чтобы в центре экрана оказался нужный элемент. Если вы переключитесь в режим превью, вы сможете перемещаться между элементами или страницами с помощью пробела. Это нужно, чтобы понять, как выглядит макет в целом и его составляющие.
Очень удобная функция для верстки в Figma — возможность просмотреть свойства и стили отдельного элемента, например размеры блока, позиционирование, цвет заливки, тип шрифта и так далее. Выбрать элемент можно, просто кликнув по нему. В панели справа отобразятся свойства элемента.
Свойства элемента можно скопировать через стандартную комбинацию Ctrl + C / Ctrl + V. Это важно, если вы не экспортируете стили через плагин: скопировав их в Figma, можно более точно воспроизвести макет в коде.
Если панель инспектора, которая в Figma находится с правой стороны, не отображается при выделении элемента, попробуйте вызвать ее клавишами Ctrl + Shift + I. Это позволит просмотреть все стили, свойства и CSS-код выбранного элемента. А с помощью клавиш Ctrl + Alt + C можно даже получить CSS код для верстки.
Кстати, убрать панели, чтобы ничто не мешало разглядывать макет, можно с помощью клавиш Ctrl + /.
Еще одна незаменимая функция при преобразовании макета в код сайта. Если сгруппировать несколько элементов в группу, с ними можно работать как с блоком: изменять размер, перемещать или экспортировать в форматах SVG и PNG, чтоб переместить на сайт в виде изображений. Для группировки выделите кликом нужные элементы, зажав Ctrl, а затем нажмите Ctrl + G. Разгруппировать элементы можно клавишами Ctrl + Shift + G.
Экспорт элемента осуществляется с помощью клавиш Ctrl + E.
Обратите внимание: при экспорте изображения вы можете увеличить или уменьшить его. Не забывайте об этом, чтобы не перегружать страницы сайта большими файлами JPEG.
Для точной верстки макета важно знать не только размер отдельных элементов, но и расстояние между ними. Узнать это расстояние можно с помощью клавиш Alt + Hover. Это полезно для точного позиционирования. Также расстояние между элементами можно узнать, включив линейку клавишами Shift + R.
Используя панель инспектора, можно установить тип и размер шрифта, а также применить эффекты к тексту. Кроме того, текст можно скопировать с помощью клавиш Alt + Click по текстовому элементу. Это может пригодиться, если вы переносите контент макета поэлементно.
Если вы решите, что будете регулярно заниматься версткой в Figma, лучше приобрести платный пакет с поддержкой Dev Mode или установить один из множества плагинов. Но изучить, как работает Figma, какие бывают функции, как с ними работать, можно и в бесплатной версии, протестировав функционал платформы и сочетания горячих клавиш.