×
Россия +7 (495) 139-20-33

Figma для недизайнеров: кому и зачем нужен сервис

Россия +7 (495) 139-20-33
Шрифт:
0 15037
Подпишитесь на нас в Telegram

Что такое Figma? 

Figma – онлайн-сервис, созданный в первую очередь для веб- и UX/UI-дизайнеров. В основном в Figma создают прототипы и дизайн-макеты сайтов, интерфейсы мобильных приложений, корпоративных порталов. Работать можно как в браузерной версии сервиса, так и в десктопной – для этого нужно скачать Figma на компьютер (ссылка на оф. сайт для скачивания: https://www.figma.com/downloads). 

Рабочее пространство Figma максимально удобно и интуитивно понятно. Представьте, что это тот же Paint, но чуточку сложнее:) Если человек, далекий от дизайнерских программ, откроет Фотошоп или Иллюстратор, то наверняка впадет в ступор от обилия кнопок, панелей и инструментов. В Figmа все гораздо проще, поэтому освоить ее на базовом уровне не составит труда. А мы расскажем, зачем и, главное, как это сделать. 

Что такое Figma? Figma – онлайн-сервис, созданный в первую очередь для веб- и UX/UI-дизайнеров. В основном в Figma создают прототипы и дизайн-макеты сайтов, интерфейсы мобильных приложений, корпоративных порталов. Работать можно как в браузерной версии сервиса, так и в десктопной – для этого нужно скачать Figma на компьютер (ссылка на оф. сайт для скачивания: https://www.figma.com/downloads). Рабочее пространство Figma максимально удобно и интуитивно понятно. Представьте, что это тот же Paint, но чуточку сложнее:) Если человек, далекий от дизайнерских программ, откроет Фотошоп или Иллюстратор, то наверняка впадет в ступор от обилия кнопок, панелей и инструментов. В Figmа все гораздо проще, поэтому освоить ее на базовом уровне не составит труда. А мы расскажем, зачем и, главное, как это сделать. Фото 1 Сравнение интерфейсов Adobe Illustrator (вверху) и Figma (внизу)  Почему вам нужно освоить Figma   На практике функционал сервиса выходит далеко за рамки веб-дизайна. В Figma можно создавать посты и сторис для соцсетей, макеты для таргетированной рекламы, презентации, мудборды, баннеры, открытки, листовки и так далее. Если у вас в команде нет работающего 24/7 дизайнера, вы иногда (или часто) презентуете что-то клиентам, если хотите ускорить работу и приобрести +1 полезный скилл и повод гордиться собой – эта статья для вас. А сейчас расскажем о некоторых форматах подробнее.  Мудборд Или доска настроения. Если нужно согласовать с клиентом концепцию проекта, вы можете легко визуализировать информацию в рабочем пространстве Figma. Просто поместите на пустой холст картинки, фото, текст, цветовую палитру и другие данные. Попутно оставьте комментарии и скиньте ссылку на файл клиенту. Ему даже не придется ничего скачивать, а информация будет восприниматься целостно и легко. Мудборды в разы сокращают количество правок и минимизируют недопонимания.  Фото 2 Мудборд, созданный для презентации концепции сайта  Презентация Power Point – это хорошо, но клином свет на нем не сошелся, а многие PP-шаблоны давно устарели. Если раньше для создания стильных презентаций лидером у недизайнеров была Canva (теперь недоступна в РФ), то сейчас самое время обратиться к Figma. Помните, что дизайнеры уже все сделали за вас. В Figma есть раздел «Комьюнити», в котором пользователи со всего мира выкладывают готовые иллюстрации, иконки, плагины, текстуры, шаблоны и т.д. В случае с презентацией вводите в строку поиска «Presentation Template» и выбирайте подходящий шаблон. Вам останется заменить картинки и текст. Фото 3,  Стартовая страница раздела Комьюнити фото 4 Выдача результатов по запросу Presentation Template  Баннеры и ресайзы В Figma очень удобно создавать несложные баннеры и менять их размер. Создайте фрейм, залейте его нужным цветом. Поместите текст, лого и картинку. Опционально добавьте готовые элементы из раздела «Комьюнити». Готово, вы великолепны! Чтобы поменять размер всех элементов одновременно, зажмите клавишу K (английскую) и потяните за угол фрейма. Фото 5 Баннер для школы актерского мастерства фото 6 Ресайзы баннеров для магазина одежды Посты и сторис Сервис уже знает самые популярные форматы и их размеры в пикселях, поэтому вам даже не нужно вводить ничего вручную. Выбирайте «Post»/«Stories», и чистый фрейм необходимого размера перед вами. Можно не только создавать посты, но и выстроить их в сетку перед публикацией. Поместите на рабочее поле готовые картинки, выровняйте и оцените результат. Фото 7 Панель выбора размера фрейма (рабочей области) в пикселях фото 8 Сторис, созданные в Figma фото 9 Посты, созданные в Figma фото 10 Плагины в разделе Комьюнити С чего начать изучение Для освоения Figma на базовом уровне будет достаточно просмотра бесплатных уроков на YouTube и нескольких часов практики. Познакомьтесь с интерфейсом, выполните упражнения, попросите знакомого дизайнера оценить результат.      • Рекомендуем пройти базовый курс по Figma от Tilda Education. Ссылка: https://tilda.school/figma-free-course-0     • Для углубленного изучения подойдет книга Саши Окунева «Руководство по Figma». После каждого мини-урока предлагается выполнить небольшое задание, чтобы закрепить материал. Ссылка: https://slashdesigner.ru/figma-guide     • Для тех, кто «на ты» с английским, есть курс от DesignLab, он также учит работать в Figma с нуля. Пройти его можно здесь: https://designlab.com/figma-101-course/introduction-to-figma  Особенности сервиса Figma признает только статичные форматы (гифки и видео вставить не получится) и не очень жалует растровую графику. Это значит, что если вам нужно удалить фон, вырезать, убрать что-то с картинки или фото, лучше сделать это предварительно в другом редакторе. Но! Вам в помощь безграничное количество плагинов из раздела «Комьюнити». Практически любой дополнительный функционал реализуется в сервисе именно через плагины. Вот некоторые из них:      • Beautiful Shadows – создает мягкие красивые тени;     • uiGradients – готовые градиенты на любой вкус;     • Blobs – плагин создает разнообразные шейпы неправильной формы;     • Unsplash – добавляет картинку с бесплатного фотостока сразу в Figma без необходимости скачивания;     • Shaper – набор готовых трендовых векторных элементов;     • Feather Icons – готовый набор бесплатных иконок.  Командная работа Даже если вам самим не придется выполнять дизайнерские задачи в Figma, клиент или дизайнер могут прислать вам ссылку на свой проект (лендинг, макет, прототип и т.д.) с просьбой внести данные или оценить работу. Figma как сервис изначально подразумевает командное взаимодействие: создатель файла может раздавать права на доступ через кнопку «Share», все участники могут оставлять комментарии и вести ветки обсуждений в любом месте макета. Есть два вида доступа: «Can edit» и «View only». Чтобы запросить его, вам нужно иметь аккаунт в Figma с привязанной почтой. Фото 11 Пользователи и выданные им доступы фото 12 Оставленный комментарий  Огромное преимущество сервиса в том, что не нужно скачивать множество тяжелых файлов, все данные хранятся на фигмовских серверах. Все очень быстро и наглядно – вам (или клиенту) нужно только перейти по ссылке. А еще можно вносить правки в режиме онлайн или следить за их выполнением, попутно находясь на созвоне – открыв ссылку, вы видите, что делают в данный момент другие пользователи, имеющие доступ к файлу.   Figma – прогрессивный, быстрый и простой для понимания онлайн-сервис. Умение работать в нем дает не только дополнительный дизайнерский скилл и повышает скорость работы, но еще и облегчает коммуникацию с клиентом и подчиненными. Используя Figma, вы грамотно презентуете концепции, в режиме онлайн видите, как идет работа над проектом, оперативно вносите правки и обмениваетесь гигабайтами данных одним кликом мыши.

Сравнение интерфейсов Adobe Illustrator (вверху) и Figma (внизу) 

Почему вам нужно освоить Figma 

На практике функционал сервиса выходит далеко за рамки веб-дизайна. В Figma можно создавать посты и сторис для соцсетей, макеты для таргетированной рекламы, презентации, мудборды, баннеры, открытки, листовки и так далее. Если у вас в команде нет работающего 24/7 дизайнера, вы иногда (или часто) презентуете что-то клиентам, если хотите ускорить работу и приобрести +1 полезный скилл и повод гордиться собой – эта статья для вас. А сейчас расскажем о некоторых форматах подробнее. 

Мудборд 

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

Мудборд, созданный для презентации концепции сайта

Мудборд, созданный для презентации концепции сайта 

Презентация 

Power Point – это хорошо, но клином свет на нем не сошелся, а многие PP-шаблоны давно устарели. Если раньше для создания стильных презентаций лидером у недизайнеров была Canva (теперь недоступна в РФ), то сейчас самое время обратиться к Figma. Помните, что дизайнеры уже все сделали за вас. В Figma есть раздел «Комьюнити», в котором пользователи со всего мира выкладывают готовые иллюстрации, иконки, плагины, текстуры, шаблоны и т.д. В случае с презентацией вводите в строку поиска «Presentation Template» и выбирайте подходящий шаблон. Вам останется заменить картинки и текст. 

Стартовая страница раздела Комьюнити

Стартовая страница раздела Комьюнити 

Выдача результатов по запросу Presentation Template

Выдача результатов по запросу Presentation Template 

Баннеры и ресайзы 

В Figma очень удобно создавать несложные баннеры и менять их размер. Создайте фрейм, залейте его нужным цветом. Поместите текст, лого и картинку. Опционально добавьте готовые элементы из раздела «Комьюнити». Готово, вы великолепны! Чтобы поменять размер всех элементов одновременно, зажмите клавишу K (английскую) и потяните за угол фрейма. 

Баннер для школы актерского мастерства 

Баннер для школы актерского мастерства 

Ресайзы баннеров для магазина одежды

Ресайзы баннеров для магазина одежды 

Посты и сторис 

Сервис уже знает самые популярные форматы и их размеры в пикселях, поэтому вам даже не нужно вводить ничего вручную. Выбирайте «Post»/«Stories», и чистый фрейм необходимого размера перед вами. Можно не только создавать посты, но и выстроить их в сетку перед публикацией. Поместите на рабочее поле готовые картинки, выровняйте и оцените результат. 

Панель выбора размера фрейма (рабочей области) в пикселях 

Панель выбора размера фрейма (рабочей области) в пикселях 

Сторис, созданные в Figma

Сторис, созданные в Figma 

Посты, созданные в Figma

Посты, созданные в Figma 

Плагины в разделе Комьюнити

Плагины в разделе Комьюнити 

С чего начать изучение 

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

  • Рекомендуем пройти базовый курс по Figma от Tilda Education. Ссылка: https://tilda.school/figma-free-course-0 
  • Для углубленного изучения подойдет книга Саши Окунева «Руководство по Figma». После каждого мини-урока предлагается выполнить небольшое задание, чтобы закрепить материал. Ссылка: https://slashdesigner.ru/figma-guide 
  • Для тех, кто «на ты» с английским, есть курс от DesignLab, он также учит работать в Figma с нуля. Пройти его можно здесь: https://designlab.com/figma-101-course/introduction-to-figma 

Особенности сервиса 

Figma признает только статичные форматы (гифки и видео вставить не получится) и не очень жалует растровую графику. Это значит, что если вам нужно удалить фон, вырезать, убрать что-то с картинки или фото, лучше сделать это предварительно в другом редакторе. Но! Вам в помощь безграничное количество плагинов из раздела «Комьюнити». Практически любой дополнительный функционал реализуется в сервисе именно через плагины. Вот некоторые из них: 

  • Beautiful Shadows – создает мягкие красивые тени; 
  • uiGradients – готовые градиенты на любой вкус; 
  • Blobs – плагин создает разнообразные шейпы неправильной формы; 
  • Unsplash – добавляет картинку с бесплатного фотостока сразу в Figma без необходимости скачивания; 
  • Shaper – набор готовых трендовых векторных элементов; 
  • Feather Icons – готовый набор бесплатных иконок. 

Командная работа 

Даже если вам самим не придется выполнять дизайнерские задачи в Figma, клиент или дизайнер могут прислать вам ссылку на свой проект (лендинг, макет, прототип и т.д.) с просьбой внести данные или оценить работу. Figma как сервис изначально подразумевает командное взаимодействие: создатель файла может раздавать права на доступ через кнопку «Share», все участники могут оставлять комментарии и вести ветки обсуждений в любом месте макета. Есть два вида доступа: «Can edit» и «View only». Чтобы запросить его, вам нужно иметь аккаунт в Figma с привязанной почтой. 

Пользователи и выданные им доступы

Пользователи и выданные им доступы 

Оставленный комментарий

Оставленный комментарий 

Огромное преимущество сервиса в том, что не нужно скачивать множество тяжелых файлов, все данные хранятся на фигмовских серверах. Все очень быстро и наглядно – вам (или клиенту) нужно только перейти по ссылке. А еще можно вносить правки в режиме онлайн или следить за их выполнением, попутно находясь на созвоне – открыв ссылку, вы видите, что делают в данный момент другие пользователи, имеющие доступ к файлу. 

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

Друзья, теперь вы можете поддержать SEOnews https://pay.cloudtips.ru/p/8828f772
Ваши донаты помогут нам развивать издание и дальше радовать вас полезным контентом.

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Примеры использования ChatGPT в SEO-стратегии
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если кто то хочет протестировать Cat GPT в SЕО проектах на базе нашего агенства, приглашаем наудалкнную работу Tg: @thegoodlink
Эффективное продвижение сайтов: 10 лет опыта в SEO в Рунете и Буржунете
Павел Горбунов
11
комментариев
0
читателей
Полный профиль
Павел Горбунов - Вы учтите, что за такие водные статьи хейтеры повалят жесткие. Сеошники воды не любят.
Как онлайн-магазинам получать максимум трафика с помощью Поиска по товарам Яндекса
Гость из Тюмени
1
комментарий
0
читателей
Полный профиль
Гость из Тюмени - Производим пиломатериалы под заказ, от 1 до 14 дней. Яндекс постоянно банит наш яндекс фид по причине отсутствия товара на складе во время своих тайных проверок. Не возможно донести до модератора, что мы работаем под заказ, поэтому товара нет на складе, т.е. пришёл заказ - мы изготовили.
Особенности внутренней перелинковки для крупных сайтов
Злобная булочка
1
комментарий
0
читателей
Полный профиль
Злобная булочка - Ну это ж ингейт)
'SEO глазами клиентов 2023'
Валерия Власова
2
комментария
0
читателей
Полный профиль
Валерия Власова - Приветствую! На момент проверки сайтов клиентов получились такие показатели. Возможно, самостоятельно вы проверяете свои проекты по другим параметрам. Поэтому получились разные результаты.
Увеличили трафик в 4 раза с помощью узких ключей и контентного SEO: кейс ОТП Банка
Бурлуцкий Сергей
1
комментарий
0
читателей
Полный профиль
Бурлуцкий Сергей - В работе по ссылочному делаем упор по получению естественных ссылок в сочетании с краудом. Более подробно об этом мы рассказывали на нашем недавнем митапе - www.youtube.com/watch?v=dbl_vFHWqWQ (Второй доклад).
Что такое Яндекс Советник, и кому от него жить хорошо
Мама Стифлера
1
комментарий
0
читателей
Полный профиль
Мама Стифлера - Вызывает сожаление, что вы не осознаете, что Яндекс.Советник может быть рассмотрен как форма рэкета, которая заставляет компании, размещающиеся в Яндекс.Маркете, выплачивать дополнительные финансовые средства, повышая в конечном итоге прибыль Яндекс.Маркета, но не принесет пользы для посетителей сайта.
Самые быстрорастущие доменные зоны в 2023 году. Исследование RU-CENTER
Станислав
1
комментарий
0
читателей
Полный профиль
Станислав - С 2019 года количество доменов в зоне .ru остается на одном и том же уровне - около 5 млн. Все изменения на уровне 1% от этого объема в плюс или минус
Как быстро улучшить рейтинг компании на сайтах отзовиков
Zorgy Rihard
2
комментария
0
читателей
Полный профиль
Zorgy Rihard - давай я
Как за месяц увеличить количество заявок в 1,7 раза, а их стоимость снизить в 1,6 раза. Кейс
Sputniki
1
комментарий
0
читателей
Полный профиль
Sputniki - Добрый день, Василий. Спасибо за вашу наблюдательность. На самом деле ошибки нет. Если вы сталкивались на практике с выгрузкой заявок из кабинета VK Рекламы, то заметите, что количество заявок не бьется с цифрами по рекламному кабинету (по статистике). Поэтому средняя цена заявки получается ниже чем у самых эффективных трех.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!