Рассказываем, как использовать платформу Figma для верстки веб-сайтов. Начинающему фронтенд-разработчику стоит ознакомиться с возможностями этой платформы, поскольку она хорошо подходит для перевода графического макета в код. Наш фокус — на том, какой функционал доступен в Figma для верстки в бесплатном пакете.
Почему Figma хорошо подходит для верстки
Figma — многофункциональная онлайн-платформа для веб и UI дизайна, которая изначально была графическим редактором. Именно поэтому в ней удобно делать дизайн-макеты: дизайнер размещает или создает графические и текстовые блоки согласно техзаданию, затем вносит правки, и так до тех пор, пока заказчик не одобрит макет. После этого за работу принимается верстальщик.
Сильная сторона верстки в Figma — это возможность совместной работы дизайнера и верстальщика. Ответственный за верстку разработчик просто присоединяется к проекту в Figma и начинает преобразовывать графический дизайн в код, используя специальный режим Dev Mode. В этом режиме очень удобно отображаются все виды дизайна, и их можно легко экспортировать, чтобы «натянуть» на движок.
Верстка в Figma без использования Dev Mode
К сожалению, теперь инструмент Dev Mode доступен только в платной версии Figma, как и режим совместной работы для дизайнеров и верстальщиков. Но все еще существует бесплатный тариф, в котором недоступны многие функции, хотя с его помощью тоже можно работать над дизайном и версткой сайта. Ознакомимся с основными возможностями и инструментами, которые предлагаются в этой версии для верстки.
Сетки и направляющие
Сетки помогают выровнять компоненты в макете, а направляющие — точно их позиционировать. Вы сможете проверить, все ли части макета стоят на нужных местах и правильно ли они выровнены. Используйте кнопок Ctrl + ' (Apostrophe), чтобы включить сетку, или Shift + Ctrl + 4, чтобы включить направляющие.
Навигация по макету
Чтобы приблизить какой-то компонент и рассмотреть его или, наоборот, отдалить макет и оценить общий вид, используйте Ctrl + Scroll (колесико мыши), или же Ctrl + + \ Ctrl + -. Зажав пробел, можно двигать макет, чтобы в центре экрана оказался нужный объект. Если вы переключитесь в режим превью, вы сможете перемещаться между фреймами с помощью пробела. Это нужно, чтобы понять, как выглядит макет в целом и его составляющие.
Выбор и копирование свойств объектов
Очень удобная функция для верстки в Figma — возможность просмотреть свойства отдельного компонента, например размеры блока, позиционирование, цвет заливки, тип шрифта и так далее. Выбрать нужный объект можно, просто кликнув по нему. В панели справа отобразятся его свойства, включая цвет и др.
Свойства объекта можно скопировать через стандартную комбинацию Ctrl + C / Ctrl + V. Это важно, если вы не экспортируете стили через плагин: скопировав их в 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, какие бывают полезные инструменты для дизайнеров, как с ними работать, можно и в бесплатной версии, протестировав функционал платформы и сочетания горячих клавиш.
