Figma. Коротко и ясно. Введение для новичков.
Вступление
Всем привет, у меня уже есть несколько статей по фигме, однако все еще нет первой вступительной части. Думаю пришло время это исправить. В данной статье хотелось бы рассказать о том что нужно знать на первых этапах знакомства с данной программой.
А дальше будут статьи по дальнейшему изучению и освоению данной программы. Думаю, можно начинать.
UPD.2024 — у меня появился ютуб канал, на котором я рассказываю о дизайне, заходите смотерть.
Первые действия
Итак для начала хотелось бы убедить вас скачать версию для ПК, пользоваться браузерной версией можно и не криминально, но установленная версия таки удобнее.
Окей, мы скачали программу и установили ее, далее нас встречает главный экран на котором мы увидим последние открытые проекты.
Если вы только установили у вас этот экран будет без файлов.
Создаем новый файл это можно сделать как минимум тремя способами.
Создав новый файл он автоматически открывается и мы видим рабочую область. И в этот момент предлагаю вам сразу же настроить шаг перемещения с помощью стрелок, так называемый nudge.
Я использую шаг в 1 пиксель для обычного нажатия стрелкой и шаг в 8 пикселей для клавиш “Shift →”.
Почему именно 8?
Вот прям сильно точно не скажу, но слышал что в материал дизайне от гугла используется этот шаг и все размеры отталкиваются от степени числа 2. Да и вообще в разработке этот шаг часто используется. К этому просто нужно привыкнуть. По данной системе даже с шрифтами проще работать 16, 24, 32, 40 и т.д.
Если вы по этой теме знаете больше буду рад если поделитесь.
Настроить данный параметр можно в настройках nudge amount, которые можно найти вписав название в поиске настроек или в разделе Preferences в меня слева вверху.
Там же можно настроить привязку к пикселям.
Знакомство с рабочей областью
После базовых настроек можно знакомится с рабочей областью.
В блоке на левой стороне основная вкладка это слои (Layers) на которой будут списком отображаться все объекты которые вы будете использовать в своей работе.
Далее идут Assets так называемые компоненты, но об этом позже.
После компонентов(если быть точнее то они якобы в слоях но раскрывается их меню выше и после компонентов) расположены страницы (Pages), которые удобно использовать для того, чтобы у вас различные по назначению объекты не хранились на одном листе(Например UI kit, различные материалы от заказчика, мобильная версия и версия для ПК будут на разных страницах и компоненты, созданные на одной из страниц, можно использовать во всем документе)
Далее идет правая часть на которой есть 3 вкладки.
Design ваша основная вкладка во время работы, чаще всего вы будете работать именно с ней.
Prototype вкладка для прототипирования страниц.
Code Можно посмотреть как выглядит код разных объектов.
Все эти панели можно закрыть комбинацией клавиш “Ctrl \”
Панель со слоями отдельно закрывается клавишами “Ctrl Shift \”
Перед началом работы можно так же настроить фон рабочей области, в зависимости от ваших предпочтений. Сделать это можно в блоке справа, на вкладке Design если у вас не выделен никакой объект.
Для начала работы этих пред настроек должно хватить. Дальше можно перейти к Фреймам и Группам(у меня есть данная статья) а так же всегда будет полезно ознакомится с хоткеями для фигмы, о чем я так же уже писал статью.
Спасибо за внимание, надеюсь данная информация будет полезна для вас.
Запустил серию статей «Душная фигма» где стараюсь с начала рассказать о программе все что знаю, если интересно залетайте на первую статью на медиуме.
Ставьте клэпы(вы можете это сделать 50 раз, мне будет приятно и я буду знать что не зря это пишу)
Остались вопросы? пиши тут в комментариях или мне в телегу.
Всем желаю хорошего дня. До связи!
