Figma экспорт android studio

/ 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 использует Общие командные библиотеки .

Результат

Цвета

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

Figma light	Figma dark	Xcode

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

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

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

Значки

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

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

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

Изображения

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

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

Для 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 файл

Руководство

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

Homebrew

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

CocoaPods + Fastlane

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

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

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

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

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

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

Перейдите (cd) в папку с бинарным файлом 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 очищает / перед экспортом всех значков.

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

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

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

Аргументы

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

./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 с помощью одной из следующих команд:

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

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

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 и т. д.), добавьте дополнительную метку

с именем идиомы. Например, добавьте постфикс

Для figma-export typography .

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

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

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

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

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

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

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

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

Contributing

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

Лицензия

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

Отзыв

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

Источник

Figma экспорт android studio

FigmaConvertXib is a tool for exporting design elements from Figma and generating file to a projects

.Xib iOS Xcode / .Xml Android-Studio .

Watch video with examples

Each step of generation is using the following base parameters:

• accessToken : an access token string that is needed to execute Figma API requests (see Figma access token).
• project id : URL of a Figma file, which data will be used to generate code (see Figma file).

Figma access token

Authorization is required to receive Figma files. The authorization is implemented by transferring a personal access token. This token could be created in a few simple steps:

1. Open account settings in Figma.
2. Press «Create a new personal access token» button in the «Personal Access Tokens» section.
3. Enter a description for the token (for instance, «FigmaConvertXib»).
4. Copy the created token to the clipboard.

Then Compile / Run the project FigmaConvertXib.xcodeproj and paste the received access Token in the accessToken field. It is enough to define it only in the base section if this token allows access to all Figma files, which appear in the configuration.

Add Figma project id

Open the URL figma project, and copy its project-id Then open the application, click button-plus, and paste the received project-id

Complection Generation Xib Xml to projects Xcode Android

• Open project FigmaConvertXib.xcodeproj
• And go to folder / Figma / Xib / result_ios.xib

• Open project FigmaConvertAndroidXml
• And go to folder / app / res / layout / result_android.xml

Currently supports the following entities:

• ✅ iOS (View / Layer) | Android (ConstraintLayout)
  • Rectangle
  • Frame
  • Page
  • Group
• ✅ iOS | Android (ImageView)
  • Image Fill
  • Component
• ✅ iOS (Label) | Android (TextView)
  • Text
• ✅ Vector
  • Ellipse
  • Polygone
  • Star
• ❌ Vector
  • Line
  • Line Arrow
  • Curves

• ✅ Solid
  • Images
  • Gradient Linear
  • Gradient Radial
• ❌ Gradient Angular
  • Gradient Diamond

• ✅ (Only in iOS)
  • Shadow Inner
  • Shadow Drop
  • Blur Layer
• ❌ Blur Background

Export vector icons

In order to export vector-icons in Figma, уou need to select vector layers and click create component .

Will begin downloading images.

• / Figma / Xib / images.xcassets
• / app / res / drawable

In .xib .xml it will be generated into an ImageView

FigmaConvertXib is available under the MIT license. See the LICENSE file for more info.

Источник