Figma – советы верстальщику

Figma – это графический онлайн-редактор для совместной работы дизайнеров и веб-разработчиков. В этой статье рассмотрим некоторые возможности Фигмы для удобства верстальщиков.

1

В разделе «Recent» жмём на «Import»:

После обработки файла, макет появится в списке.

2

К примеру, нужно узнать какие стили применены к заголовку:

Для этого, кликаем по нему, сразу видим его размеры в пикселях.

Далее, во вкладке «Inspect», в самом низу будут CSS-стили:

В данном методе удобно то, что можно скопировать только нужные свойства.

Способ №2

Через меню «Copy/Paste» → «Copy as CSS», в буфер помещаются все стили выделенного элемента.

3

Выделяем нужное изображение, открываем вкладку «Design», далее панель «Export».

Тут можно выбрать размер, формат файла (PNG, JPG, SVG, PDF) и сохранить файл или несколько файлов в разных форматах, что удобно для вёрстки под ретину.

Если выбрать несколько объектов, то они все сохранятся по отдельности, в одном архиве.

4

Чтобы сохранить целый макет в картинку, достаточно выделить общий контейнер в меню слоёв и экспортировать в изображение:

5

Чтобы узнать отступы от ближайших элементов нужно выделить элемент и зажать Alt, дале навести курсор на соседний элемент.

23.09.2020
38303
Предыдущая запись Работа с FTP в PHP

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
12295
+2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60104
+7
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
24643
+7
PHP класс для отправки E-mail
Отправка писем в кодировке UTF-8 и формате HTML, вложение файлов, дамп писем на сервере в файле eml.
15989
+5
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
26431
+4
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
65524
+18