/ figma-export

Утилита командной строки для экспорта цветов, типографики, значков и изображений из Figma в проект Xcode/Android Studio.

  • color — Figma’s цветовой стиль
  • типографика — стиль текста Figma
  • icon — компонент Figma с маленьким черным векторным изображением
  • image — Компоненты Figma с цветным изображением (Светлый/Темный)

Утилита поддерживает темный режим и SwiftUI.

Почему мы разработали эту утилиту:

  • Figma не поддерживает экспорт цветов и изображений в Xcode/Android Studio. Ручной экспорт занимает много времени.
  • Для простой синхронизации библиотеки компонентов с кодом

Статьи:

  • [habr.com] FigmaExport: как автоматизировать экспорт UI-Kit из Figma в Xcode и проекты Android Studio

Содержание:

  • Возможности
  • Результат
    • iOS
    • Android
  • Установка
    • Руководство
    • Homebrew
    • CocoaPods + Fastlane
  • Использование
    • Android
    • Аргументы
    • Конфигурация
    • Экспорт типографики
  • Требования к дизайну
  • Пример проекта
  • Содействие
  • Лицензия
  • Обратная связь
  • Авторы

Возможности

  • Экспорт света & темную цветовую палитру непосредственно в проект Xcode/Android Studio
  • Экспорт значков в проект Xcode/Android Studio
  • Экспорт изображений в проект Xcode/Android Studio
  • Экспорт стилей текста в проект Xcode
  • Sup порты Темный режим
  • Поддерживает SwiftUI и UIKit

Экспорт значков и изображений работает только для плана Figma Professional/Organization, потому что FigmaExport использует Общие командные библиотеки .

Результат

iOS

Цвета

Когда вы выполняете команду figma-export colors , figma-export экспортирует цвета из Figma непосредственно в ваш проект Xcode в папку Assets.xcassets.

Figma light Figma dark Xcode

Дополнительно будет создан следующий файл 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)!  } ... } 

