Figma: воркбук для начинающих
Download 2.86 Mb. Pdf ko'rish
|
Figma- воркбук для начинающих
|
Воркбук Figma: воркбук для начинающих Figma: воркбук Figma: воркбук Содержание Что такое Figma 3 Устанавливаем Figma 3 Горячие клавиши 4 Создаём первый проект 5 Разбираемся в окне редактора 5 Создаём первый фрейм 6 Создаём сетку 7 Рисуем фигуры 8 Модифицируем фигуры 9 Работаем с текстом 12 Слои 13 Работаем с изображениями 14 Сохраняем работу и делимся ссылкой 16 Бонус. Прототипирование 18 Этот короткий гайд поможет вам разобраться с основными функциями Figma и сможет стать шпаргалкой на время интенсива. Смело заглядывайте сюда, если забудете сочетания клавиш или предназначение отдельных инструментов. Что такое Figma Это бесплатный графический редактор. В нём удобно проектировать и рисовать интерфейсы сайтов и мобильных приложений. Figma позволяет в режиме live работать над проектом одновременно с командой, собирать прототипы и адаптировать дизайн под разные устройства. Устанавливаем Figma Чтобы начать творить в Figma, её даже не нужно скачивать на компьютер. Графический редактор отлично работает в браузере — нужна только регистрация: Зайдите на figma.com Нажмите кнопку Try Figma For Free Зарегистрируйтесь удобным способом: через Google-аккаунт или с почтой и паролем. Рекомендуем открывать Figma в браузере Chrome — в нём все функции будут работать предсказуемо. 3 Горячие клавиши Горячие клавиши, или хоткеи, облегчат вам работу над дизайном, поэтому рекомендуем привыкать пользоваться ими. 4 Ctrl + \ ⌘ + \ Показать/скрыть боковые панели V Инструмент выделения F Создать фрейм P Перо T Текст R Прямоугольник O Овал L Линия Shift + L Стрелка + Приблизить - Уменьшить Shift+0 Включить отображение 1:1 или зум до 100% H Инструмент «Рука» — помогает перемещаться по рабочей области ⌘ + D Ctrl + D Дублировать слой Shift + ⌘ + L Shift + Ctrl + L Блокировать слой, чтобы случайно не сдвинуть или не удалить его Shift + ⌘ + H Shift + Ctrl + H Скрыть слой Создаём первый проект Нажмите + справа от Drafts на левой панели и выберите Design File. Разбираемся в окне редактора После создания файла вы увидите вот такой экран: 4 1 2 3 1 Верхняя панель: меню и список инструментов. 2 Панель слоёв и компонентов. 3 Панель свойств. 4 Рабочая область. 5 Создаём первый фрейм Фрейм — это холст, на котором разместится ваш дизайн-макет. Чтобы создать его, нажмите F или выберите инструмент Frame на верхней панели. Можно выбрать готовый пресет на панели свойств или нарисовать собственный фрейм левой кнопкой мыши в рабочей области. Зажмите Shift, чтобы увеличивать фрейм, сохраняя исходные пропорции. Список пресетов Во время создания фрейма вы можете отследить, как меняются его размеры. 6 ЛКМ+Shift Сохранить пропорции Создаём сетку Сетки и колонки помогут упорядочить и организовать элементы. Нажмите V или выберите инструмент Move Tool Выделите фрейм, кликнув на него инструментом Move Tool. На панели свойств нажмите + рядом с Layout Grid. Figma заполнит фрейм квадратами 10х10 пикселей. Чтобы изменить настройки по умолчанию, нажмите на иконку сетки: Чтобы перейти в режим колонок, выберите Columns в выпадающем меню. 7 Параметры колонок: Count Количество колонок Color Цвет колонок Type Определяет, как выравнивать сетку внутри фрейма Width Ширина колонок Offset/Margin Отступ от сетки до краёв фрейма Gutter Отступ между колонками Советуем почитать Как работать с модульной сеткой в Figma Рисуем фигуры В Figma вы можете рисовать прямоугольники, овалы, линии, стрелки, треугольники и звёзды. Чтобы выбрать фигуру, нажмите на стрелку рядом с квадратом на панели инструментов. 8 Чтобы рисовать, тяните курсор с зажатой левой кнопкой мыши по фрейму. Попрактикуйтесь и добавьте на фрейм прямоугольник, овал и треугольник. Если во время рисования зажать Shift — фигура сохранит пропорции. Модифицируем фигуры Настало время познакомиться поближе с инструментом Move. Перемещаем фигуру Нажмите V или выберите инструмент Move Зажмите левую кнопку мыши над фигурой и потяните. Чтобы фигура двигалась только по оси Х или Y, зажмите Shift во время перемещения. Если зажать Alt или ⌥ Option и потянуть фигуру, вы создадите её дубликат. Закругляем углы Нарисуйте квадрат и поднесите курсор к углу — вы увидите белую точку. Если потянуть за неё, прямые углы фигуры закруглятся. Синяя подсказка поможет отследить радиус скругления. 9 Вращаем фигуру Теперь поднесите курсор к внешнему углу фигуры — вы увидите закруглённую стрелку. Если зажать и потянуть, фигура начнёт вращаться. Чтобы вращать с шагом 15°, зажмите Shift. Масштабируем Изменить масштаб фигуры просто: Расположите курсор над одной из её сторон Появится двусторонняя стрелка Потяните и измените размер. Чтобы сохранить пропорции, зажмите Shift. 10 Удаляем фигуру Чтобы удалить фигуру, выделите её инструментом Move (V) и нажмите Backspace или Delete. Закрашиваем фигуру Выделите фигуру и обратите внимание на раздел Fill на панели свойств — по умолчанию там стоит серая заливка. Кликните на квадрат и выберите подходящий цвет: Вместо заливки можно использовать градиент или изображение. Просто выберите нужный фон в выпадающем меню. Для тех, кто хочет копнуть глубже: Градиенты: большой обзор Тени и размытие в Figma: как настроить Тени в интерфейсах: зачем они нужны и как их рисовать в Figma 11 Работаем с текстом Нажмите T или выберите инструмент Text в верхней панели. Кликните в любое место на фрейме и наберите текст. Изменить стандартный шрифт можно на панели свойств, в разделе Text. По умолчанию в Figma вам доступны все шрифты из набора Google Fonts. 7 6 3 5 4 1 2 1 Шрифт 5 Межбуквенный интервал 2 Стиль шрифта 6 Отступ между параграфами 3 Размер шрифта 7 Выравнивание текста 4 Высота строк 12 Ещё больше о шрифтах: Шрифты в Figma: особенности, применение и выбор Слои Всё, что вы добавляете в фрейм, автоматически попадает на новый слой. Frame 1 содержит текстовый слой и прямоугольник. Чтобы не запутаться в иерархии и организовать работу, слои принято называть. Для этого выделите слой на панели слоёв и нажмите Ctrl+R или ⌘+R. После того, как дали слою осмысленное имя, нажмите Enter. 13 Слои можно перетаскивать, зажав левую кнопку мыши. Слои, которые находятся выше в иерархии, будут перекрывать нижние. В Figma есть и продвинутые функции копирования: Умное копирование в Figma: зачем нужно и как пользоваться У слоёв можно менять непрозрачность. Для этого выделите слой и воспользуйтесь цифровыми клавишами. Значение умножается на 10. Например, если нажмёте 2, то выставите непрозрачность в 20%, 6 — в 60%. Чтобы сделать слой полностью непрозрачным, нажмите 0. Работаем с изображениями Есть несколько способов добавить изображение в Figma: Перетащите изображение в рабочую область Зажмите Shift+⌘+K или Shift+Ctrl+K и загрузите файл в рабочую область. Обратите внимание: если вставить картинку внутрь меньшего по размеру фрейма, то изображение обрезается Скопируйте URL изображения в интернете и нажмите Ctrl+V или ⌘+V в рабочей области. Заливаем фигуру изображением Нарисуйте фигуру Выделите её инструментом V В меню Fill выберите режим Image Нажмите Choose Image и подберите изображение для заливки. 14 Режимы заливки Fill Изображение полностью заполняет фигуру, при этом его часть обрезается. Fit Изображение полностью помещается в фигуру и сохраняет пропорции. Из-за этого часть фигуры остаётся не закрашена. Crop В этом режиме вы можете контролировать, как изображение заполняет фигуру. Tile Заполняет фигуру плиткой. Fill Fit Crop Tile Советуем почитать: Как работать с изображениями в Figma 15 Сохраняем работу и делимся ссылкой Перед тем как делиться проектом с миром, желательно дать ему осмысленное имя. Для этого кликните в пустое место на рабочей области. На верхней панели вы увидите имя по умолчанию — Untitled. Кликните на Untitled и назовите файл. Нажмите Enter, чтобы сохранить новое имя. Сохраняем файл на компьютере Нажмите на логотип Figma в левом углу, чтобы открыть меню Перейдите в File → Save Local Copy Проект в формате .fig скачается на ваш компьютер. Делимся ссылкой на проект Дизайнеры любят Figma за возможности для командной работы. Вы можете настроить параметры доступа — например, разрешить определённым людям редактировать проект — или просто скинуть ссылку на просмотр. Нажмите Share на верхней панели Откроется модальное окно. 16 В поле можно ввести адрес электронной почты человека, которого вы хотите пригласить в проект. Если таких людей много, просто разделяйте адреса запятыми. Справа от поля можно настроить разрешени can edit — открыть на редактирование can view — открыть на просмотр. Ниже можно ограничить права на просмотр или редактирование для тех, кто не входит в список приглашённых. Чтобы скопировать ссылку на проект, нажмите Copy Link в левом углу. Теперь ссылкой можно поделиться Для тех, кто хочет ускорить работу: 7 лайфхаков в Figma, которые упростят вам работу 5 лайфхаков в Figma, которые помогут работать быстрее 17 Бонус. Прототипирование В Figma вы можете собрать рабочий прототип сайта или приложения. Макет с кликабельными кнопками, переходами и анимациями поможет наглядно продемонстрировать функции и логику работы клиенту или разработчику. Допустим, мы хотим сделать прототип из двух экранов. По клику на кнопку на первом экране должен происходить переход на второй. Чтобы перейти в режим прототипирования, выделите кнопку и выберите вкладку Prototype на панели свойств. Зажмите левую кнопку мыши и потяните стрелку от плюса возле кнопки ко второму экрану. 18 Когда свяжете два экрана, откроются настройки взаимодействия. 3 1 2 1 Действие-триггер: клик, скролл, ховер; 2 Настройки появления нового экрана; 3 Анимация появления экрана: можно добавить эффектные выдвижения, растворения или воспользоваться функцией Smart Animate для плавного перехода. Как только настроите взаимодействие и анимации, нажмите кнопку Play на верхней панели. Вы перейдёте в режим просмотра прототипа. Если вы всё правильно сделали, то после клика на зелёную кнопку произойдёт переход на второй экран. Если не боитесь продвинутых тем и хотите подробнее разобраться, как работают прототипы и анимация, советуем почитать: Как сделать прототип в Figma Как делать кнопки, прокрутки и попапы Как делать анимации 19 Удачи на интенсиве! Советуем не просто смотреть, а повторять действия за спикером. Практика поможет вам быстрее освоить программу и начать создавать свои шедевры. А наше руководство — освежить в памяти основные функции Figma. 20 Download 2.86 Mb. Do'stlaringiz bilan baham: 
|