Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Рассказываем, как использовать платформу Figma для верстки веб-сайтов. Начинающему фронтенд-разработчику стоит ознакомиться с возможностями этой платформы, поскольку она хорошо подходит для перевода графического макета в код. Наш фокус - на том, какой функционал доступен в Figma для верстки в бесплатном пакете.</p>

2 <h2>Содержание</h2>

3 <ul><li><a>Почему Figma хорошо подходит для верстки</a></li>

4 <li><a>Верстка в Figma без использования Dev Mode</a></li>

5 <li><a>Заключение</a></li>

6 </ul><h2>Почему Figma хорошо подходит для верстки</h2>

7 <p>Figma - многофункциональная онлайн-платформа для веб и UI дизайна, которая изначально была графическим редактором. Именно поэтому в ней удобно делать дизайн-макеты: дизайнер размещает или создает графические и текстовые блоки согласно техзаданию, затем вносит правки, и так до тех пор, пока заказчик не одобрит макет. После этого за работу принимается верстальщик.</p>

8 <p>Сильная сторона верстки в Figma - это возможность совместной работы дизайнера и верстальщика. Ответственный за верстку разработчик просто присоединяется к проекту в Figma и начинает преобразовывать графический дизайн в код, используя специальный режим Dev Mode. В этом режиме очень удобно отображаются все виды дизайна, и их можно легко экспортировать, чтобы "натянуть" на движок.</p>

9 <h2>Верстка в Figma без использования Dev Mode</h2>

10 <p>К сожалению, теперь инструмент Dev Mode доступен только в платной версии Figma, как и режим совместной работы для дизайнеров и верстальщиков. Но все еще существует бесплатный тариф, в котором недоступны многие функции, хотя с его помощью тоже можно работать над дизайном и версткой сайта. Ознакомимся с основными возможностями и инструментами, которые предлагаются в этой версии для верстки.</p>

11 <h3>Сетки и направляющие</h3>

12 <p>Сетки помогают выровнять компоненты в макете, а направляющие - точно их позиционировать. Вы сможете проверить, все ли части макета стоят на нужных местах и правильно ли они выровнены. Используйте кнопок Ctrl + ' (Apostrophe), чтобы включить сетку, или Shift + Ctrl + 4, чтобы включить направляющие.</p>

13 <h3>Навигация по макету</h3>

14 <p>Чтобы приблизить какой-то компонент и рассмотреть его или, наоборот, отдалить макет и оценить общий вид, используйте Ctrl + Scroll (колесико мыши), или же Ctrl + + \ Ctrl + -. Зажав пробел, можно двигать макет, чтобы в центре экрана оказался нужный объект. Если вы переключитесь в режим превью, вы сможете перемещаться между фреймами с помощью пробела. Это нужно, чтобы понять, как выглядит макет в целом и его составляющие.</p>

15 <h3>Выбор и копирование свойств объектов</h3>

16 <p>Очень удобная функция для верстки в Figma - возможность просмотреть свойства отдельного компонента, например размеры блока, позиционирование, цвет заливки, тип шрифта и так далее. Выбрать нужный объект можно, просто кликнув по нему. В панели справа отобразятся его свойства, включая цвет и др.</p>

17 <p>Свойства объекта можно скопировать через стандартную комбинацию Ctrl + C / Ctrl + V. Это важно, если вы не экспортируете стили через плагин: скопировав их в Figma, можно более точно воспроизвести макет в коде.</p>

18 <p>Если панель инспектора, которая в Фигме находится с правой стороны, не отображается при выделении объекта, попробуйте вызвать ее клавишами Ctrl + Shift + I. Это позволит просмотреть все стили, свойства и CSS-код выбранного компонента. А с помощью кнопок Ctrl + Alt + C можно даже получить CSS код для верстки.</p>

19 <p>Кстати, убрать панели, чтобы ничто не мешало дизайнеру или верстальщику разглядывать интерфейс, можно с помощью клавиш Ctrl + /.</p>

20 <h3>Группировка и разгруппировка</h3>

21 <p>Еще одна незаменимая функция при преобразовании графического интерфейса в код. Если сгруппировать несколько элементов в группу, с ними можно работать как с блоком: изменять размер, перемещать или экспортировать в форматах SVG и PNG, чтоб переместить на веб-ресурс в виде изображений. Для группировки выделите кликом нужные компоненты, зажав Ctrl, а затем нажмите Ctrl + G. Разгруппировать объекты и фреймы можно клавишами Ctrl + Shift + G.</p>

22 <h3>Экспорт элементов</h3>

23 <p>Экспорт элемента осуществляется с помощью кнопок Ctrl + E.</p>

24 <p>Обратите внимание: при экспорте изображения вы можете увеличить или уменьшить его. Не забывайте об этом, чтобы не перегружать страницы сайта большими файлами JPEG.</p>

25 <h3>Измерение расстояний и размеров</h3>

26 <p>Для точной верстки фреймов важно знать не только размер отдельных элементов, но и расстояние между ними. Узнать это расстояние можно с помощью клавиш Alt + Hover. Это полезно для точного позиционирования. Также расстояние между компонентами можно узнать, включив инструмент линейку клавишами Shift + R.</p>

27 <h3>Работа с текстом в Фигме</h3>

28 <p>Используя панель инспектора, можно установить тип и размер шрифта, а также применить эффекты к тексту. Кроме того, его можно скопировать с помощью клавиш Alt + Click по текстовому элементу. Это может пригодиться, если вы переносите контент интерфейса поэлементно.</p>

29 <h2>Заключение</h2>

30 <p>Если вы решите, что будете регулярно заниматься версткой и работой в Figma, лучше приобрести платный пакет с поддержкой Dev Mode или установить один из множества плагинов. Но изучить, как работает Figma, какие бывают полезные инструменты для дизайнеров, как с ними работать, можно и в бесплатной версии, протестировав функционал платформы и сочетания горячих клавиш.</p>