Mac os ui kit figma

Figma Kit в помощь дизайнеру

Актуальные тренды веб-дизайна постоянно сменяют друг друга. Одни компании стараются успеть в погоне за капризной модой, другие игнорируют ее и остаются верны своим предпочтениям. Но есть и такие тенденции, которые не теряют своей популярности уже несколько лет, например, лаконичный минимализм или реалистичные текстуры.

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

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

Вся информация постоянно обновляется в облаке, сохраняя каждое изменение и отображая актуальный вид проекта на данный момент. Любое изменение можно отменить, вернувшись к предыдущему этапу работы. Отметим, что для создания более сложной графики Figma использовать не стоит – отдайте предпочтение специализированным программам. Для расширения возможностей можно использовать один из множества плагинов или создать собственный.

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

Редактор хорош не только для дизайнеров. В нем можно работать SMM-менеджерам и разработчикам, вести различные проекты и разрабатывать шаблоны рекламы для Facebook.

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

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

1. Surge iOS UI Kit – UI Kit приложения iOS для крипто и кошелька

Экономические последствия пандемии активизировали интерес людей к альтернативным вариантам заработка, в том числе, к инвестициям и криптовалюте. А, значит, приложение крипто/кошелек будет востребовано пользователями.

UI-kit Surge представляет собой набор из 45 экранов pixel perfect, совместимых со Sketch и Figma одновременно. Одно из главных преимуществ этого пользовательского интерфейса — простая кастомизация (вы можете менять динамические компоненты, размеры, а также глобальные стили цвета и шрифта).

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

• 45 экранов (разрешение iPhone X);
• Родные шрифты (SF Pro Display);
• Дизайн Pixel-perfect дизайн;
• Хорошо реагирует на изменение размера;
• Можно полностью настроить под себя;
• Прост и комфортен для пользователей;

2. Storefront iOS UI Kit – UI Kit электронной коммерции iOS для Figma и Sketch

Бывают такие интернет-магазины, в которые хочется возвращаться снова и снова. И этот вариант точно поможет создать именно такую площадку e-commerce. Плавные формы, лаконичные иконки, приятные цвета — такой дизайн не раздражает покупателя, а вызывает симпатию с первого взгляда.

Storefront― многофункциональный вариант пользовательского интерфейса iOS для онлайн-продаж. В вашем распоряжении 25 видов экранов, каждый из которых можно настроить под себя, верстка pixel perfect и многое другое.

При необходимости, вы можете кастомизировать данный кит с помощью изменения цветов, стилей текста и добавления своего контента.

Особенности:

• 25 вариантов экранов (разрешение iPhone X);
• Глобальные стили цвета и текста;
• Множество кастомизируемых компонентов;
• Шрифты Apple SF;
• Частые обновления;

3. Fitness Pro: Website UI Kit

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

UI-kit Fitness Pro позволяет создать удобный лэндинг для тех, кто неравнодушен к спорту. С его помощью можно получить общую информацию о спортивном направлении, записаться на занятие, и присоединиться к группе единомышленников.

Полнофункциональный набор дизайна пользовательского интерфейса, включает в себя файлы дизайна, красивые 3D-иллюстрации и макеты, которые можно редактировать в Figma.

В этом пакете вы найдете адаптивный и полностью настроенный шаблон целевой страницы с 72 готовыми экранами, требующими минимальной доработки. Обилие разного контента, максимально увеличивает количество конечных вариантов макета.

• 72 эксклюзивных готовых шаблона;
• 246 перемещаемых блоков;
• 400+ компонентов;
• Редактируемые 3D-иконки + Макеты (для Figma);
• Полностью настраиваемый;
• Светлый и темный режимы;

Чем хороши UI-kit?

Они позволяют без лишних усилий привести проект к единообразию и сделать так, чтобы все его составляющие гармонично сочетались друг с другом. Готовые наборы являются своеобразной базой знаний — вам не придется объяснять новому коллеге, как именно должен выглядеть тот или иной элемент. С их помощью работа над проектом значительно сокращается, ведь дизайнер может использовать готовые элементы, не тратя время на отрисовку каждой иконки или детали.

