Как в Figma сделать шаблон для списка задач (формат А4)

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

Лист для составления списка дел на день сделала с минимальным количеством элементов, чтобы, во-первых, ничего не отвлекало от основной задачи - составления плана, и во-вторых, при распечатке был экономичный расход чернил в картридже принтера.

Как в Figma сделать шаблон для списка

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

Характеристики файла

Файл в Figma для списка задач
ХарактеристикиПараметры
Формат листаА4
Размер листа в милиметрах (мм)210*297
Размер фрейма в пикселях (px)2480*3508
Цвет всех элементов#292929
ШрифтMontserrat
Формат сохраненияPDF

Инструкция создания файла А4 в Фигме

Последовательность шагов создания списка задач в Figma
НомерНазвание шагаГорячие клавиши
Шаг 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-х): 

  1. Находясь на рабочей области в Фигме надо нажать на горячую клавишу F.
  2. Нажать кнопку создания фрейма на верхней панели инструментов.
  3. Преобразовать (можно также сказать "обернуть") объект, например, изображение, во фрейм.

Создание фрейма в программе Figma

2. Направляющие и подготовка полей. Для более эстетичного вида документа, надо создать поля. Сделать это проще всего с помощью горизонтальных и вертикальных направляющих. Где разместить направляющие можно определить с помощью одинаковых прямоугольников, расположенных по углам фрейма. Далее я подробно опишу как это сделать.

  1. Создать прямоугольник такого же размера как и фрейм.
  2. Уменьшить прямоугольник пропорционально примерно в 10 раз.
  3. Поставить в верхний левый угол фрейма.
  4. Подкорректировать размер прямоугольника, в зависимости от того, какие поля потребуются.
  5. Продублировать прямоугольник и перенести его в верхний правый угол. 
  6. Ещё дважды продублировать прямоугольник: сначала для нижнего правого угла фрейма и потом для нижнего левого. 
  7. С помощью горячих клавиш Shift+R открыть панели с направляющими.
  8. Поставить направляющие по линиям прямоугольников так, чтобы внутри фрейма образовались поля.

Подготовка полей во фрейме с помощью прямоугольников и направляющих

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

Экспорт файла из Фигмы на компьютер для последующей распечатки делается следующим образом:

  1. Выделить фрейм.
  2. Выбрать в списке вариантов экспорта формат PDF.  
  3. Нажать на кнопку экспорта.
  4. Сохранить файл в папке на компьютере.

Экспорт из Фигмы в формате PDF

PDF - оптимальный формат, если вам надо распечатать получившийся файл и дальше использовать его в качестве шаблона для планирования списка задач на день.

Скачать готовый PDF-файл для распечатки можно по этой ссылке.  

Основные выводы

Как видите готовый шаблон выглядит относительно простым, но для его создания надо применить целый ряд необходимых действий. В этом случае на выходе получится аккуратный и пригодный для использования лист-шаблон.

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

Научившись делать в Фигме простой файл с  заголовком, чек-боксами и линиями, можно понять как делать и более сложные планировщики (с дополнительными полями) для распечатывания их на бумаге. 

А сегодня на этом всё, желаю вам успешного получения новых навыков для работы в программе Figma. Напишите, получилось ли сделать список задач, достаточно ли для этого информации в заметке.

Нет комментариев

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

Отправить комментарий Отменить

Сообщение