Экспортирование в Figma
Благодаря экспорту в Фигме можно вывести готовый созданный дизайн не только в едином изображении, но и с нарезанным макетом для верстки интерфейса. Также программа предлагает интеграцию с другими программами для дальнейшего создания сайта.
Для интеграции необходимо выбрать в основном меню раздел «Integrations». В онлайн версии в этом разделе будет одна программа – «Dribbble», в десктопной версии будут еще две дополнительные интеграции с «Zeplin» и «Avocode» — программы для верстки. Чтобы интегрировать свой проект, его необходимо выделить. Далее проект загрузится в выбранную вами программу.
Чтобы экспортировать проект используйте настройки в правой панели меню в разделе «Export».
Здесь есть несколько функций. Например, вы можете выставить размер экрана. Рядом находится раздел, в котором прикрепляется суффикс к имени файла. Это необходимо в том случае, если вы собираетесь экспортировать несколько версий макетов.
Еще одна функция – это выбор формата для экспорта.
Экспорт доступен в четырех форматах:
- Экспорт в JPG изображение. В настройках экспорта в данном формате вы сможете управлять масштабом, добавлять суффиксы, и при необходимости экспортировать насколько версий макета.
- Экспорт в PDF имеет свои особенности. В нем вы сможете выделять текст, который набран в макете. Кроме того, несмотря на большой вес таких документов, векторные объекты в нем прорисовываются с высокой точностью, независимо от масштабов приближения. Однако этот формат запрашивают редко при отправке макета.
- Экспорт в PSD – это перенос проекта в фотошоп. Так как фотошоп является более сложной программой, то и вписать для него интерпретатор будет достаточно сложно.
- Экспорт в SVG – это самый популярный вид загрузки макета. Для верстальщиков проще работать с данным форматом, так как он является векторным. Таким образом, картинка в этом формате будет иметь прорисовку нужного размера для разных устройств. Особенно эффективно использовать данный вид экспорта для мелких иконок.
Хотя экспорт макета в HTML недоступен, все же в разделе «CSS» верстальщик может просмотреть подсказки в виде свойств каждого объекта. Для этого необходимо выделить определенный фрейм или элемент, и просмотреть его «Code». Кроме того, в этом разделе доступна возможность увидеть параметры для разработчиков макетов для iOS и Android.
Итак, это заключительный урок данного цикла, из которого вы узнали о возможностях интеграции и экспорта проектов. Уделив внимание каждому из уроков, вы приобретете базовые навыки создания дизайна в Фигме. Практический опыт и профессионализм придет уже непосредственно при работе с программой.
Полезные ссылки:
- Бесплатный видеокурс по Figma от GeekBrains;
- Профессиональный курс Figma 2.0 для новичков от SkillBox;
- Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.
FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и Android Studio проекты
Если вы iOS- или Android-разработчик и дизайн вашего проекта разрабатывается в Figma, то скорее всего вы сталкиваетесь с проблемами при экспорте ресурсов: цвета выгрузить нельзя, а иконки и картинки экспортировать неудобно. В этой статье я расскажу, как можно облегчить себе жизнь и автоматизировать экспорт UI-Kit из Figma напрямую в Xcode и Android Studio.
Все больше команд мобильной разработки переходят на Figma. Раньше многие (и мы тоже) использовали связку Sketch + Zeplin или Figma + Zeplin. И это было удобно. Но когда на одном из проектов мы добавили поддержку темной темы, ситуация ухудшилась. Zeplin темную тему не поддерживает, поэтому приходится искать пути обхода, которые заставляют задуматься: а нужен ли теперь Zeplin? В этом случае Zeplin — трата времени дизайнера на поддержание и синхронизацию проектов в двух инструментах, а также дополнительные расходы для компании.
Отказавшись от Zeplin и переехав в Figma, мы (разработчики) начали испытывать боль при экспорте UI-Kit из Figma.
Figma, в отличие от Zeplin, никак не взаимодействует с Xcode и Android Studio. Плагины не позволяют Figma тесно интегрироваться с ними. Мы нашли утилиту командной строки, которая экспортировала цвета и текстовые стили, но нам она не подошла — не поддерживала экспорт картинок и тёмную тему. Именно поэтому я написал свою утилиту.
Но немного подробнее о проблемах.
Почему мобильным разработчикам неудобно экспортировать ресурсы из Figma
Проблема #1: отсутствие возможности экспортировать цвета
Что мы — разработчики видим, когда открываем UI-Kit в Figma? В самом простом случае — несколько кружочков разных цветов.
Но если проект большой и поддерживает темную тему, то, палитра будет содержать намного больше цветов:
Планируете добавить поддержку темной темы? Посмотрите, насколько больше может стать палитра
У Figma нет возможности экспортировать цвета. Максимум, что можно сделать, это выделить цвет и скопировать HEX значение. И если дизайнер что-то поменяет, то в случае большой палитры, разработчику придется потратить много времени, чтобы сравнить палитру в коде и в Figma.
Название цвета тоже не всегда получается скопировать нормально. Некоторые дизайнеры используют в названии стилей символ «/», но он не поддерживается в iOS и Android. Этот символ нужен, чтобы сгруппировать цвета по группам.
Пример. У цвета в Figma название background/primary. Для Android-разработчиков нужно указать цвет с названием background_primary, а для iOS-разработчиков — backgroundPrimary.
Ещё одна проблема с цветами — темная тема. Ни один инструмент дизайнера (Figma, Zeplin, Sketch) не позволяет иметь темную и светлую палитру одновременно. Тут есть два подхода: создать отдельный файл с темной палитрой либо хранить все цвета в одном файле, но называть их с постфиксом, например, background_primary_day, background_primary_night.
Чего мы хотим как разработчики: чтобы была возможность экспортировать цветовую палитру из Figma напрямую в Xcode или Android Studio проекты.
Проблема #2: неудобный экспорт иконок стандартными средствами
Тут тоже есть несколько затруднений.
Опять же, бывает, что дизайнеры в названии иконок используют символ «/», чтобы группировать иконки. Например, если иконку с названием ic/24/tab/profile экспортировать стандартными средствами Figma, мы получим вот такую вложенность.
С этим невозможно работать. Приходится переименовывать файл. Файл должен называться ic24TabProfile.pdf. Это для iOS-разработчиков.
У Android-разработчиков принято называть ресурсы в стиле snake_case. В таком случае у файла будет название ic_24_tab_profile.xml. Но Figma так не умеет.
Экспортированные из Figma иконки придётся вручную переносить в проект. Причем iOS-разработчикам недостаточно просто перенести их. Надо у каждой иконки проставить: Preserve Vector Data, Single Scale, Render as Template Image.
Чего мы хотим как разработчики: чтобы была возможность экспортировать все иконки из Figma напрямую в Xcode или Android Studio-проекты.
Проблема #3: неудобный экспорт иллюстраций стандартными средствами
Иконки — это маленькие векторные изображения, часто черно-белые, они могут перекрашиваться (системой или разработчиком) и изменять свой размер. Если включить accessibility, то некоторые иконки увеличиваются вместе с текстом. Основная их проблема — названия: символ «/», о котором я говорил выше и то, что iOS-разработчики используют названия в стиле camelCase, а Android разработчики — snake_case.
Иллюстрации — цветные большие изображения, которые отличаются в темной и светлой теме. В темной теме цвета должны быть приглушенными. Если иллюстрация слишком светлая, то выделяясь на темном, она будет «бить» ярким светом в глаза.
С иллюстрациями те же проблемы, что и с иконками, но есть ещё и парочка новых.
Android-разработчики экспортируют иконки и иллюстрации из Figma как SVG-файлы, а затем, встроенными в Android Studio средствами, конвертируют SVG-файлы в vector drawable XML-файлы. Если надо будет экспортировать 50 иконок или иллюстраций, то потребуется много времени, чтобы их все сконвертировать. Это можно автоматизировать.
iOS-разработчики экспортируют иллюстрации как растровые картинки в трех масштабах. Если приложение поддерживает темную тему, то всего будет 6 картинок. Вот так это выглядит в iOS-проекте:
А теперь представим, что из Figma мы выгрузили 50 иллюстраций. Получается, что у нас 50*6=300 PNG-картинок, которые надо вручную через drag&drop перенести в проект, а потом ещё их все, опять же, вручную переименовывать. Хочется ли это делать? — нет. Есть дела поважнее…
Чего мы хотим как разработчики: чтобы была возможность экспортировать все иллюстрации из Figma напрямую в Xcode или Android Studio-проекты.
Почему Zeplin не помог:
- он не поддерживает темную тему;
- не позволяет иметь несколько цветов с одинаковым HEX значением, но разными названиями: если называть цвета по месту их применения, то может получиться так, что два цвета будут иметь разные названия, но одинаковые HEX значения. Например, backgroundPrimaryPressed (цвет главного фона при нажатии) и backgroundSecondary (цвет второстепенного фона) должны иметь одинаковые HEX значения. Zeplin не позволит такое сделать. Есть обходной путь — изменить HEX значение на минимально возможную величину. Пример #F4F5F8 и #F4F5F7;
- требует дополнительные ресурсы дизайнера на синхронизацию макетов и UI-кит с Figma;
- он стоит дополнительных денег. Figma для организации стоит $12 на дизайнера в месяц. Если покупать Zeplin, то это ещё $10.75 на дизайнера в месяц;
Как мы автоматизировали экспорт ресурсов из Figma
Осознав, что так жить больше нельзя, я посмотрел, есть ли у Figma какое-нибудь API или возможность расширения плагинами, чтобы автоматизировать экспорт, и оказалось, что да, есть. У меня было два пути: написать Figma-плагин или использовать Figma API.
Figma-плагин работает непосредственно в приложении Figma. С помощью Figma API можно написать консольную утилиту. Плагин может не только читать информацию из Figma-файлов, но и вносить в них изменения. Из-за этого Figma-плагины требуют, чтобы у разработчика были права на редактирование файла. Figma API может только читать информацию из Figma-файлов.
Плагин пишется на JavaScript. Используя Figma API, можно писать обертку на чем угодно. Но Figma-плагин не может работать с файловой системой на компьютере разработчика (пользователя). Именно поэтому я не стал его делать.
Я iOS-разработчик, поэтому решил сделать консольную утилиту на Swift. Начал с прототипа, который должен экспортировать цветовую палитру из Figma прямо в Xcode-проект. Через пару недель он был готов. Это было нечто. Я запустил свою утилиту и через несколько секунд получил в Xcode всю палитру. Вот так должен работать идеальный экспорт из Figma 🙂
Спустя пару месяцев моя утилита для экспорта ресурсов из Figma была готова. Ссылку на неё вы можете найти в конце статьи.
Как происходит процесс экспорта
Цвета
Разработчик вызывает команду figma-export colors . Если это iOS-проект, то цвета экспортируются в папку Assets.xcassets.
Дополнительно создается Color.swift-файл, чтобы можно было использовать цвета прямо из кода.
import UIKit extension UIColor < static var backgroundSecondaryError: UIColor < return UIColor(named: #function)! >static var backgroundSecondarySuccess: UIColor < return UIColor(named: #function)! >static var backgroundVideo: UIColor < return UIColor(named: #function)! >. > Если это Android проект, то цвета экспортируются в файл values/colors.xml и values-night/colors.xml, если темная тема поддерживается.
values/colors.xml
#7701FF #8A80FF #D9DCE1 #FFFFFC #A680FE #FFFFFE #101828 #A5ACBD . values-night/colors.xml
#6F01EC #7D6AF0 #3F334B #E6D9F6 #E6D9F3 #544761 #E6D9F5 #7B6F98 . Иконки
Разработчик вызывает команду figma-export icons.
Если это iOS-проект, то иконки будут экспортированы как PDF-файлы с параметром Render as Template Image, в папку Assets.xcassets. Если иконки будут использоваться в UITabBar, то можно дополнительно указать Preserve Vector Data, чтобы поддерживать Accessibility.
Если это Android-проект, то иконки будут экспортированы в папку drawable как векторные xml-файлы. Под капотом утилита конвертирует SVG-файлы в XML с помощью официальной утилиты vd-tool (vector-drawable-tool), которая используется в Android Studio.
Иллюстрации
Разработчик вызывает команду figma-export images.
Будет все тоже самое, только картинки экспортируются как PNG-файлы.
Если это Android-проект, то иллюстрации будут экспортированы в папку drawable и drawable-night как векторные xml-файлы.
Как можно настроить экспорт
У FigmaExport есть множество настроек, которые хранятся в конфигурационном файле и передаются при запуске утилиты.
./figma-export colors -i figma-export.yaml
В конфигурационном файле указываются параметры для iOS, для Android и общие параметры. Также там указывается идентификатор Figma-файла, где расположены цвета, иконки и картинки. Идентификатор файла можно найти в адресной строке, если открыть его в браузере.
Вот, например, адрес нашего UI-Kit: www.figma.com/file/GVHjNNE8PKKRf1KtnMPY9m/RTC-Key-UI-kit
Идентификатор файла lightFileId в нашем случае: GVHjNNE8PKKRf1KtnMPY9m
Пример конфигурационного файла для iOS-проекта:
--- figma: lightFileId: shPilWnVdJfo10YFo12345 darkFileId: KfF6DnJTWHGZzC9Nm12345 ios: # Path to the Assets.xcassets directory xcassetsPath: "./Resources/Assets.xcassets" # Parameters for exporting colors colors: # Should be generate color assets instead of pure swift code useColorAssets: True # Name of the folder inside Assets.xcassets where to place colors (.colorset directories) assetsFolder: Colors # Path to Color.swift file where to export colors for accessing colors from the code (e.g. UIColor.backgroundPrimary) colorSwift: "./Sources/Presentation/Common/Color.swift" # Color name style: camelCase or snake_case nameStyle: camelCase # Parameters for exporting icons icons: # Name of the folder inside Assets.xcassets where to place icons (.imageset directories) assetsFolder: Icons # Icon name style: camelCase or snake_case nameStyle: camelCase # [optional] Enable Preserve Vector Data for specified icons preservesVectorRepresentation: - ic24TabMain - ic24TabHistory - ic24TabProfile # Parameters for exporting images images: # Name of the folder inside Assets.xcassets where to place images (.imageset directories) assetsFolder: Illustrations # Image name style: camelCase or snake_case nameStyle: camelCase Пример конфигурационного файла для Android-проекта:
--- figma: lightFileId: shPilWnVdJfo10YFo12345 darkFileId: KfF6DnJTWHGZzC9Nm12345 android: mainRes: "./main/res"Как организовать Figma-файл для автоматизированного экспорта ресурсов
Чтобы UI-Kit можно было автоматизированно выгрузить необходимо соблюдать следующие правила.
Общие
- Если цвет, иконка или иллюстрация уникальны для iOS или Android у неё в свойствах, в поле description должно быть указано “ios” или “android”. Если цвет, иконка или иллюстрация не должны быть доступны для экспорта, то у них в свойстве description будет “none”. Таким образом FigmaExport определит, что надо экспортировать в iOS-проект, что в Android проект, а что вообще не надо экспортировать.
Пример. В iOS и Android иконка «поделиться» выглядит по-разному. На скриншотах ниже указано, что иконка ic24ShareIos будет экспортирована только в iOS-проект т.к. в свойстве Component description указано ios, а иконка ic24ShareAndroid будет экспортирована только в Android-проект;
- Иконки и иллюстрации должны быть компонентами.
- Цветовые стили и компоненты должны быть опубликованы в Team Library.
- Экспортируются только те иконки и иллюстрации, которые добавлены во фреймы Icons и Illustrations.
Названия ресурсов
Цвета, иконки и иллюстрации можно называть любыми именами содержащими буквы a-z, A-Z и символы «_» и «/».
Так как в коде названия переменных не могут иметь символ “/”, FigmaExport автоматически заменяет его на символ «_». Далее полученная строка конвертируется в camelCase для iOS либо в snake_case для Android.
| Название цвета | iOS | Android |
|---|---|---|
| button/pressed | buttonPressed | button_pressed |
| background/primaryPressed | backgroundPrimaryPressed | background_primary_pressed |
| Название иконки | iOS | Android |
|---|---|---|
| ic/24/sound_off | ic24SoundOff | ic_24_sound_off |
| Название иллюстрации | iOS | Android |
|---|---|---|
| img/demo/camera_archive | imgDemoCameraArchive | img_demo_camera_archive |
Для консистентности и удобства можно, например, называть все иконки в своем формате — ic/размер/название. Пример — ic/24/open. А иллюстрации — img/группа/название. Пример — img/zero/nointernet. Про цвета можно прочитать в статье «дизайнеру приложений: как создать и передать в разработку тёмную тему».
В конфигурационном файле figma-export.yaml можно с помощью регулярных выражений включить валидацию названий перед экспортом. Если какой-либо ресурс будет иметь неправильное название, FigmaExport сообщит об этом.
common: colors: # RegExp pattern for color name validation before exporting nameValidateRegexp: '^[a-zA-Z_]+$' # RegExp pattern for: background, background_primary, widget_primary_background icons: # RegExp pattern for icon name validation before exporting nameValidateRegexp: '^(ic)_(\d\d)_([a-z0-9_]+)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon images: # RegExp pattern for image name validation before exporting nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name
Темная тема
Если ваш проект поддерживает темную тему, нужно создавать отдельный файл с UI-компонентами, где будет находиться темная цветовая палитра и темные иллюстрации.
Цвета
В Figma-файле цвета должны быть оформлены как цветовые стили и опубликованы в Team Library.
Для удобства разработчиков желательно сделать таблицу всех цветов, где будет указано, какой цвет и где используется.
Иконки
В Figma-файле должен быть Frame с именем Icons. В этом Frame должны находиться компоненты для каждой иконки. Пример:
Иллюстрации
В Figma-файле должен быть Frame с именем Illustrations, который содержит компоненты для каждой иллюстрации. Пример:
Итог
Благодаря FigmaExport мы избавились от множества проблем при работе с Figma. Экспорт ресурсов теперь занимает секунды. Несколько примеров, как нам облегчило жизнь использование утилиты.
1. В одном из проектов было 52 иконки. Дизайнер решил, что их все нужно привести к единому стилю. После того, как он их обновил, нам предстояло их обновить у себя.
Как бы мы их обновляли вручную: экспортировали все иконки из Figma как zip-файл, переименовали 52 файла, перенесли иконки в проект, проставили все необходимые свойства, проверили, что ничего не забыли. На это бы ушло не менее часа времени.
Как мы их обновили c FigmaExport: запустили команду figma-export icons. Через 10 секунд все изменения подтянулись, мы запустили приложение на симуляторе и увидели, что все иконки заменились.
2. На одном из спринтов мы решили запилить новую фичу. В UI-Kit дизайнер добавил четыре новые иконки, удалил две старые иконки, добавил два новых цвета.
Вместо того чтобы потратить один час времени на обсуждение с дизайнером, что он изменил в UI-Kit, ручном экспорте иконок и цветов, мы просто запустили команду figma-export colors и figma-export icons и через Git увидели что удалилось, что добавилось, а что изменилось. И сразу стали верстать макеты, используя новые иконки и цвета.
3. Делали фичу, в которой надо было сделать расширенный онбординг с 4 разделами, в каждом из которых до 7 страниц с картинками.
Ручной экспорт занял бы много времени. Выполнив команду figma-export images мы менее, чем за минуту, получили в проекте все эти картинки, готовые к использованию.
Несколько минусов
- Необходимо договариваться с дизайнером о том, как надо хранить цвета, иконки, картинки в UI-Kit, чтобы их можно было автоматизировано выгрузить.
- Экспорт работает только для тех компонентов, которые добавлены в Team Library, поэтому у дизайнеров должна быть платная подписка на Figma.
- добавить возможность экспорта текстовых стилей,
- добавить возможность экспорта растровых картинок для Android,
- добавить поддержку SwiftUI.
Ссылка на утилиту
Буду рад, если вы попробуете мою утилиту. Вопросы, пожелания, фидбек — пишите мне на mail@subdan.ru
Как экспортировать из Фигмы
Фигма является одним из самых популярных инструментов для дизайна интерфейсов, который широко используется в индустрии веб-разработки и дизайна. Эта платформа предоставляет различные инструменты и функции, которые позволяют дизайнерам создавать и прототипировать свои проекты.
Экспорт графических элементов из Фигмы является одной из неотъемлемых частей процесса разработки. В этом подробном руководстве мы рассмотрим, как правильно экспортировать графические элементы, такие как иконки, изображения и векторные файлы, из Фигмы.
Ключевыми шагами процесса экспорта будут использование инструментов «Экспорт» и «Экспорт настройки». Мы также рассмотрим различные настройки и форматы экспорта, которые доступны в Фигме, и объясним, как выбрать наиболее подходящие варианты для ваших нужд.
Корректный экспорт из Фигмы может значительно упростить работу над дизайном и разработку веб-сайтов и мобильных приложений. Зная основные принципы и методы экспорта из Фигмы, вы сможете максимально эффективно использовать этот инструмент и сэкономить время в процессе вашей работы.
Как экспортировать макеты из Фигмы: подробное руководство
В этом руководстве мы расскажем вам о различных способах экспортирования макетов из Фигмы, чтобы вы могли поделиться своей работой или передать ее на следующий этап создания продукта.
1. Экспорт в PNG или JPEG формате.
Для экспорта макета в растровый формат (PNG или JPEG), вам нужно выбрать нужные вам элементы и затем щелкнуть правой кнопкой мыши на выбранной области. В контекстном меню вам нужно выбрать «Экспортировать» -> «Экспортировать как PNG» или «Экспортировать как JPEG». После этого вы сможете выбрать папку, куда сохранить файл, и выбрать опции экспорта, такие как масштаб и качество изображения.
2. Экспорт в SVG формате.
SVG (масштабируемая векторная графика) формат позволяет сохранить макет в виде векторного изображения, которое можно масштабировать без потери качества. Чтобы экспортировать макет в SVG формате, вам нужно выбрать нужные вам элементы и затем щелкнуть правой кнопкой мыши на выбранной области. В контекстном меню выберите «Экспортировать» -> «Экспортировать как SVG». Затем выберите папку, куда сохранить файл, и настройте опции экспорта, такие как размер и цвет.
3. Экспорт в PDF формате.
PDF (портативный формат документа) является удобным способом экспортирования макетов из Фигмы, поскольку он поддерживается на многих устройствах и программных платформах. Чтобы экспортировать макет в PDF формате, вам нужно выбрать нужные вам элементы и затем щелкнуть правой кнопкой мыши на выбранной области. В контекстном меню выберите «Экспортировать» -> «Экспортировать как PDF». Затем выберите папку, куда сохранить файл, и настройте опции экспорта, такие как размер страницы и качество изображения.
4. Экспорт в CSS код.
Если вам нужно получить CSS код для использования веб-разработчиком, вы можете экспортировать стили из Фигмы в CSS формате. Для этого вам нужно выбрать элементы с нужными стилями и щелкнуть правой кнопкой мыши на выбранной области. В контекстном меню выберите «Экспортировать» -> «Стили CSS». Затем укажите папку для сохранения файла и настройте нужные опции экспорта, такие как формат вывода и префиксы.
Теперь, когда вы знаете различные способы экспортирования макетов из Фигмы, вы сможете удобно поделиться своими работами с другими или передать макеты на следующий этап создания продукта.
Выбор макета для экспорта
Чтобы выбрать макет, откройте проект в Фигме и перейдите на нужную страницу. Вы можете использовать панель слоев, чтобы быстро переключаться между макетами. Просто выберите нужный макет из списка доступных страниц.
Если вам нужно экспортировать несколько макетов, вы можете выбрать их одновременно. Для этого зажмите клавишу Ctrl (или Cmd на Mac) и щелкните на нужные макеты. После этого все выбранные макеты будут включены в процесс экспорта.
Выбрав нужные макеты для экспорта, вы можете перейти к следующему шагу – выбору формата экспорта.
Экспорт макета в нескольких форматах
Фигма предоставляет возможность экспортировать макет в различных форматах, чтобы удовлетворить требования различных проектов и платформ.
Вот несколько часто используемых форматов экспорта:
- PNG: Этот формат является стандартным для изображений в интернете и предоставляет возможность сохранения макета в виде растрового изображения с прозрачностью или без нее. Это особенно полезно при экспорте иконок или элементов дизайна, которые могут быть использованы в веб-разработке или мобильных приложениях.
- JPG: JPG представляет собой другой распространенный формат для изображений в интернете, но он не поддерживает прозрачность. Он обычно используется для фотографий или дизайна с непрозрачным фоном.
- SVG: SVG, или масштабируемая векторная графика, идеально подходит для масштабирования без потерь качества. Этот формат особенно полезен для логотипов, иконок и элементов дизайна, которые должны выглядеть четко на различных устройствах с разными разрешениями.
- PDF: PDF является универсальным форматом для обмена документами, и его можно использовать для сохранения макета целиком или для создания документации проекта.
Чтобы экспортировать макет в одном из этих форматов, выберите необходимые фреймы или слои, затем щелкните правой кнопкой мыши и выберите «Экспортировать» из контекстного меню. В появившемся окне вы сможете настроить параметры экспорта, такие как размер, формат и качество изображения.
После настройки параметров экспорта нажмите кнопку «Экспорт», и Фигма сохранит выбранные слои или фреймы в выбранном формате.
Множество форматов экспорта, предоставляемых Фигмой, позволяют вам сохранить ваш макет в том виде, который лучше всего подходит для вашего проекта или целевой платформы.
Экспорт слоев и компонентов
В Фигме вы можете экспортировать не только целые экраны, но и отдельные слои и компоненты. Это очень полезно, если вам нужно получить изолированное изображение какого-то элемента дизайна или экспортировать его в другой формат.
Чтобы экспортировать слои или компоненты, выполните следующие шаги:
- Выделите необходимые слои или компоненты на холсте.
- Нажмите правой кнопкой мыши на выделенные слои и выберите пункт «Экспортировать» в контекстном меню.
- Выберите нужный формат экспорта из предложенных, например, PNG, JPEG или SVG.
- Укажите путь и имя файла, в который будет экспортирован слой или компонент.
- Нажмите кнопку «Экспортировать» для начала экспорта.
Экспортированные слои или компоненты будут сохранены в указанном вами месте в выбранном формате. Вы можете использовать их в других приложениях или веб-сайтах в соответствии с вашими потребностями.
Обратите внимание, что Фигма также позволяет настроить экспорт для каждого слоя или компонента отдельно. Вы можете выбрать разрешение, маску, цветовую схему и другие параметры экспорта. Это очень удобно, если вам нужно получить изображение с определенными характеристиками.
Теперь вы знаете, как экспортировать слои и компоненты в Фигме. Эта функция поможет вам сохранить и использовать ваш дизайн в любых проектах!
Настройка параметров экспорта
При экспорте из Фигмы важно правильно настроить параметры экспорта, чтобы получить желаемый результат. Вот некоторые полезные настройки:
Формат файла: Выберите формат файла, который необходим для экспорта, такой как PNG, SVG, JPEG и т. д. У каждого формата есть свои особенности, поэтому выбирайте соответствующий вашим требованиям и потребностям.
Размер: Укажите нужные вам размеры экспортируемого изображения. Можно выбрать уже предопределенные размеры, такие как для мобильных устройств или веб-страниц, а также указать свои собственные размеры.
Разрешение: Установите разрешение изображения, выраженное в пикселях на дюйм или пунктах на дюйм (dpi или ppi). Высокое разрешение обеспечивает большую четкость и детализацию изображения, но также может увеличить размер файла.
Настройки цвета: Фигма позволяет экспортировать изображения с различными цветовыми профилями. Выберите подходящий профиль в зависимости от ваших нужд, таких как sRGB для веб-дизайна или CMYK для печати.
Сетка пикселей: Если вы работаете с пиксельной графикой, установите сетку пикселей для создания четкого и резкого изображения, соответствующего пиксельной сетке.
Экспорт слоев: Выберите, какие слои или группы слоев должны быть экспортированы. Вы можете экспортировать все слои, выбрать определенные слои или создать маркированные слои для экспорта.
Помните, что настройки экспорта могут быть разными в зависимости от используемой версии Фигмы и наличия установленных плагинов. Регулярно обновляйте Фигму и плагины, чтобы иметь доступ к последним функциям экспорта.
Скачивание экспортированных файлов
После успешного экспорта вашего дизайна из Фигмы вы можете скачать экспортированные файлы на свой компьютер. Это позволяет вам легко самостоятельно сохранить ваш проект и делиться им с другими людьми.
Для скачивания экспортированных файлов выполните следующие шаги:
- Откройте проект в Фигме и выберите нужные вам слои, группы или объекты, которые хотите экспортировать.
- Щелкните правой кнопкой мыши на выбранные элементы и выберите опцию «Экспорт».
- В открывшемся окне выберите формат файла, в котором вы хотите сохранить ваш дизайн (например, PNG или SVG).
- Нажмите кнопку «Скачать» и выберите место на вашем компьютере, куда сохранить файл.
После выполнения этих шагов выбранные вами элементы будут экспортированы и сохранены на вашем компьютере в выбранном формате. Вы можете использовать эти файлы для различных целей, например, для печати, веб-разработки или в дальнейшей работе в графическом редакторе.
Как сохранять в Фигме: форматы JPG, PNG, PDF, SVG, FIG
В этой инструкции вы узнаете, как сохранять проекты или отдельные части вашей работы в фигме на компьютер в следующих форматах:
- JPG — самый популярный формат. Подходит для сохранения любых изображений, фотографий, макетов и т.д.
- PNG — формат подходит для картинок с прозрачным фоном.
- SVG — векторный формат. Подходит для экспорта иконок, иллюстраций, логотипов и т.д.
- PDF — если нужно создать какой-либо документ или презентацию.
- FIG — внутренний формат Figma, для сохранения на компьютер.
- Массовый экспорт — подойдет, если нужно сохранить сразу много картинок, фото, иконок или других элементов в представленных форматах выше.
Примечание: делать действия, чтобы постоянно сохранять работу в фигме нет необходимости. Все ваши работы автоматически сохраняются на серверах фигмы. Эта инструкция нужна если вы хотите к примеру сохранить дизайн макет для портфолио или экспортировать какой-либо элемент для других целей.
Быстрая инструкция по экспорту файлов в Фигме
Любое изображение, картинку, фото, фрейм, макет, файл или проект целиком можно экспортировать с помощью функции экспорта. Выберите нужный элемент и нажмите напротив надписи «Export» иконку «+». После этого вы сможете выбрать нужный формат.
Нажав на надпись «Prewie» вы можете сделать предварительный просмотр экспортируемого элемента. Чтобы сохранить элемент на компьютер нажмите на кнопку «Export НАЗВАНИЕ ВЫБРАННОГО ЭЛЕМЕНТА».
Изменение масштаба экспортируемых файлов
Если хотите сохранить проект размерами в 2 раза меньше, то стоит выбрать другой масштаб. Изначально стоит 1X — это значит, что ваш проект будет сохранятся один к одному.
Если для макета размерами 1920 x 1000 px, поставить значение 0.5X, то масштаб сохраненного файла будет в два раза меньше (960 x 500 px). Аналогично объект увеличится в 2 раза, если поставить 2X.
Сохранить проект или картинку в Figma в формате JPG
Чтобы сохранить любой объект, проект или дизайн макет в Figma выделите его. К примеру возьмем первый экран Landing Page. В правой панели нажмите на иконку плюсика напротив надписи «Export». Выберите из списка формат JPG. После этого нажмите на кнопку экспорта и выберите место для сохранения на компьютере.
Сохранение из фигмы файлов в формате PNG
Выберите изображение или картинку для экспорта. Для наглядности возьмем изображение женщины, которая расположена в круге. Нажмите плюс рядом с надписью «Export» в правой панели и выберите формат PNG из списка.
Если нажмем на экспорт и сделаем предпросмотр нажав на надпись «Prewie», то будет видно, что вокруг изображения появился фон в виде шахматной доски. Это означает прозрачность.
Экспорт в формате SVG
Чтобы сохранить элементы из фигмы в формате SVG, выберите элемент. В правой панели нажмите + напротив «Export» и нажмите на кнопку экспорта. Выберите место для сохранения на рабочем столе или компьютере.
Как сохранить в Фигме в формате PDF
Для примера экспортируем несколько моих работ и создадим небольшое портфолио (подойдет для отправки заказчику).
- Чтобы сделать экспорт в PDF с множеством страниц нажмите на меню «гамбургер» слева, сверху.
- Выберите «File» —> «Export Frames to PDF» и сохраните на рабочий стол.
Важное примечание: в этом случае ничего не нужно выделять. Экспортируются все созданные вами ранее фреймы в вашем из вашего проекта.
Экспорт в PDF выбранных элементов:
Если вы выберите какие-либо элементы и нажмете справа на иконку плюсика, то можете сохранить несколько файлов в PDF по отдельности. В этом случае не будет создан единый файл в виде книги или брошюры.
Как сохранить проект в Фигме в формате FIG (внутренний формат)
Импорт файлов в Figma в формате «.fig»
Файл в формате «.fig» можно загрузить в фигму, если перейти во все ваши проекты раздел «Drafts» и перетащить к остальным проектам. Также есть иконка «Import» сверху, справа.
Массовый экспорт из Figma
Как называть файлы, чтобы сохранить их в разные папки при экспорте
Если вы сохраняете файлы для разработки сайтов, то лучше называть их на английском языке. Например «Woman», «Illustration» и т.д.
Если хотите сохранить файл в отдельную папку то переименуйте слой следующим образом:
- 1/Wooman
- 2/Landing Page
- 3/Illustration
Файлы сохранятся в отдельные папки на вашем компьютере с названиями «1», «2», «3».
Далее поговорим о форматах и для каких элементов они подходят.
Важное дополнение:
Если вы хотите передать макет вашему заказчику, то нет необходимости сохранять всё на компьютер и отправлять (это прошлый век). Проще поделиться ссылкой на ваш проект. Это можно сделать нажав на кнопку сверху, справа «Share» (1) и скопировав ссылку (2).
Также можно поделиться вашим проектом в режиме презентации. Для этого нажмите на иконку «Play», сверху, справа. Затем нажмите на кнопку «Share prototype» и скопируйте ссылку нажав на «Copy link»
P.S. В этой статье вы узнали о том, как сохранять файлы в Figma в различных форматах.
Хотите получить бонусный урок быстрому созданию дизайн макетов Landing Page в Figma? Жмите на эту ссылку и получите 24 раздела для прототипирования и дизайна Landing Page в Figma.
P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).