В одной из заметок я написала о планировании дня, а здесь расскажу как в редакторе Figma сделать простой файл для составления списка задач. И также добавлю ссылку для распечатки готового файла в том числе для тех, кто не работает с Фигмой.
Лист для составления списка дел на день сделала с минимальным количеством элементов, чтобы, во-первых, ничего не отвлекало от основной задачи - составления плана, и во-вторых, при распечатке был экономичный расход чернил в картридже принтера.
Как в Figma сделать шаблон для списка
Перед началом описания как создать шаблон для списка собрала в таблице все его характеристики, чтобы вы могли получить полное представление о том, какой файл будет создан.
Характеристики файла
| Характеристики | Параметры |
|---|---|
| Формат листа | А4 |
| Размер листа в милиметрах (мм) | 210*297 |
| Размер фрейма в пикселях (px) | 2480*3508 |
| Цвет всех элементов | #292929 |
| Шрифт | Montserrat |
| Формат сохранения |
Инструкция создания файла А4 в Фигме
| Номер | Название шага | Горячие клавиши |
|---|---|---|
| Шаг 1 | Создание фрейма | F |
| Шаг 2 | Направляющие и подготовка полей | Shift+R |
| Шаг 3 | Группировка прямоугольников | Ctrl+G |
| Шаг 4 | Скрытие прямоугольников | нет |
| Шаг 5 | Написание заголовка | T |
| Шаг 6 | Дата и линия к ней | Т |
| Шаг 7 | Квадрат для чек-бокса | R |
| Шаг 8 | Линии для написания задач | L |
| Шаг 9 | Группировка чек-бокса и линии | Ctrl+G |
| Шаг 10 | Создание копии чек-бокса и линии | Alt |
| Шаг 11 | Дублирование группы чек-бокса и линии | Ctrl+D |
1. Создание фрейма. В самом начале создания любого дизайна в Фигме надо понять какого размера требуется фрейм. В данном случае мы готовим лист А4, а значит это будут следующие параметры: 2480*3508 пикселей. Создание фрейма - это базовая задача, её можно выполнить одним из трех способов (для нашего примера подойдут первые два из 3-х):
- Находясь на рабочей области в Фигме надо нажать на горячую клавишу F.
- Нажать кнопку создания фрейма на верхней панели инструментов.
- Преобразовать (можно также сказать "обернуть") объект, например, изображение, во фрейм.
Создание фрейма в программе Figma
2. Направляющие и подготовка полей. Для более эстетичного вида документа, надо создать поля. Сделать это проще всего с помощью горизонтальных и вертикальных направляющих. Где разместить направляющие можно определить с помощью одинаковых прямоугольников, расположенных по углам фрейма. Далее я подробно опишу как это сделать.
- Создать прямоугольник такого же размера как и фрейм.
- Уменьшить прямоугольник пропорционально примерно в 10 раз.
- Поставить в верхний левый угол фрейма.
- Подкорректировать размер прямоугольника, в зависимости от того, какие поля потребуются.
- Продублировать прямоугольник и перенести его в верхний правый угол.
- Ещё дважды продублировать прямоугольник: сначала для нижнего правого угла фрейма и потом для нижнего левого.
- С помощью горячих клавиш Shift+R открыть панели с направляющими.
- Поставить направляющие по линиям прямоугольников так, чтобы внутри фрейма образовались поля.
Подготовка полей во фрейме с помощью прямоугольников и направляющих
3. Группировка прямоугольников. Сгруппировать вспомогательные прямоугольники в слоях. Для группировки все 4 прямоугольника сначала надо выделить с помощью удерживания клавиши Shift. Далее сгруппировать нажав комбинацию клавиш CTRL+G.
Группировка прямоугольников в Фигме
4. Скрытие прямоугольников. Скрыть прямоугольники, чтобы они больше не отображались во фрейме можно нажав на "глазик" справа от получившейся группы. Если этого не сделать, они сохранятся при экспорте и будут видны в готовом файле.
Скрытие слоев с прямоугольниками
5. Написание заголовка. Нажать на горячую клавишу T и написать заголовок "Список задач". Поменять автоматически созданный в Фигме шрифт на Montserrat. Установить размер 118, начертание SemiBold.
Написание заголовка в Фигме
6. Дата и линия к ней. Ниже под заголовком написать "Дата" (так же горячая клавиша T) и рядом справа добавить линию с помощью удерживания клавиши Shift и нескольких нажатий кнопки тире/минус. Размер шрифта 73 пикселя, начертание Regular.
Дата и линия к ней
7. Квадрат для чек-бокса. С помощью горячей клавиши R создать квадрат 100 на 100 пикселей. Сделать более приятный для глаз квадрат чек-бокса - немного закруглить его углы. Для этого надо в специальном окошке справа установить 10 градусов. А также для более плавного скругления углов параметр Corner Smoothin настроить на 100%. Обводкe (Stroke) чек-бокса установите 4, цвет обводки #292929.
8. Линия для написания задач. С помощью горячей клавиши L создать линию. Стрелочка на рабочем столе превратится в +. Надо провести линию, отпустить мышку и нажать Enter. Проверить, чтобы в разделе, где показываются градусы стоял 0. Это значит, что линия получилась прямая, без скашивания. Изменить линию из сплошной в пунктирную (Dash 30).
Настройка параметров линии
9. Группировка чек-бокса и линии. Для создания следующих чек-боксов и линий, ранее созданные (первые) требуется сгруппировать в слоях. Для этого сначала их надо выделить с помощью удерживания клавиши Shift и потом сгруппировать, нажав комбинацию клавиш CTRL+G.
Группировка слоев в Фигме
10. Создание копии чек-бокса и линии. Объединенные в группу чек-бокс и линию надо сдвинуть ниже. Для этого надо нажать и удерживать кнопку Alt и получившуюся копию группы сдвинуть вниз на нужное расстояние от первой группы.
Создание копии чек-бокса и линии
11. Дублирование группы чек-бокса и линии. Далее с помощью горячих клавиш Ctrl+D продублировать сгруппированные чек-бокс и пунктирную линию. Выравнивание объектов. Сделать финальное выравнивание всех элементов внутри фрейма. Также можно настроить расстояние между группами (чек-бокс + линия).
Как из Фигмы экспортировать файл в формате PDF
Экспорт файла из Фигмы на компьютер для последующей распечатки делается следующим образом:
- Выделить фрейм.
- Выбрать в списке вариантов экспорта формат PDF.
- Нажать на кнопку экспорта.
- Сохранить файл в папке на компьютере.
Экспорт из Фигмы в формате PDF
PDF - оптимальный формат, если вам надо распечатать получившийся файл и дальше использовать его в качестве шаблона для планирования списка задач на день.
Основные выводы
Как видите готовый шаблон выглядит относительно простым, но для его создания надо применить целый ряд необходимых действий. В этом случае на выходе получится аккуратный и пригодный для использования лист-шаблон.
При повторении этой инструкции на практике можно узнать различные тонкости работы в программе Figma: создание фрейма, работа с прямоугольниками и линиями, выравнивание элементов, сохранение готового файла.
Научившись делать в Фигме простой файл с заголовком, чек-боксами и линиями, можно понять как делать и более сложные планировщики (с дополнительными полями) для распечатывания их на бумаге.
А сегодня на этом всё, желаю вам успешного получения новых навыков для работы в программе Figma. Напишите, получилось ли сделать список задач, достаточно ли для этого информации в заметке.
Оставить комментарий