Как в фигме выбрать размер листа

Обновлено: 05.10.2024

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

Как открыть файл *.fig

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

Как получить CSS-стили элемента

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

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

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

Способ №2

Как сохранить изображения

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

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

Как сохранить целый макет в PNG

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

Как измерить расстояние между объектами

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

Как в фигме создать лист а4, окно под мобильное устройство и другие форматы. И исчерпывающая инструкция по созданию эффекта матового стекла в figma. Печатные размеры для фигмы для примера сравнение фрейма а4, созданного с плотность 300 в плагине, и стандартного а4 из фигмы. Что такое cmyk? Почему 300 dpi? Как перевести миллиметры в пиксели? А также шаблоны для печати в типографии. Сегодня я расскажу какой размер в пикселях имеют листы формата а3 и а4 при разном качестве изображения.

Количество пикселей для листа а4 зависит от параметра dpi, который вы применяете при dpi. Таблица размеров листов бумаги формата а, в сантиметрах, миллиметрах и в пикселях формат бумаги серии а мм см дюймы пиксели а0 841 1189 84,1 118,9 33,11 46,82 9933 x 14043 px а1 594 841 59,4 84,1 23,39 33,11. Таким образом размеры листа формата а4 в пикселях в фотошопе будут равны 2480 x 3508 при разрешении 300 dpi. Количество пикселей в растровом изображении при одном и том же размере зависит от разрешения объекта. Количество пикселей для листа а4 при разрешении 72 пикселя на дюйм 595х842 пикс 150 пикс на дюйм 1240х1754 пикс 210x297mm - размер формата листа, а размер пикселов зависит от разрешения аппаратуры.


Необходимость составить список правил появилась, когда мы прочувствовали, как больно бывает исправлять ошибки. Макет сайта из одной программы кочевал в другую, разработчиков это не устраивало, дизайнеров не устраивало, что разработчики постоянно вносят правки.

1. Используй сетку


Хорошая статья про сетки.

Когда сеткой начинают пользоваться и дизайнеры и разработчики — многие проблемы отпадают. Вот один из примеров такого подхода. При верстке макета больше не нужно мерить отступы между каждым элементом. Все они подчинены заранее заданным модулям.

Текстовые фреймы, иконки, менюхи, попапы, дропдауны, контролы вот это всё всё всё должно быть кратно модулям сетки. Или хотя бы стремиться к этому.


Вот что говорят ребята из отдела разработки по поводу сеток:

Конечно, когда в макетах появилась упорядоченность стало проще. Мы больше не меряем каждый отступ вручную.

2. Задавай текстовым блокам осознанные размеры


Вот два с виду одинаковых текстовых блока. Описание и цена. Но если посмотреть как они выглядят в макете — сразу видна разница.


Виталий, разработчик:

Когда я вижу макеты с разными отступами между блоками, меня аж трясет. Дизайнеры, перестаньте так делать, это же ужасно.

3. Следи за боковыми отступами


Разница должна быть чем-то обоснована, не должно получаться случайных значений.

Виталий, разработчик:

Если отступы в блоке одинаковы — свойство, задающее отступ в родительском блоке, имеет вид padding: 0, 24.

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

4. Используй Grow Vertically для текстовых блоков


Виталий, разработчик:

Хорошо когда размеры текстовых блоков по высоте изменяются автоматически. В таких блоках можно через свойства сразу получить корректную высоту. В отличии от правого примера, где высота блока 27 px, а по факту должна быть 70 px.

5. Соблюдай целые значения в пикселях

Расстояния между объектами должны быть выражены целыми значениями. Так же как и размеры самих объектов.


Виталий, разработчик:

Вчера пришла в работу задача на верстку. Открываю макет в фигме, и что вижу… Отступы все дробные, кегель у шрифта — дробный, межстрочник — тоже дробный. Не, ну я, конечно, написал дизайнеру. Подождал ответа, подождал пока он разберется, откуда это всё взялось. В итоге только к вечеру смог приступить к этой задаче.

6. Используй компоненты

Идеология компонентов — главное, что отличает Figma от инструментов предыдущего поколения. Создавай компоненты по любой понятной и удобной тебе методике. Например, концепция атомов, при которой начиная с простейших элементов (формы, надписи) постепенно группируются более сложные компоненты на их основе.

Или создание отдельных блоков в виде компонентов и их переиспользование. Главное, чтобы выбранный подход был логичным и понятным для тех, кто будет работать после или одновременно с тобой. Мы, как правило, используем компоненты в зависимости от сложности проекта.


Компонентам и их использованию посвящены отдельные статьи. С описанием работы constraints и сеток внутри компонентов.

7. Называй группы и фреймы осмысленно

Понятные названия помогут другим разобраться в твоем макете и не вспоминать тебя “теплыми” словами.


Виталий, разработчик:

Среди разработчиков есть культура написания имен переменных и функций. А вы, дизайнеры, чем лучше? Почему вы с легкостью отдаете макеты с неинформативными названиями? Подписывайте ясно и четко названия фреймов и компонентов.

8. Делай растр с двукратным или трехкратным запасом по размеру.

Существует много мониторов с увеличенной плотностью пикселей. Что это означает для дизайнера?

При одинаковых физических размерах экранов на каждом из них помещается разное количество пикселей. И если подготовить растровое изображение для обычного монитора 1:1, то на ретине оно будет выглядеть размытым.


Виталий, разработчик:

Помню как в 2000-м году выходил в интернет через старый добрый US Robotics Courier на скорости 14 400 бит/с… Тогда графику делали 1в1, сайты верстали таблицами, не было ретин и прочих смартфонов. В общем жили не тужили. Сейчас CSS псевдо классы позволяют ребятам с ретиной и прочими hi-end дисплеями подгружать специально для них предназначенные растровые изображения. При этом не грузить их всем остальным.

Frame— это рабочая область, где будут размещаться элементы интерфейса, дизайна сайта или мобильного приложения.

Как сделать фрейм в фигме?

Если не тянуть мышкой и просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100px.

Если вы будете тянуть, то можно создать произвольный размер.

Популярные размеры фреймов в Figma и шаблоны различных устройств

В правой панеле представлены популярные размеры фреймов (активно при выборе инструмента фрейм):

  • Phone — для телефонов.
  • Tablet — для планшетов.
  • Desktop — для настольных компьютеров.
  • Watch — для часов.
  • Paper — для бумаги.
  • Social media — для социальных сетей.
  • Figma community — размеры от сообществ.

Выбираем другое разрешение фрейма из списка

Если выбрать фрейм, то можно изменить его выбрав в выпадающем списке справа другое разрешение либо изменить его на группу.

Меняем размер по умному. Как уменьшить или увеличить Frame в Figma ?

Чтобы уменьшить, обрезать фрейм или увеличить фрейм, просто наведите курсор на край и потяните в сторону. Также вы можете использовать горячие клавиши, чтобы активировать дополнительные функции.

Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.

Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.

Иконка со стрелками позволяет подогнать размеры фрейма под содержимое которое есть внутри фрейма. Например возьмем график, и нажимаем на эту иконку. Размеры будут подогнаны под содержимое.

Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.

Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.

Изменение угла наклона и скругление углов

Чтобы скруглить углы у фрейма (сделать его круглым), смотрите в правую панель. Сверху есть иконка скругления углов и иконка изменения размеров наклона угла. Также если нажать на самую правую иконку, то будет возможность скруглять любые углы отдельно.

Читайте также: