Как человек, часто разрабатывающий дизайн для мобильных приложений, я всегда ищу способы ускорить свой рабочий процесс. Один из инструментов, который я все чаще использую в последнее время, — это Figma.
Figma — это редактор векторной графики и инструмент для создания прототипов — считайте, что это нечто среднее между Sketch и InVision.
Мне нравится в Figma то, что в нем есть встроенный мобильный экран. Это означает, что я могу создавать экраны своих приложений прямо в Figma, без необходимости экспортировать их в другую программу.
А если мне понадобится внести изменения, я могу сделать это прямо в Figma.
Чтобы начать работу, создайте новый файл в Figma и выберите шаблон Mobile Screen из списка шаблонов. Это даст вам чистый холст, который точно соответствует размеру экрана мобильного телефона.
После этого вы можете приступить к проектированию экранов ваших приложений. Чтобы добавить элементы на экран, вы можете использовать различные инструменты векторного рисования в левой боковой панели.
Или, если у вас есть существующие активы, вы можете просто перетащить их на холст.
Когда вы будете довольны своим дизайном, вы можете добавить интерактивности, создав горячие точки. Горячие точки — это кликабельные области, которые можно связать с другими экранами или внешними URL-адресами. Чтобы создать горячую точку, просто выберите элемент на экране и нажмите кнопку Создать горячую точку на верхней панели инструментов.
Заключение:
Создание мобильных экранов в Figma — это простой и эффективный способ разработки интерфейса вашего приложения. Благодаря встроенному шаблону мобильного экрана и инструментам векторного рисования вы можете быстро создавать красивые экраны приложений без необходимости экспортировать их в другую программу.