Figma - это онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.
Источник: Википедия
Если просто и коротко figma - это полноценный графический редактор, позволяющий создать прототип сайта или интерфейс приложения (на выбор пользователя доступна облачная или десктопная версия).
Кому прежде всего будет полезен этот редактор?
Конечно же веб-дизайнерам и full-stack разработчикам. Его возможности чрезвычайно широки, так что при должном желании и опыте можно создать нечно действительно стоящее.
А теперь давайте изучим как он устроен.
Личный кабинет пользователя после регистрации на сайте будет выглядеть вот так:
Условно его можно разделить на три большие части:
Первый блок позволяет переключаться между черновиком и действующими проектами, выбрать необходимый тариф, добавить проекты в избранное и т.д.
Второй блок отображает сами проекты и три различных варианта для их создания.
Третий блок представляет из себя личную карточку клиента с возможностью перейти в комьюнити.
А теперь давайте попробуем создать свой первый проект. Для этого нужно нажать на кнопку Новый дизайн:
Перед вами откроется стандартная рабочая область:
Предположим вам нужно создать макет для какого-то конкретного устройства (пусть это будет стационарный компьютер). Для этого необходимо нажать на решетку рядом со стрелкой, а затем на frame:
Из представленного сбоку списка выбираем интересующий нас вариант (в данном случае это Desktop):
Вот что получается в итоге:
Т.е. по сути мы выбрали основу, на которую впоследствии будут наложены все остальные элементы нашего макета. В качестве наглядного примера давайте попробуем добавить какую-нибудь картинку (она же будет являться обложкой будущего сайта). Для этого переходим в Фигуры и выбираем Добавить картинку:
Разместив картинку на поверхности фрейма мы можем задать ее длину и ширину (в данном случае 1440*480). И центрируем ее. Вот должно получиться:
Саму картинку можно переименовать в левой боковой панели дважды кликнув по ее названию:
Разумеется это далеко не полный обзор данной программы, уж слишком она велика и могуча чтобы рассказать о ней в рамках одной статьи) В случае если эта тема показалась вам интересной пишите в комментариях. И тогда подобных статей будет больше)
Спасибо за внимание!
Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.