Ну что, время наконец-то изучить так давно откладываемую тобой Figma?
Я сама пришла в веб-дизайн из совершенно другой сферы и столкнулась с теми же страхами: вдруг не получится, слишком много информации, интерфейс выглядит как кабина самолета, а времени катастрофически не хватает.
Сегодня у нас быстрый старт - всего пять минут и ты разберешься с интерфейсом Figma настолько, чтобы перестать бояться нажать на кнопку New File и наконец-то начать путь веб-дизайнера!
Добро пожаловать на приветственный экран Figma
Перед нами приветственный экран Figma. На этом этапе важно сделать две вещи:
1. Зарегистрироваться. Рекомендую сделать это через Google, чтобы все синхронизировалось автоматически.
2. Скачать десктоп версию.
Почему это важно?
Десктоп версия Figma работает стабильнее, а это критично, если у тебя не самый идеальный интернет. Большинство UI и UX дизайнеров используют именно её.
Первые шаги сделаны. Осталось зайти внутрь и понять, что скрывается за десятками кнопок.
Что ж, мы зарегистрированы, даже скачали десктоп версию ииии....
Перед нами набор кнопок и всё на английском :/
Не страшно, давайте разберёмся по порядку
Тебе сейчас нужна только одна вкладка: Drafts. Это твое личное пространство и здесь будут все твои первые проекты.
Теперь посмотрим на верхние вкладки: Design, FigJam, Slides, Buzz, Site
Коротко и по делу:
Design - это главное пространство для веб-дизайнера, тут мы и будем разрабатывать первые wireframe и прототипы.
FigJam - это место для брейнштормов, опросов, майндкарт и командной работы.
Slides - это презентации, которые можно экспортировать в PDF и, немного кривенький, PPTX.
Buzz - это шаблоны оформления постов с соцсети.
Site - это разработка сайтов и верстка на основе твоего дизайна.
Пока нам нужен только Design. Остальное пригодится позже.
Мы близко!
Спустя столько времени мы добрались до нашего рабочего пространства.
Обрати внимание на левую панель, в текущей версии Figma открывается вкладка Assets, в которой находятся библиотеки материалов для упрощенной работы, но пока они нас не интересуют.
Переключаемся на вкладку File, где будут отображаться все слои, созданные нами для создания дизайна сайта.
Теперь слева находится панель со слоями. Если ты уже работал в Photoshop или Illustrator, то система слоев покажется знакомой. Если нет, переживать не стоит. Слои это просто список объектов на твоем холсте.
Справа у нас панель настроек. Именно здесь меняется все: цвета, шрифты, размеры, тени, отступы наших объектов, но пока мы не выбрали объекты, мы можем поменять цвет фона рабочего пространства.
В нижнем меню находятся инструменты. Их мы подробно разберем в следующем уроке, где поговорим про фигуры, текст, фреймы и основные правила построения интерфейса.
Всего 5 минут и вот уже столь откладываемая вами программа у вас в руках, открыта и готова к работе!
Прошло всего 5 минут, а ты уже открыл Figma, разобрался с интерфейсом, понял назначение основных вкладок и увидел, что веб-дизайн доступен каждому.
Это не магия и не талант с рождения. Это путь, который может пройти каждый, особенно если информация подана структурно, коротко и по делу.
В следующих статьях мы разберем базовые инструменты, затем создадим твой первый Wireframe, а затем и интерактивный прототип. Всё с учётом Дефицита времени: быстро, понятно и с поддержкой от тех, кто сам однажды решился на смену профессии.
Твой путь в веб-дизайн уже начался, продолжай в том же духе и если хочешь продолжить обучение без хаоса и многословия, подписывайся!
Если вас интересуют другие интересные статьи, советую ознакомиться с аккаунтом Muffin_Radio, где подробно разибрается работа в прибыльной сфере Motion Design
Знакомство с созданием зацикленых анимаций в Cinema 4D
https://dzen.ru/b/aRslIiZ41ysa0sJs
Качественные 3D анимации: Motion Design in C4d
https://dzen.ru/a/aRs5hOIeMETHREF5
MuffinRadio — Sweet Snake: новая браузерная игра в сладкой вселенной
https://dzen.ru/a/aS3CeTrZpwX017gE