Для SwiftUI будет создан следующий файл Swift для использования цветов из кода.

 import SwiftUI extension Color {static  var backgroundSecondaryError: Color {return Color (#function)} static var backgroundSecondarySuccess: Color {return Color (#function)} static var backgroundVideo: Color {return Color (#function)} ...} 

Если вы установите опцию useColorAssets: False в файле конфигурации, тогда будет сгенерирован следующий код:

 import UIKitextension  UIColor {static var primaryText: UIColor {if #available (iOS 13.0, *) {return UIColor {traitCollection -> UIColor in if traitCollection.userInterfaceStyle == .dark {return UIColor (red: 0.000, green: 0.000, blue: 0.000,  альфа: 1.000)} else {вернуть UIColor (красный: 1.000, зеленый: 1.000, синий: 1.000, альфа: 1.000)}}} else {вернуть UIColor (красный: 1.000, зеленый: 1.000, синий: 1.000, альфа: 1.000)  }} static var backgroundVideo: UIColor {return UIColor (красный: 0,46  7, зеленый: 0,012, синий: 1.000, альфа: 0,500)}} 

Значки

Значки будут экспортированы как файлы PDF или SVG с Изображение шаблона режим рендеринга.

Кроме того, будет создан следующий файл Swift для использования значков из кода.

 import UIKitextension UIImage {static var ic16Notification: UIImage {return UIImage (named: #function)!  } static var ic24ArrowRight: UIImage {вернуть UIImage (с именем: #function)!  } static var ic24Close: UIImage {вернуть UIImage (с именем: #function)!  } static var ic24Dots: UIImage {return UIImage (named: #function)!  } ...} 

Для SwiftUI будет создан следующий файл Swift для использования изображений из кода.

 import SwiftUIextension  Image {static var ic16Notification: Image {return Image (#function)} static var ic24Close: Image {return Image (#function)} static var ic24DropdownDown: Image {return Image (#function)} static var ic24DropdownUp: Image {return Image (  #function)} ...} ... VStack {Image.ic24Close Image.ic24DropdownDown} ... 

Изображения

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

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

 import UIKitextension UIImage {static var illZeroEmpty: UIImage {return UIImage (named: #function)!  } static var illZeroNetworkError: UIImage {вернуть UIImage (с именем: #function)!  } static var illZeroServerError: UIImage {вернуть UIImage (с именем: #function)!  } ...} 

Для SwiftUI будет создан файл Swift для использования изображений из кода.

Изображения с несколькими идиомами

Если имя изображения содержит идиому в конце (например, ~ ipad), оно будет экспортировано следующим образом:

Типографика

Когда вы выполняете команду figma-export typography figma-export генерирует 3 файла:

  1. расширение UIFont + extension.swift для UIFont, которое объявляет ваши пользовательские шрифты. Используйте эти шрифты как этот UIFont.header () , UIFont.caption1 () .
  2. LabelStyle.swift структура для создание атрибутов для NSAttributesString с настраиваемыми lineHeight и отслеживанием (межбуквенным интервалом).
  3. Label.swift файл, содержащий базовый класс и класс Label для каждого стиля текста. Например, HeaderLabel , BodyLabel, Caption1Label. Укажите эти классы в файлах xib в коде.

Пример этих файлов:

  • ./Примеры /Example/UIComponents/Source/Label.swift
  • ./Examples/Example/UIComponents/Source/LabelStyle.swift
  • ./Examples/Example/UIComponents/Source /UIFont+extension.swift

Android

Цвета будут экспортированы в values ​​/colors.xml и values-night/colors.xml файлы.

Значки будут экспортированы в с возможностью рисования как векторные файлы xml.

Векторные изображения будут экспортированы в каталоги drawable и drawable-night как векторные файлы xml . Растровые изображения будут экспортированы в форматы drawable - ??? dpi и drawable-night - ??? dpi в виде файлов png или webp .

Установка

Перед установкой вы должны предоставить токен личного доступа Figma через переменные среды.

export FIGMA_PERSONAL_TOKEN = value

Этот токен дает вам доступ к Figma API. Создайте личный токен доступа на странице своего профиля пользователя или на веб-сайте документации API Figma. Если вы используете Fastlane, просто добавьте следующую строку в fastlane/.env файл

FIGMA_PERSONAL_TOKEN = value

Руководство

Загрузите последний выпуск и прочтите Использование

Homebrew

  brew install RedMadRobot/formulas/ figma-export  

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

  brew install webp  

CocoaPods + Fastlane

Добавьте следующую строку в свой Podfile:

 pod 'FigmaExport'  

Это загрузит двоичные файлы FigmaExport и зависимости в Pods/ во время следующего выполнения pod install и будет позволяет вызывать его через Pods/FigmaExport/Release/figma-export в вашем Fastfile.

Добавьте следующую строку в ваш Fastfile:

 lane: sync_colors do Dir.chdir ("../") do sh "Pods/FigmaExport/Release/figma-export colors."  endend 

Не забудьте поместить файл figma-export.yaml в корень каталога проекта.

Запустите fastlane sync_colors для запуска FigmaExport.

Использование

  1. Откройте Terminal.app

  2. Перейдите (cd) в папку с бинарным файлом figma-export

  3. Запустите figma-export

    Для экспорта цветов используйте аргумент colors :

    ./figma-export colors -i figma-export.yaml

    Для экспорта значков используйте аргумент icons :

    ./figma-export icons -i figma-export.yaml

    Для экспорта изображений используйте аргумент images :

    ./figma-export images -i figma-export.yaml

    Для экспорта типографики (только iOS) используйте typography аргумент:

    ./figma-export typography -i figma-export.yaml

Android

В файле figma-export.yaml вы должны указать следующие свойства:

  • android.mainRes
  • android.icons.output , если вы хотите экспортировать значки
  • androi d.images.output , если вы хотите экспортировать изображения

Когда вы выполняете команду figma-export icons , FigmaExport очищает {android.mainRes}/{android.icons.output} перед экспортом всех значков.

Когда вы выполняете figma-export images , FigmaExport очищает каталог {android.mainRes}/{android.images.output} перед экспортом всех изображений.

Пример структуры папки:

  main/res/figma-export-icons/drawable/drawable-night/figma-export-images/drawable/drawable-night/ 

Перед первым запуском figma-export вы должны добавить путь к этим каталогам в файле приложения build.gradle .

  ... android {... sourceSets {main {res.srcDirs + = "src/main/res/figma-export-icons" res.srcDirs + = "src/main/ res/figma-export-images "}}}  

Аргументы

Если вы хотите экспортировать определенные значки/изображения, вы можете перечислить их имена в последнем аргументе выглядят так:

./figma-export icons "ic/24/edit" — экспортирует только один значок.

./figma-export icons "ic/24/edit, ic/16/notification" — экспортирует два значка

./figma-export icons "ic/24/videoplayer/*" — экспортирует все значки, имена которых начинаются с ic/24/videoplayer/

./figma-export icons — экспортирует все значки.

Аргумент -i или -input указывает путь к файлу конфигурации FigmaExport figma-export.yaml .

Configuration

Все доступные параметры конфигурации описано в файле CONFIG.md.

Пример файла figma-export.yaml для проекта iOS — Примеры/Example/figma-export.yaml

Пример файла figma-export.yaml для проекта Android — Примеры/AndroidExample/figma-export.yaml

Создать фигма-экспорт. yaml с помощью одной из следующих команд:

  figma-export init --platform androidfigma-export init --platform ios  

Он сгенерирует файл конфигурации в текущем каталоге.

Экспорт типографики

  1. Добавьте собственный шрифт в проект Xcode. Перетащите файл шрифта в проект Xcode, установите целевое членство и добавьте имя файла шрифта в файл Info.plist. Для получения дополнительной информации см. Документацию разработчика.
  2. Запустите figma- экспорт типографики для экспорта стилей текста
  3. Добавьте сгенерированные файлы Swift в свой проект Xcode. FigmaExport не добавляет файлы swift в файл .xcodeproj .
  4. Используйте сгенерированные шрифты и метки в своем коде. Например. button.titleLabel? .font = UIFont.body () , let label = HeaderLabel () .

Требования к дизайну

Если цвет, значок или изображение уникальны для платформы iOS или Android, они должны содержать слово «ios» или «android» в поле описания в свойствах. Если цвет, значок или изображение используются только дизайнером и их не следует экспортировать, в поле описания следует указать слово «none».

Стили и компоненты должны быть опубликованы в коллективной библиотеке.

Для figma-export colors

Если вы поддерживаете темный режим, ваш Проект figma должен содержать два файла. Один должен содержать темную цветовую палитру, а другой — светлую. Имена и количество цветов должны совпадать.

Пример

Файл Стили

Для значков figma-export

По умолчанию ваш файл Figma должен содержать фрейм с именем Icons , который содержит компоненты для каждого значка. Вы можете изменить имя фрейма в файле конфигурации, установив свойство common.icons.figmaFrameName .

Для изображений figma-export

Ваш файл Figma должен содержать фрейм с именем Иллюстрации , который содержит компоненты для каждой иллюстрации. Вы можете изменить имя фрейма в файле конфигурации, установив свойство common.images.figmaFrameName .

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

Если вы хотите указать варианты изображения для разных устройств (iPhone, iPad, Mac и т. д.), добавьте дополнительную метку ~ с именем идиомы. Например, добавьте постфикс ~ ipad :

Для figma-export typography .

Ваш файл Figma должен содержать текстовые стили.

Динамический тип

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

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

Например: у вас есть стиль текста header с шрифтом 20 pt. размер. Соответствующий собственный стиль текста iOS — «Заголовок 3». В поле описания вашего стиля текста header вы должны указать «Title 3».

Совет: шрифт на панели вкладок и стандартная панель навигации не должны поддерживать динамический тип .

Пример проекта

Примеры проектов iOS, проекта Android и примеров файлов Figma смотрите в папке «Примеры»

Contributing

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

Лицензия

figma-export выпущен под лицензией MIT. Подробности см. В ЛИЦЕНЗИИ.

Отзыв

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

Авторы

Даниил Субботин — d.subbotin@redmadrobot.com

Оцените статью
techsly.ru
Добавить комментарий