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