Создание приложения на основе холста в Figma
В этой статье вы узнаете о создании приложений на основе холста с использованием существующего дизайна Figma. Figma — это графический редактор и инструмент для проектирования, который можно использовать для создания прототипов предполагаемого дизайна программного обеспечения. После окончательного оформления дизайна используйте функцию Figma в приложение для создания приложений непосредственно из макета и дизайна, созданных в файле Figma.
Предварительные условия
- У вас должен быть доступ к файлу дизайна Figma, который вы хотите использовать для создания приложения.
- Файл Figma должен быть разработан с использованием Create Apps из UI-комплекта Figma.
- Если вы используете UI-комплект впервые, ознакомьтесь с обзором этого функционала, возможностями UI-комплекта и его компонентами.
- Power Apps не сохраняет предоставленные вами файлы Figma. Файлы Figma обрабатываются только в памяти для создания приложения.
Создать приложение
- Войдите в Power Apps.
- В Начать с выберите Figma.
- Введите имя приложения.
- Введите URL-адрес файла Figma. Дополнительная информация: Делитесь файлами и прототипами
- Укажите личный маркер доступа к Figma. Дополнительные сведения: Создание личного маркера доступа
Примечание Power Apps использует ваш личный маркер доступа для подключения к вашей странице или фрейму Figma с разрешением Может просматривать (только для чтения) и не вносит никаких изменений внутри Figma.
См. также
- Устранение распространенных ошибок
- Компоненты, поддерживаемые UI-комплектом
Обратная связь
Отправить и просмотреть отзыв по
Шаблон мобильного приложения — помощник туриста
Шаблон мобильного приложения для Figma. Тематика — помощник туриста.
Хотите научится создавать подобные дизайн-макеты? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.
Посмотрите еще шаблоны
Установка
После открытия файла — Нажмите в названии файла на стрелочку, которая раскрывает меню и выберите «Dublicate to you drafts»
Создание дизайна мобильного приложения с Figma.
Мобильные устройства — телефоны, планшеты, другие гаджеты — стали неотъемлемой частью нашей жизни. Разрешение их экранов могут варьироваться от 200 до 3000+ пикселей, что добавляет пикантности процессу разработки дизайна. Однако, графический редактор Figma является прекрасным средством проектирования актуальных и отзывчивых интерфейсов мобильных приложений. Он обладает всеми необходимыми удобствами и полезными инструментами для веб-дизайнера.
Автор вебинара Алла Штогрина покажет на практике, как использовать весь потенциал Figma, реализуя дизайн с нуля до уровня полноценного макета, готового к передаче разработчикам.
Если вы еще не знакомы с Figma, рекомендуем посмотреть запись вебинара «Веб-дизайн с Figma. Легкий старт», в котором Алла Штогрина дала основы работыс этим инструментом.
План вебинара:
- Особенности мобильного дизайна.
- Отрисовка прототипов, подготовка набросков того, как будут выглядеть экраны.
- Проектирование User Flow.
- Отрисовка эскизов для wireframes.
- Подбор подходящей цветовой гаммы и графических элементов.
- Прототипирование.
- Анимация и микровзаимодействие.
- Тестирование на этапе дизайна.
- Передача разработчикам.
Целевая аудитория:
Этот вебинар будет интересен новичкам в веб-дизайне, которые ознакомились с инструментами, необходимыми для работы.
Покупай подписку с доступом ко всем курсам и сервисам
Библиотека современных IT знаний в удобном формате
Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.
- Все видеокурсы на 3 месяца
- Тестирование по 10 курсам
- Проверка 5 домашних заданий
- Консультация с тренером 30 мин
- Все видеокурсы на 6 месяцев
- Тестирование по 16 курсам
- Проверка 10 домашних заданий
- Консультация с тренером 60 мин
- Все видеокурсы на 1 год
- Тестирование по 24 курсам
- Проверка 20 домашних заданий
- Консультация с тренером 120 мин
Как подготовить макет интерфейса мобильного приложения к передаче в разработку?
Или «как сделать вашего разработчика счастливым, а финальное приложение точно сверстанным по макету».
Published in
5 min read
Jun 14, 2018
Каждому, кто так или иначе связан с мобильной разработкой, знакомы проблемы и разногласия, возникающие на стыке интересов программиста и дизайнера мобильного приложения, когда речь заходит о том, как правильно подготовить и передать дизайн в разработку.
Проанализировав свой многолетний опыт работы, я с уверенностью могу сказать, что:
Дизайн мобильного приложения считается законченным только тогда, когда разработчику переданы все необходимые для его верстки материалы, а это далеко не только один макет.
Основное, что должен получить от вас разработчик:
- Дизайн-макет приложения, выполненный в Sketch, Figma, XD, Photoshop, Illustrator, в виде файла или ссылки.
- Дизайн-макет приложения, загруженный в Zeplin, Sympli или другой инструмент для «просмотра макета глазами разработчика», в виде ссылки.
- Карту экранов приложения, выполненную в XMind, MS Visio или другом похожем по функционалу инструменте, в виде файла или ссылки.
- Кликабельный прототип, выполненный в Marvel, InVision или другом похожем по функционалу инструменте (Sketch, XD, Figma, Framer, UXPin, и пр.) в виде сслыки.
- Иконки и иллюстрации использованные в дизайн-макете для всех плотностей экранов в виде файлов: mdpi, hdpi, xhdpi, xxhpdi, xxxhdpi — для Android и @1x, @2x, @3x— для iOS.
- Шрифты, использованные в дизайн-макете, в виде файлов.
- Видео-файлы со всеми нестандартными анимациями или ссылки на примеры таких анимаций из других приложений.
Немного расскажу поподробней про каждый пункт.
Непосредственно сам макет
Дизайн-макет приложения может быть выполнен в любом удобном вам и вашей команде инструменте. Как правило, это Sketch, XD, Figma, Photoshop или Illustrator. Другие инструменты are fine as well, но лучше использовать что-то популярное.
В чём бы вы ни работали, ещё раз проверьте, всё ли внутри макета в порядке, а именно:
- Используются pt в качестве единиц измерения.
- Используется сетка 8×8 pt для Android и 10×10 pt для iOS и к ней включена привязка (а не к пикселю).
- Все артборды созданы для базового ppi (в @1x или mdpi).
- Все артборды, группы и, по возможности, все слои адекватно проименованы («Rectangle copy 59» или «Group 12» быть не должно).
- Все иконки и иллюстрации помечены как «exportable» и имеют понятные имена.
- Нет пустых или недоделанных экранов, элементов.
�� Зачем это? Это просто контроль качества. Если макет сделан некорректно, то это так или иначе приведет к конфликту или правкам. Лучше сделать хорошо сразу.
Макет для «просмотра глазами разработчика»
Макет нужно загрузить в Zeplin или Sympli. Ну или сгенерировать ссылку для разработчика, если вы работаете в Figma или Sketch.
�� Зачем это? Это делается для того, чтобы разработчик мог посмотреть все спецификации (отступы, размеры, цвета, названия шрифтов и пр.) и при этом не открывать оригинальный файл с дизайн-макетом в редакторе, которого, к слову, у него может и не быть.
Карта экранов
Карта экранов — это изображение, которое отражает в себе все экраны приложения и все возможные переходы между ними.
Для каждого из переходов желательно обозначить действие, инициирующее его (к примеру, нажатие кнопки или определенный жест пользователя). Каждый из экранов должен быть определенным образом обозначен (например, номер или название).
Карту экранов лучше всего рисовать в инструментах для составления mindmap’ов. Мои любимые, например, XMind и MS Visio.
�� Зачем это? Карта экранов поможет разработчику разобраться с логикой приложения. Из нее он сразу получит ответы в стиле «что будет, если нажать на это?».
Кликабельный прототип
Кликабельный прототип — это интерактивный макет, цель которого в данном случае также показать разработчику, как должно работать приложение, согласно вашей задумке.
�� Зачем это? Если разработчик будет сам экспортировать иконки, то что-то обязательно пойдет не так. Поедет цвет, иконки станут мыльными и так далее. К тому же, он будет вынужден потратить время на то, чтобы разобраться с тем, как их экспортировать и как назвать, вместо того, чтобы кодить. Лучше избежать этого и сделать всё самому. Тогда разработчик просто скопирует всё в Android Studio или XCode и будет счастлив.
Шрифты
Нужно сложить в отдельную папку все шрифты, использованные в макете. Если это платный шрифт, то ссылку на место, где его можно купить. Но лучше не использовать платные шрифты.
�� Зачем это? Если разработчик будет искать использованные вами шрифты сам, то есть вероятность того, что он найдет не тот шрифт или, например, устаревшую версию шрифта. Лучше всего будет просто потратить 2 минуты и сохранить шрифты отдельно.
Видео с анимациями
Если вы сделали очень клевую нестандартную анимацию интерфейса в After Effects или Principle и хотите её реализовать, то её тоже нужно экспортировать и передать разработчику. Можно как в видео-формате, так и в формате GIF.
Если же вы просто хотите сделать «как вот в этом приложении», то не забудьте положить ссылки на примеры таких анимаций.
�� Зачем это? Если разработчик не увидит вашей анимации, он просто её не реализует и ваша задумка окажется лишь задумкой.
Итого
Таким образом, финальный идеальный ZIP-архив, который отдается счастливому разработчику должен иметь примерно такую структуру:
Кроме этого в файле ReadMe.TXT или в сопроводительном письме не забудьте добавить ссылки на:
- Кликабельный прототип, выполненный в Marvel, InVision (или в Sketch, XD, Figma, Framer, UXPin, и пр.).
- Дизайн-макет приложения, загруженный в Zeplin, Sympli (или в другой инструмент для «просмотра макета глазами разработчика»).
Буду рад вашим комментариям �� и аплодисментам ��.
- Я на Behance: behance.net/AlexMomotov
- Я в ВК: vk.com/momotov_sasha
- Я в Telegram: t.me/AlexMomotov