Пошаговое руководство по работе в Figma. Урок по созданию мобильного приложения
Если вы дизайнер, делающий первые шаги в мире UI-дизайна и ищущий подходящий инструмент, который поможет вам создавать красивые, функциональные интерфейсы, вы не ошибетесь, выбрав Figma.
Я всегда говорил, что нет лучшего способа изучить инструмент дизайна, чем просто погрузиться в него и что-то создать.
Именно этим мы и займемся в этой статье, я покажу, как создать в Figma простой экран мобильного приложения.
Знакомство с интерфейсом Figma
Самое замечательное в Figma – это чистый и интуитивно понятный интерфейс.
Я использовал практически все существующие инструменты дизайна, и со временем интерфейс многих из них начал казаться немного раздутым. Интерфейс Figma плотный и компактный, и его приятно использовать каждый день.
Позвольте мне провести быстрый обзор интерфейса Figma…
Панель инструментов
Панель инструментов Figma содержит множество инструментов, которые помогут вам в работе над вашими проектами, и то, какие инструменты будут отображаться на панели, зависит от того, что вы выбрали на холсте.
Вот краткий список инструментов (с соответствующими сочетаниями клавиш), которые вы будете использовать чаще всего…
Панель слоев (Layers Panel)
В левой части экрана находится панель слоев.
Она дает вам легкий доступ к слоям, компонентам и страницам, используемым внутри вашего текущего файла Figma.
Любые фреймы, группы или объекты, которые вы добавляете на холст, будут отображаться на панели слоев.
Панель компонентов (Assets Panel)
Внутри панели компонентов у вас будет легкий доступ ко всем вашим компонентам.
Компоненты – это повторно используемые элементы дизайна, такие как кнопки или иконки, а также более сложные элементы интерфейса, такие как меню или модальные окна.
Чтобы ускорить рабочий процесс, вы можете быстро выбрать компонент на панели активов и перетащить его на холст, чтобы создать экземпляр.
Холст (Canvas)
Холст.
Здесь представлены ваши проекты.
Все просто, поэтому двигаемся дальше…
Панель свойств (Properties Panel)
В правой части экрана находится панель свойств, которая позволяет вам просматривать и настраивать свойства любого элемента, который вы в данный момент выбрали, а также получать доступ к настройкам прототипа ваших текущих файлов, а также просматривать код любого выбранного элемента.
Вкладка «Дизайн» (Design)
Вкладка «Дизайн» позволяет легко просматривать, добавлять, удалять или изменять свойства элементов вашего дизайна.
Слой, который вы в настоящее время выбрали, будет определять, какие настройки доступны вам на вкладке «Дизайн».
Вкладка «Прототип» (Prototype)
Вкладка «Прототип» дает доступ ко всем функциям прототипирования, которые может предложить Figma, и позволяет применять переходы между фреймами, оживляя ваши статичные дизайны.
Вкладка «Inspect»
Вкладка «Inspect» на панели свойств позволяет увидеть элементы вашего дизайна в коде, в следующих доступных форматах:
Android
А теперь о хорошем …
Проектирование экрана мобильного приложения
Обратите внимание: прежде чем мы углубимся в этот раздел, убедитесь, что вы загрузили элементы дизайна, необходимые для выполнения заданий в этой статье здесь. (Там также есть готовый файл, на который вы можете ссылаться).
Открыв Figma, создайте новый документ, щелкнув значок плюса (+) в правом верхнем углу экрана.
На появившемся экране выберите вариант iPhone 11 Pro / X и нажмите Create File.
Затем, когда фрейм не выбран, щелкните имя файла на панели инструментов и переименуйте его в «Mobile App Screen».
Миниатюра карточки
Выберите инструмент «Прямоугольник» (R), нарисуйте фигуру примерно 375px в ширину и 406px в высоту и поместите ее в верхней части фрейма. Вы также можете дважды проверить ее правильность, убедившись, что для нее установлено значение 0 по осям X и Y на панели свойств.
На панели свойств кликните по иконке Independent Corners и выберите 30 для радиусов скругления левого нижнего и правого нижнего углов прямоугольника.
Теперь давайте поместим изображение внутри нашей фигуры, используя очень полезную функцию «Place Image».
Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, выберите файл preview.jpg из папки Images, а затем кликните по фигуре, чтобы вставить изображение прямо в нее.
Давайте применим цветное наложение к нашему изображению, чтобы добавить немного контраста между ним и элементами, которые мы вскоре разместим поверх него.
На панели «Заливка» (Fill) щелкните значок «Плюс» (+), чтобы добавить новую заливку. Убедитесь, что выбран параметр Solid.
Во всплывающем меню введите следующее Hex-значение (#): 303030 и установите непрозрачность (opacity) на 50%.
Наконец, давайте добавим легкую тень (drop shadow) к миниатюре и придадим глубины нашему дизайну.
На панели «Effects» щелкните значок плюс (+), выберите «Drop Shadow» в меню выбора, а затем настройте следующие параметры эффекта…
Панель навигации (Navigation Bar)
Для панели навигации мы вставим пару иконок. Одну для возврата к предыдущему экрану, а другую для добавления статьи в закладки.
Открыв папку Icons, просто перетащите на фрейм следующие иконки, по одной…
Выделив обе иконки, перейдите на панель «Selection Colors» и измените Hex-значение цвета на белый (FFFFFF).
Удерживая нажатой клавишу Alt, чтобы измерить расстояние между элементами дизайна, поместите каждую иконку на 32px от левого и правого краев фрейма.
Затем, выбрав обе иконки, перейдите на панель свойств и выберите «Align Vertical Centers» (Alt + V).
Когда обе иконки все еще выделены, используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать. Это просто придаст аккуратный и организованный вид на панели слоев.
Всегда переименовывайте и группируйте по ходу дела. Это экономит кучу времени.
Теперь, удерживая Alt, поместите эту новую группу в 56px от верхнего края основного фрейма.
Уведомление
Как видите, для иконки закладки мы выбрали версию с заливкой, как если бы пользователь только что добавил публикацию в закладки.
Давайте добавим простое уведомление, которое может отображаться пользователю при нажатии на иконку закладки. Ненавязчивый визуальный сигнал, показывающий, что действие (нажатие на иконку) было распознано и выполнено.
Инструментом «Прямоугольник» (R) нарисуйте фигуру размером 131px x 33px, а затем закруглите углы до 24.
На панели «Заливка» (Fill) задайте Hex-значение (#) 303030 и уменьшите его непрозрачность до 60%.
На панель «Эффекты» (Effects) добавим этому маленькому уведомлению легкое размытие фона, чтобы добавить визуальный интерес и немного большего контраста между изображением и текстом, который мы скоро разместим в нем.
На панели «Эффекты» щелкните значок плюс (+) и в меню выбора выберите Background Blur (Размытие фона).
Щелкните значок настроек эффекта (Effect Settings) и измените силу размытия (Blur Strength) на 6.
Пришло время написать немного текста и настроить еще несколько свойств, не так ли?
Используя инструмент «Текст» (T), добавьте новый текстовый элемент и напечатайте слово «Bookmarked» (добавлено в закладки).
Затем на панели свойств текста (Text Properties) примените следующее…
Выбрав текст, и слой фигуры, используйте параметры выравнивания (Alignment) в верхней части панели свойств, чтобы выровнять элементы как по горизонтали, так и по вертикали относительно друг друга.
Используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать.
Затем, наконец, используйте Ctrl + Click или Cmd + Click, чтобы выбрать группу уведомлений и изображение, а затем используйте параметры выравнивания, чтобы выровнять уведомление по горизонтали и вертикали внутри изображения.
Аватар + иконки социальных сетей
Давайте разместим аватар, имя автора и иконки социальных сетей на свои места.
Выберите инструмент Эллипс (O) и нарисуйте фигуру размером 48 x 48px. Вы также можете удерживать клавишу Shift, чтобы сохранить пропорции.
Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, чтобы использовать инструмент «Поместить изображение» (Place Image), выберите avatar.png из папки «Images» и поместите его внутри фигуры.
Выделив фигуру, перейдите на панель свойств и добавьте следующее…
Stroke –
Drop Shadow –
Давайте добавим еще несколько текстовых слоев как для имени автора, так и для даты публикации статьи …
Используя инструмент «Текст» (T), создайте 2 новых текстовых слоя, отредактируйте текст соответствующим образом, а затем примените к имени автора следующие свойства…
А для Даты публикации используйте следующее…
Используя клавишу Alt, расположите текстовые слои относительно друг друга, давая им небольшое пространство.
Затем используйте инструменты выравнивания, чтобы они были выровнены по левому краю относительно друг друга, и, наконец, сгруппируйте их (Ctrl + G или Cmd + G).
Выровняйте эту новую группу на 16px справа от аватара, а затем, выбрав новую группу и аватар, нажмите Alt + V, чтобы выровнять их по вертикали относительно друг друга.
Давайте добавим пару иконок социальных сетей …
Как и раньше, просто перетащите по одной иконки Instagram и Twitter в свой дизайн и, используя комбинацию инструментов выравнивания и клавиши Alt, выровняйте их по вертикали относительно друг друга (Alt + V) и разместите их. На расстоянии 16px.
Сгруппируйте иконки (Ctrl + G или Cmd + G) и переименуйте (Ctrl + R или Cmd + R).
Выделив группу иконок социальных сетей, группу текстовых слоев и аватар, используйте Alt + V, чтобы выровнять их по вертикали относительно друг друга.
Сгруппируйте (Ctrl + G или Cmd + G) все эти элементы вместе, а затем поместите эту новую группу на 32px от левого и правого края фрейма и на 32px от нижнего края изображения.
Заголовок + контент
Давайте добавим небольшой заголовок и фрагмент контента, чтобы еще немного дополнить наш дизайн …
Используя инструмент «Текст» (T), создайте простой заголовок, а затем на панели свойств примените следующее…
Затем, используя инструмент «Текст» (T) еще раз, создайте абзац контента, который будет отображаться под заголовком со следующими свойствами …
Мы установили цвет этого блока текста на темно-серый (#7D7D7D), чтобы он красиво контрастировал с заголовком, добавлял немного визуального интереса, но все еще был доступен на белом фоне для пользователей с ослабленным зрением.
Удерживая клавишу Alt, наведите курсор на два слоя, чтобы увидеть расстояние между ними, и разместите их на расстоянии 8px друг от друга.
Не забудьте сгруппировать (Ctrl + G или Cmd + G) и переименовать (Ctrl + R или Cmd + R), а затем разместите эту новую группу на 32px от левого края фрейма и на 32px от нижней части аватара группы.
Форма комментария
ОК. Давайте подведем итоги и добавим в наш дизайн небольшую форму / поле комментария.
Снова вызвав инструмент «Прямоугольник» (R), нарисуйте фигуру размером 263 x 40px, задайте ей радиус скругления углов 24 и заливку #E4E4E4.
Вставьте текстовый слой (T), измените формулировку (например, «Добавить комментарий…»), а затем добавьте следующие свойства…
Выделив и фигуру, и текстовый слой, выровняйте их по вертикали относительно друг друга (Alt + V), а затем сгруппируйте (Ctrl + G или Cmd + G) их и переименуйте (Ctrl + R или Cmd + R).
Поместите иконку на 8px справа от поля комментария, а затем, выбрав группу полей и иконку, выровняйте их по вертикали относительно друг друга (Alt + V).
Ну, наконец-то. Сгруппируйте 2 элемента (поле комментария и иконку). И поместите эту новую группу на 32px от нижней части текста, а также от левого и правого краев фрейма.
Вот и все, наш маленький экран мобильного приложения готов.
Я уже много раз говорил: начинайте проектировать, а потом проектируйте еще. Это лучший способ изучить новый инструмент и одновременно улучшить свои дизайнерские навыки.
Инструменты прототипирования в 2021 году
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в моём Telegram-канале. Подпишитесь, мне будет очень приятно.
Прототипирование является ключевой частью проектирования UI и UX. Дизайнеры могут создать прототипы как с высокой, так и с низкой точностью, в зависимости от их назначения. Таким образом, прототипы дают возможность опробовать функцию, приложение или сайт. Их основная цель — протестировать идеи до того, как они будут полностью разработаны, а также улучшить пользовательский опыт.
Существует множество способов продемонстрировать дизайнерское взаимодействие с многочисленными инструментами прототипирования, которые доступны дизайнерам.
Мы рассмотрим топ-10 новейших инструментов, которые помогут UX/UI-разработчикам создать интерактивную модель для дизайна и концепции продукта.
Adobe XD — один из самых популярных инструментов среди UI/UX-дизайнеров. Данная программа функционирует в качестве универсальной платформы для создания вайрфреймов, дизайна сайтов, мобильных приложений, голосовых интерфейсов и т.д. Adobe XD позволяет командам коллективно работать между платформами в режиме реального времени, получая ценные комментарии и отзывы напрямую от клиентов.
Figma предоставляет простой в использовании редактор перетаскивания, чтобы создавать вайрфреймы и практические прототипы. В программе также имеется много элементов для анимации прототипов.
Большинство дизайнеров уже знакомы с данным UI-инструментом. Несмотря на то, что Figma считается программой по проектированию UX, она также имеет программное обеспечение для быстрого прототипирования. Дополнительные функции включают такие плагины, как Figmotion и Autoflow, а также Arc Tool и Vector Networks.
На сегодняшний день Webflow набирает популярность, поскольку ускоряет работу разработчиков, предлагая семантический код, и дизайнеров. По сути, платформа помогает в прототипировании, одновременно создавая живой сайт. Webflow — это широко известный способ прототипирования для разработки чувствительных к программированию без кода сайтов. Дизайнеры могут использовать встроенные сложные функции для высокоточных проектов, которые Webflow может преобразовать в готовый к производству сайт одним нажатием кнопки.
Sketch — одна из наиболее широко используемых программ для создания пользовательского интерфейса и прототипирования среди миллионов программистов по всему миру. Это одно из лучших современных приложений для разработки всех форм пользовательского интерфейса. Платформа напоминает усложненную и широко поддерживаемую версию Figma. Однако программа доступна только для iOS.
Это векторная платформа с элегантным графическим интерфейсом, которая позволяет управлять стилем, масштабированием и дизайнерскими шаблонами. Помимо этого, Sketch обладает широким спектром границ, градиентных заливок, режимов смешивания и т.д. Программа поддерживает целый производственный процесс, в котором дизайнеры разрабатывают высококачественные проекты.
InVision — еще одно веб-приложение, которое ориентировано на архитектуру. Оно предлагает все необходимые материалы для перехода от варфрейминга до UI-дизайна, а также полезные методы для лучшей командной работы и прототипирования.
InVision — один из самых больших и популярных инструментов прототипирования, которые используются сегодня дизайнерами и ведущими предприятиями. Платформа поддерживает изменения дизайна в режиме реального времени, а также быстро собирает ответную реакцию команд, позволяя разработчику организовать свой рабочий процесс. Такой подход упрощает проектную работу.
Axure RP сочетает эффективные инструменты проектирования, SVG-импорт, интеграцию Sketch и Adobe XD с прототипированием мирового уровня. Вы можете легко обмениваться прототипами Axure RP и монтажными областями Adobe XD, быстро рисовать и собирать входные данные поверх экранов, проверять макет, получать CSS-фрагменты и загружать ресурсы, а также конвертировать статические изображения в динамические прототипы Axure Cloud.
Платформа также облегчает комплексную документацию, автоматизированные красные линии и передачу материалов разработчикам без необходимости писать какой-либо код.
Framer известен своей универсальностью, разносторонним интерфейсом, функциональным дизайном и понятными шаблонами. Данный инструмент расширяет дизайнерскую динамику от метода перетаскивания, поскольку эта платформа основана на коде и использует CoffeeScript для создания прототипов.
Недостатком данного инструмента является усложненный интерфейс и рабочий процесс, поэтому разработчикам и дизайнерам приходится тратить много времени на его изучение.
Origami Studio — приложение для macOS, созданное и используемое Facebook. Существует также аналог мобильного приложения, который позволяет просматривать прототипы на реальном устройстве.
Facebook применяет данный инструмент прототипирования на ежедневной основе. В 2013 году Origami Studio стал доступен всему миру. Изначально он работал с Quartz Composer, но ни для кого не секрет, что эта часть Xcode-среды — не лучший способ прототипирования. Поэтому в прошлом году Facebook предоставил Origami Studio — предыдущий прототип инструмента, который работает с их собственной средой. Его производительность значительно повысилась благодаря этому шагу, но, к сожалению, он по-прежнему доступен только для пользователей Mac.
Marvel называет себя «дизайнерской платформой для цифровых продуктов». Хотя это утверждение не является полностью верным, программа отлично подходит для создания прототипов мобильных и цифровых приложений.
Marvel обладает всеми доступными ресурсами для разработки всевозможных мобильных и сетевых интерфейсов — от концепций до шаблонов. Платформа также облегчает взаимодействие жестов для создания анимированных приложений для смартфонов.
Justinmind — инструмент прототипирования, который позволяет дизайнерам сфокусироваться на пользовательском опыте. Платформа идеально подходит для создания вайрфреймов и адаптивного прототипирования, которые совместимы с различными разрешениями экранов. Дизайнерам стоит правильно использовать полный набор шаблонов и UI-библиотек, чтобы создать высокоточные прототипы. Более того, JustInMind помогает работать с формами и списками данных, не требуя при этом умения писать код.
Ниже представлено еще несколько платформ, которые не попали в список лучших инструментов для создания прототипов.
1. UXPin объединяет дизайн, прототипирование и совместную работу в одном месте на Windows, Mac или в любом браузере.
2. Blocs предоставляет возможность добавить множество интересных эффектов прокрутки и анимации в любую часть адаптивных сайтов без необходимости писать код.
3. Principle позволяет разрабатывать анимированные и интерактивные пользовательские интерфейсы через поток многоэкранного приложения или новых взаимодействий и анимации.
4. Omnigraffle предоставляет инструменты для мокапов пользовательского интерфейса, которые позволяют строить диаграммы и создавать прототипы, а также инструменты проектирования для специалистов, нацеленных на организацию работы и визуальное взаимодействие.
5. Mockflow — простое программное обеспечение для разработки вайрфреймов и совместной работы над UI-дизайном путем быстрого создания эскизов макетов интерфейсов.
6. Slickplan — система веб-прототипов, которая позволяет легко определять папки, страницы и структуры ссылок с помощью интерфейса перетаскивания.
7. Proto позволяет создавать полностью интерактивные высокоточные прототипы.
8. Moqups — оптимизированное веб-приложение, которое помогает создавать вайрфреймы, макеты, диаграммы и прототипы в режиме реального времени.
9. iPlotz обеспечивает разработку кликабельных навигационных макетов и вайрфреймов для прототипирования сайтов и программных приложений. К тому же, вы можете обсудить свои творения с другими пользователями.
10. Gliffy — программное обеспечение для построения диаграмм и рисования, которое позволяет перетаскивать фигуры или использовать шаблоны и темы для прототипирования.
11. HotGloo — UI-программа для создания вайрфреймов и прототипирования. Используется для разработки интерфейсов для цифровых, мобильных и переносимых устройств.
12. Mockingbird — UI-инструменты для создания макетов с помощью элементов перетаскивания на страницу с возможностью менять размеры.
13. Protoshare — инструмент совместного прототипирования, который помогает командам визуализировать требования с помощью вайрфреймов сайтов, интерактивного программного обеспечения и мобильных прототипов.
14. Balsamiq — программное обеспечение для разработки низкоточных вайрфреймов с большим количеством онлайн-курсов и ресурсов для изучения варфрейминга и дизайна пользовательского интерфейса.