Говоря, о проектировании UI и UX, нельзя обойти вниманием прототипирование, позволяющее максимально сократить трудозатраты на тестирование той или иной функции, приложения или сайта. Это позволяет понять, актуальна ли идея, до начала полноценной разработки, а также улучшить опыт будущих пользователей.

Ниже мы рассмотрим несколько вариантов инструментов (помимо Figma) для создания интерактивной модели для дизайна и концепции продукта.

Есть ли жизнь после Figma?

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

В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X. Это позволяет значительно экономить место на диске.

• элегантный графический дизайн;
• управление стилем, масштабированием и дизайнерскими шаблонами;
• множество вариантов градиентных заливок, режимов смешивания и др.
• возможность интеграции с другими ПО и веб-сервисами;
• высокий уровень оптимизации;
• продуманный интерфейс нарезки графики;
• возможность использования плагинов;
• простое и быстрое начало работы;

Justinmind является оптимальным инструментом прототипирования, для тех, кто с особым вниманием относится к пользовательскому опыту. Он значительно ускоряет работу над прототипом и делает обсуждение идей быстрее и комфортнее.

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

Источник

Mobile UI Kit

Speed up your design workflow and create a beautiful app with Figma’s fully customizable mobile UI kit.

Create lovable products

This free mobile UI kit was thoughtfully crafted and documented by Figma designer, Joey Banks. Use these tailor-made components to build interfaces for chat applications, social networks, calendars, and more.

Fully customizable

Each screen is fully customizable (styles, components, text, color, size), carefully layered, and grouped to make your work as comfortable and simple as possible. This kit takes advantage of Figma components, making it easy to customize and make your own.

Start designing mobile interfaces in Figma today

Design, prototype, and build mobile apps in Figma. With our mobile ui kit, you can spend less time on the interface, and more time nailing the user experience.

Ready to share your moodboard with others? Just share a link. The file will open in the browser, ready for collaboration.

Figma lives inside the browser which means there is nothing to install. Jump straight into the file and get to work.

Figma is the free mobile design tool trusted by top design teams like Uber, Square, and Twitter.

Speed up your design process

Kickstart your design process with Figma’s mobile UI kit. You can use it to speed up your design process, help ideate on new screen ideas, or even as the foundation for your future outstanding app.

Mobile UI Kit users also like.

Share ideas, diagrams, and processes with your team in realtime.

Get this template

Speed up your design workflow with our component based wireframe kit.

Get this template

Easily conduct visual research and find your aesthetic with this mood board.

Источник

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

Даня Субботин, железный iOS-разработчик Redmadrobot, рассказывает, как можно облегчить себе жизнь и начать экспортировать ресурсы из Figma напрямую в Xcode и Android Studio за несколько секунд.

Все больше команд мобильной разработки переходят на Figma. Раньше многие (и мы тоже) использовали связку Sketch и Zeplin или Figma и Zeplin. Это было удобно.

Но когда на одном из проектов мы добавили поддержку темной темы, то ситуация ухудшилась. Zeplin её не поддерживает, поэтому приходится искать пути обхода, которые заставляют задуматься: а нужен ли он нам теперь?

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

Отказавшись от Zeplin и переехав в Figma, мы (разработчики) начали испытывать боль при экспорте UI-Kit из Figma. Figma, в отличие от Zeplin, никак не взаимодействует с Xcode и Android Studio. Плагины не позволяют Figma тесно интегрироваться с ними.

Мы нашли утилиту командной строки, которая экспортировала цвета и текстовые стили, но нам она не подошла — не поддерживала экспорт картинок и тёмную тему. Именно поэтому я написал свою утилиту. Но немного подробнее о проблемах.

Что мы — разработчики видим, когда открываем 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 проекты.

Тут тоже есть несколько затруднений.

Опять же, бывает, что дизайнеры в названии иконок используют символ «/», чтобы группировать иконки. Например, если иконку с названием 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-проекты.

Иконки — маленькие векторные изображения, часто черно-белые, они могут перекрашиваться (системой или разработчиком) и изменять свой размер. Если включить 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-проекты.

• он не поддерживает темную тему;
• не позволяет иметь несколько цветов с одинаковым HEX значением, но разными названиями: если называть цвета по месту их применения, то может получиться так, что два цвета будут иметь разные названия, но одинаковые HEX значения. Например, backgroundPrimaryPressed (цвет главного фона при нажатии) и backgroundSecondary (цвет второстепенного фона) должны иметь одинаковые HEX значения. Zeplin не позволит такое сделать. Есть обходной путь — изменить HEX значение на минимально возможную величину. Пример #F4F5F8 и #F4F5F7;
• требует дополнительные ресурсы дизайнера на синхронизацию макетов и UI-кит с Figma;
• стоит дополнительных денег. Figma для организации стоит $12 на дизайнера в месяц. Если покупать Zeplin, то это ещё $10.75 на дизайнера в месяц.

Осознав, что так жить больше нельзя, я посмотрел, есть ли у 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-файл, чтобы можно было использовать цвета прямо из кода.

Если это Android-проект, то цвета экспортируются в файл values/colors.xml и values-night/colors.xml, если темная тема поддерживается.

Разработчик вызывает команду 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-проекта:

Пример конфигурационного файла для Android-проекта:

Чтобы 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.

Для консистентности и удобства можно, например, называть все иконки в своем формате — ic/размер/название. Пример — ic/24/open. А иллюстрации — img/группа/название. Пример — img/zero/nointernet. Про цвета дизайн-команда рассказывала в статье «Дизайнеру приложений: как создать и передать в разработку тёмную тему».

В конфигурационном файле figma-export.yaml можно с помощью регулярных выражений включить валидацию названий перед экспортом. Если какой-либо ресурс будет иметь неправильное название, FigmaExport сообщит об этом.

Если ваш проект поддерживает темную тему, нужно создавать отдельный файл с 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.

Буду рад, если вы попробуете мою утилиту. Вопросы, пожелания, фидбек — пишите мне на d.subbotin@redmadrobot.com

Красавчики! Дизайн приложений давно стал своего рода «программированием» и требует аналогичных подходов. Молодцы что двигаетесь в этом направлении.

Круто, скачал. Спасибо

Здорово, очень вдохновляет!

Прекрасная статья, помогла понять некоторые взаимосвязи с разработчиком! От души

Каждый раз вместо Фигма читаю Фигня.

Иронично, поэтому переводить остальные его советы не будем.

🎂 As I am turning 37, I put together a list of 3 undervalued and 7 overvalued things in life.

1. Sleep. Sleep gives a boost to immunity, creativity and psychological well-being.

2. Nature. Nature is the environment that we are biologically designed to feel good in.

🎂 As I am turning 37, I put together a list of 3 undervalued and 7 overvalued things in life.

1. Sleep. Sleep gives a boost to immunity, creativity and psychological well-being.

2. Nature. Nature is the environment that we are biologically designed to feel good in.

3. Solitude. Being alone offers the freedom to make spiritual and intellectual breakthroughs.

1. Big cities. Big cities are sources of pollution, crime and noise. It’s good to have access to their resources, but advisable to live outside their borders.

2. Restaurants. Restaurants offer the slowest and least efficient way to eat. Cooking at home allows for healthier diets and more control over ingredients.

3. Hot weather. Sunny weather can bring about not only a lax attitude, but also a risk of cancer and faster aging. Colder temperatures, on the contrary, clarify spirit, body and mind.

4. Fashion. The endless quest to conform with ever-changing trends is expensive and unnecessary. Focusing on comfortable clothes makes life simpler and frees space for things that matter.

5. Real estate. Buying real estate often limits one’s choices and is a questionable investment. Renting gives more freedom to move and explore different locations.

6. Social media. The incessant flow of junk cluttering our minds from social media decreases our happiness and creativity. Disconnecting from these internet services is the best thing we can do on any given day.

7. Celebrity advice. Famous people often give unwarranted advice outside their fields of expertise. For all important things in life, it’s best to rely on hard science and expert opinion.

Источник