Измерение размеров и расстояний
Если выделить объект, Фигма покажет под ним его размеры, это будут маленькие красные цифры. Если их не видно, или они неудобны, или они наползают на что-то красное — можно увидеть ту же информацию в правой панели в виде кода. Это будет выглядеть, например, так: под объектом — 123 х 23, в правой панели во вкладке с кодом — width: 122px; height: 23px;.
Чтобы измерить расстояние между объектами, достаточно выбрать первый объект, нажать Alt/Option и навести на второй.
Расстояния между объектами и отступы
Фигма позволяет измерять расстояния от блока до блока. Когда будете верстать, убедитесь, что размеры и расстояния в ваших CSS-правилах написаны с учётом собственных отступов объектов. Вероятно, они будут не совпадать со скопированными из Фигмы.
Также в Фигме можно измерить расстояние от блока до направляющей. Это делается так же: выбирается объект, потом нужно навести курсор на направляющую. Расстояние между направляющими, к сожалению, придётся посчитать вручную по пиксельной линейке сверху или слева.
Работа с цветами и эффектами
Чтобы получить информацию о цветах фонов и заливок объектов, по-прежнему можно просто выбрать объект и в правой панели выведутся его параметры, во вкладке Design в блоке Fill — о заливке, как её делал дизайнер, во вкладке Code эти данные будут сразу в формате CSS.
Фигма по умолчанию во вкладке Code отображает цвета в hex-формате, например, #ffffff;. Но иногда у цвета есть такая характеристика, как прозрачность. Обычно цвета с прозрачностью имеют формат RGBA, где a — альфа-канал, — это и есть прозрачность. Выглядит это так: rgba(255, 255, 0, 0.5);, и в таком случае прозрачность подаётся в десятичной дроби, или так: color: #ffff80; opacity: 50%;, это тот же цвет с теми же параметрами прозрачности.
Если нам повезло, и дизайнер применил градиенты, тени и скругления, мы также можем скопировать параметры этих эффектов во вкладке Code.
Если все эффекты (градиент, тень, размытие и скругление) применены к одному объекту, в CSS будет выводиться примерно следующее:
Обратите внимание, что для управления тенью текста использовалось свойство text-shadow, а для контейнера — box-shadow.
Все эффекты в одной кнопке
Границы и «полосочки» Фигма также отобразит во вкладке Code, даже если никаких особенных эффектов к этой границе не применено. Вы получите следующий код: border: 2px solid #FFFFFF;
Экспорт графики
Чтобы экспортировать из Фигмы графику, нужно её найти и выбрать, затем развернуть блок Export, определить, в каком формате мы будем выгружать графику, а потом нажать одноимённую кнопку в правой панели снизу.
У Фигмы есть возможность проверить, то ли мы выгружаем, что хотели. Для этого в блоке Export разворачивается Preview.
Экспортирование круга с градиентной заливкой
Если дизайнер планировал многократное использование объектов, часть графики может лежать в папке Assets, её можно найти в левой панели наверху.
Иконки в папке Assets
Остальные элементы нужно выделить в рабочей панели или поискать в слоях. Обычно у растрового графического контента в панели слоёв появляется иконка в виде картинки.
А векторные изображения получают иконку в виде себя самих или в виде кривой.
Если нужно выгрузить в одном формате несколько графических объектов, их можно скачать массово. Выбрать в Assets или Layers несколько картинок можно удерживая Shift или Ctrl/Cmd (в зависимости от того рядом расположены картинки или нет). При этом все изображения будут собраны в один архив.
Экспорт однотипных объектов
Если выгрузить нужно группу элементов одним слоем, это также можно сделать, объединив их в группу.
Экспорт нескольких слоёв как единого изображения
Как в Figma измерить расстояние от объекта до другого объекта
Фигма обладает вполне стандартным набором линеек и привязок, но есть у нее и несколько полезных дополнительных функций.
Как включить линейку
Линейку можно включить из меню View > Rulers, либо сочетанием Shift + R.
Включение линеек из меню
Чтобы поместить линию на макет, надо перетянуть зажатую мышь с линейки в область макета. А чтобы удалить линию, надо перетянуть ее обратной в область линейки.
Видео: линейки в Figma
Тег video не поддерживается вашим браузером 
Как измерить расстояние между элементами
Чтобы измерить расстояние, следуйте простым инструкциям:
При этом элементы должны находиться в одном фрейме, а расстояния будут показаны как по вертикали, так и по горизонтали.
Видео: расстояния между объектами в Figma
Тег video не поддерживается вашим браузером
Также прямо в процессе вы можете двигать выбранный элемент с помощью стрелок клавиатуры, чтобы наиболее точно расположить его на экране.
Расстояние X и Y
В параметрах элемента есть его значения X и Y — они показывают расстояние от левого и верхнего края фрейма. При этом если речь идет об экземпляре компонента, то все его внутренние элементы будут считать расстояние от краев фрейма элемента.
В эти поля вы можете вручную вписать значения, но, кроме того, Фигма умеет считать простые математические выражения. Вы можете задать X = 100+500, а Фигма сама посчитает финальное значение 600. Это удобно, если вы располагаете несколько элементов с не «круглыми» значениями длин и высот.
Figma – советы верстальщику
Figma – это графический онлайн-редактор для совместной работы дизайнеров и веб-разработчиков. В этой статье рассмотрим некоторые возможности Фигмы для удобства верстальщиков.
Как открыть файл *.fig
В разделе «Recent» жмём на «Import»:
После обработки файла, макет появится в списке.
Как получить CSS-стили элемента
К примеру, нужно узнать какие стили применены к заголовку:
Для этого, кликаем по нему, сразу видим его размеры в пикселях.
Далее, во вкладке «Inspect», в самом низу будут CSS-стили:
В данном методе удобно то, что можно скопировать только нужные свойства.
Способ №2
Через меню «Copy/Paste» → «Copy as CSS», в буфер помещаются все стили выделенного элемента.
Как сохранить изображения
Выделяем нужное изображение, открываем вкладку «Design», далее панель «Export».
Тут можно выбрать размер, формат файла (PNG, JPG, SVG, PDF) и сохранить файл или несколько файлов в разных форматах, что удобно для вёрстки под ретину.
Если выбрать несколько объектов, то они все сохранятся по отдельности, в одном архиве.
Как сохранить целый макет в PNG
Чтобы сохранить целый макет в картинку, достаточно выделить общий контейнер в меню слоёв и экспортировать в изображение:
Как измерить расстояние между объектами
Чтобы узнать отступы от ближайших элементов нужно выделить элемент и зажать Alt, дале навести курсор на соседний элемент.
Как в Figma измерить расстояние от объекта до другого объекта
Направляющие
В программе прекрасные инструменты выравнивания элементов (появляются они справа вверху во вкладке DESIGN при щелчке на нужную фигуру), создания различных сеток для фрейма (при щелчке на фрейм – справа во вкладке DESIGN пункт Layout grid), так еще и направляющие есть! Живут они во вкладке View →Show Rulers (Shift+R). Работают они точно таким же образом, как в фотошопе или иллюстраторе. Удобно, что можно применять направляющую только к одному фрейму или ко всем фреймам на рабочем поле. И кстати направляющие работают только с фреймами первого порядка, т.е. если вы захотите поместить фрейм с направляющими в другой фрейм, то у первого фрейма направляющие исчезнут.
Режим прототипа
Классная штука, позволяющая передвигаться по страницам макета с заранее определенных элементов, что незаменимо при презентации работы.
Чтобы создать прототип перейдите во вкладку PROTOTYPE (с правой стороны) выбирайте начальную точку. Привязавшись к нужному фрейму/элементу на фрейме, тянем за голубой шарик (который превратится в стрелочку) на нужный нам переходный фрейм. Таких связей можно сделать множество. Просмотреть прототип можно нажав на кнопку проигрывания, рядом с голубой кнопкой Share.
В версии 3.0 появилась функция мокапов. В той же правой вкладке прототипа можно выбрать девайс, подобрать модель, задать цвет заднего фона и просмотреть макет с точки зрения визуального оформления в продуктах Apple.
Компоненты
Компоненты это, так скажем, сгруппированные вами объекты, которые поддаются общему изменению. Т.е. есть парочка элементов. Вы собираете это в компонент. Размножаете и, чтобы в дальнейшем избавиться от того, чтобы исправлять что-то в каждой паре элементов, просто вносите изменения в главный компонент. И все изменения коснутся и дочерних компонентов. Крутая штука. Подобное реализовано и в небезызвестной Axure.
Удобно то, что каждый дочерний компонент можно редактировать, не задевая главный. Те изменения, которые вы внесете в единичный дочерний компонент будут уникальны и при изменении главного компонента никуда не денутся. Чтобы вернуть свойства главного компонента дочернему просто в контекстном меню выберите Reset Instance.
Также компоненты можно группировать с другими компонентами, что, согласитесь, прекрасно.
Некоторые горячие клавиши
I – пипетка (color picker).
C – режим комментирования. Удобная штука, позволяющая ставить пометки в определенных местах макета. Позволяет комментирование от разных участников, если над проектом занята команда.
Ctrl+Shift+K – поместить изображение.
Одна из моих любимых фишек: допустим, в макете галерея из изображений и мы не тыкаем на каждое изображение, чтобы его поместить в нужную область, а просто скопом выбираем все файлы и вставляем в наши квадраты. Ускоряет работу над галереями и списками товаров в разы.
Ctrl + колесо мыши – масштабирование.
Shift+R – показать/спрятать линейку (и направляющие, если вы их вытянули).
P – перо (pen). Принцип работы такой же, как в других векторных программах.
Ctrl+G – сгруппировать объекты.
Ctrl+Shift+G – разгруппировать объекты.
Ctrl+Z – отмена последнего действия.
Ctrl+Y – вернуть последнее действие.
Если хотим дублировать и передвинуть объект, то хватаем его и с зажатым Alt передвигаем. Если хотим, чтобы объект остался на траектории объекта-родителя, то еще прибавляем к клавишам Shift.
Надеюсь, фишки и горячие клавиши Figma вам пригодятся. Побывать на Figma.com
Привет, народ! Меня зовут Ширли, я из новых летних стажеров в Figma. Мой первый проект здесь был занятным – команда поставила мне задачу создать направляющие (вместе с моим другом – инженером Кенриком Райли).
С самого начала Figma наши пользователи просили нас об этой функции. Просьбы подавались утром, днем и вечером – 100 запросов только за последние шесть месяцев из самых разных мест, даже из Лагоса (Нигерия) и Буэнос-Айрес (Аргентина).
Мы услышали вас, вот почему Figma поручили мне это дело, как только я начала свою стажировку. Для тех, кто не в курсе, направляющие – это горизонтальные и вертикальные линии, которые вы можете использовать для регулирования положения своих проектов. В отличие от слоев сеток, направляющие немного быстрее создавать и манипулировать ими.
Чтобы увидеть направляющие, включите отображение линейки (главное меню → вид → показать линейки). Когда вы наводите курсор на вертикальные или горизонтальные линейки (которые закреплены сверху и сбоку холста), появится число смещения, и вы можете щелкнуть по нему, чтобы создать направляющую.
Они отображаются в виде тонких красных линий и их можно перетащить на разные смещения – вы также можете щелкнуть несколько смещений на линейке, чтобы сразу задать несколько направляющих. Чтобы удалить направляющие, просто выделите их и нажмите “Удалить”, или перетащите их за пределы экрана. Направляющие также исчезнут, если вы отключите отображение линейки.
Одна интересная функция: если вы перетащите направляющую во фрейм, она станет направляющей уровня фрейма. Это позволяет держать вашу рабочую область немного чище для тех из вас, кто собирается злоупотреблять направляющими. Направляющие работают только с фреймами верхнего уровня, поэтому, если вы перетащите фрейм с направляющими в другой фрейм, направляющие исчезнут.
Если вы случайно измените положение направляющей на рабочей области, вы можете отменить это изменение с помощью сочетания клавиш command+z. Вы также можете подталкивать направляющую по пикселям клавишами со стрелками.
Как вам направляющие в Figma? Нам бы хотелось услышать ваши мысли об этой функции, поэтому пишите нам на support@figma.com или оставляйте комментарии. И, если вам, как и мне, интересна стажировка в Figma или работа на полную ставку — ознакомьтесь с нашей страницей вакансий!
Фигма обладает вполне стандартным набором линеек и привязок, но есть у нее и несколько полезных дополнительных функций.
Как включить линейку
Линейку можно включить из меню View > Rulers, либо сочетанием Shift + R.
Включение линеек из меню
Чтобы поместить линию на макет, надо перетянуть зажатую мышь с линейки в область макета. А чтобы удалить линию, надо перетянуть ее обратной в область линейки.
Как измерить расстояние между элементами
Чтобы измерить расстояние, следуйте простым инструкциям:
При этом элементы должны находиться в одном фрейме, а расстояния будут показаны как по вертикали, так и по горизонтали.
Также прямо в процессе вы можете двигать выбранный элемент с помощью стрелок клавиатуры, чтобы наиболее точно расположить его на экране.
Расстояние X и Y
В параметрах элемента есть его значения X и Y — они показывают расстояние от левого и верхнего края фрейма. При этом если речь идет об экземпляре компонента, то все его внутренние элементы будут считать расстояние от краев фрейма элемента.
В эти поля вы можете вручную вписать значения, но, кроме того, Фигма умеет считать простые математические выражения. Вы можете задать X = 100+500,а Фигма сама посчитает финальное значение 600. Это удобно, если вы располагаете несколько элементов с не «круглыми» значениями длин и высот.
Figma — хитрости работы с редактором
В Figma много неочевидных моментов, которые не всегда можно найти в документации или нащупать методом тыка. Рассказываем о хитростях редактора.
Посмотреть полный список горячих клавиш
Все доступные комбинации горячих клавиш можно найти в разделе Помощь и ресурсы. Вот здесь:
Показать/скрыть интерфейс
Такие элементы редактора, как верхняя панель управления, а также две боковые панели — слоев и настроек — занимают на экране много места и не дают в должной мере сосредоточиться на макете. Чтобы убрать все панели и оставить только рабочее пространство, достаточно нажать сочетание клавиш на клавиатуре —
Ctrl + \.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.
Выбор цвета
Одна из самых полезных опций.
Чтобы быстро взять нужный цвет из другого места экрана, нажмите клавишу I на клавиатуре.
За пределами рабочей области цвет взять не получится.
Поиск по всем командам Figma
Если вы знаете, что хотите найти в Figma, но не уверены, где именно это находится, нажмите сочетание клавиш Ctrl + /. Откроется основное меню с активной строкой поиска.
Замена значения сдвига объекта
В Figma по умолчанию значение сдвига объекта 8px, чтобы его поменять, перейдите в главное меню, затем выберите Preferences — Nudge Amount.
В появившемся окне введите нужное значение, например, 10.
Замена группы на фрейм
Если у вас есть несколько элементов, объединенных в группу, и вам понадобился фрейм таких же размеров и форм, выделите группу и на правой панели в выпадающем списке выберите Frame. Вот так: