Статті
Адаптивна таблиця з одного символу в Sketch
Як зробити шаблон, який полегшить роботу з таблицями. Практичний посібник.
21 лютого, 2019
Ми любимо тексти без помилок. Якщо ви їх знайшли, виділіть фрагмент і натисніть Ctrl + Enter.

Скільки часу ви витрачаєте на створення таблиці в Sketch? Для того, щоб легко її стилізувати, змінювати її під розмір контенту та різні розширення, пропонуємо створити всі комірки лише з одного символу. Пояснюємо по пунктам, як зробити універсальний шаблон та, як наслідок, полегшити роботу з таблицями.

Krupa


Я побачив, що в 2019 році деякі дизайнери роблять лінії між стовпцями і рядками таблиці окремими шарами-прямокутниками. Або навіть шарами-лініями. Тому мені стало потрібно нагально зробити заготовку, яка полегшить роботу з таблицями в Sketch.

Я ґрунтувався на збірному образі таблиць, з якими стикався в роботі. Їх коміркам характерні:

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

Вайрфрейм універсального символу

Крок 1

1. Починаємо з прямокутника. Для прикладу я взяв розмір 280х60px.

2. Задаємо йому білий колір заливки і зберігаємо як стиль. Назвемо його “Background / 0”.

3. Тепер задамо колір заливки # F5F6FA і збережемо як стиль “Background / 10”. Це дасть можливість у майбутньому налаштовувати фоновий колір комірок у 2 кліка.

Крок 2

Лінії між комірками будуть складатися з 2-х половинок. По частині в кожній з комірок-сусідів.

1. Створюємо прямокутник 1х20px з кольором заливки # D0D2DD. Зберігаємо стиль як “Background / 20”.

2. Перетворюємо прямокутник у символ, називаємо його “Vertical-line / 1px”.

3. Уже всередині символу прив’язуємо прямокутник до лівого краю і ставимо йому Fix width.

4. Дублюємо цей символ і міняємо ширину прямокутника (не символ!) на 0.5px. Отриманий символ називаємо “Vertical-line / 0.5px”. Так ми отримали бічні кордони комірок з двома варіантами ліній між комірками: шириною 2px (1px + 1px) і шириною 1px (0.5px + 0.5px).

5. Тепер дублюємо символ ще раз і приховуємо шар з прямокутником. Ім’я цього символу – “Vertical-line / off” і він відповідає за стан, коли бічної межі немає.

Крок 3

1. Вставляємо отриманий символ по лівому краю прямокутника і розтягуємо його по висоті прямокутника.

2. Після цього дублюємо цей символ, відображаємо по вертикалі і рухаємо до правого краю майбутньої комірки.

Крок 4

Таким самим способом створюємо групу символів “Horizontal-line”. Для горизонтальної лінії додаємо товщину 2px і починаємо створення символів з цього стану. Також не забуваємо, що прямокутник всередині символу прив’язуємо до верху і задаємо йому Fix height.

Розміщуємо їх у верхньому і нижньому краях майбутньої комірки і розтягуємо по ширині.

Крок 5

1. Тепер наші 5 шарів (фон і 4 лінії) об’єднуємо в групу.

2. Задаємо прив’язку ліній до відповідних сторін: верхню Horizontal line – до верху, нижню Horizontal line – до низу, і так далі.

3. Також встановлюємо їм відповідні значення Fix size: Fix width для вертикальних ліній і Fix height – для горизонтальних.

Крок 6

1. Додаємо іконку розміром 24х24px.

2. Об’єднуємо її фігури в одну і задаємо їй стиль заливки “Background / 20”.

3. Перетворюємо іконку в символ “Icon / 24 / Checkbox / Empty”.

Тепер все іконки ми додаємо аналогічним способом: з установкою стилю заливки і перетворенням у символ. Це дасть можливість швидко змінювати іконки і їх колір у майбутньому.

Крок 7

1. Вставляємо іконку на 15px від лівого краю і центруємо по вертикалі.

2. Дублюємо символ з іконкою і, аналогічно, розміщаємо біля правого краю.

Крок 8

1. Створюємо текстовий шар з розміром шрифту 16px, інтерліньяж 20px і кольором # 848F9D.

2. Фіксуємо його розмір як 20х20px.

3. Задаємо вирівнювання по лівому краю і вертикальне вирівнювання по центру.

4. Перетворюємо цей текстовий шар у символ “Text / 16px”.

5. Вставляємо текстовий символ на відстані 10px від лівої іконки і центруємо по вертикалі.

6. Розтягуємо символ по ширині, щоб відступ до правої іконки залишився теж 10px.

7. Також збільшуємо символ по висоті до 24px, щоб символ став однією висоти з символами іконок.

Крок 9

1. Об’єднуємо ліву і праву іконки та текстовий символ у групу.

2. Ліву іконку прив’язуємо до лівого краю і ставимо Fix width і Fix height.

3. Праву іконку прив’язуємо до правого краю і теж фіксуємо розміри.

4. Текстовому символу задаємо прив’язку і за лівим і за правим краєм.

Крок 10

1. Перетворюємо цю групу в символ “Content / 2-icons”.

2. Робимо 2 дублікати цього символу.

3. Перший називаємо “Content / Left-icon” і приховуємо праву іконку.

4. Другий називаємо “Content / Right-icon” і приховуємо ліву іконку. Також посуваємо в ньому текст уліво на 34px, щоб наблизити його до лівого краю. Потім розтягуємо текст по ширині на 34px, щоб отримати відступ від правої іконки 10px.

4. Робимо дублікат символу “Content / Right-icon”.

5. Називаємо його “Content / No-icons” і приховуємо праву іконку. Розтягуємо текст ще на 34px, щоб наблизити його до правого краю.

Тільки що ми зробили 4 позиціі комірки: коли в ній іконки зліва і справа, коли видно тільки іконка зліва, тільки справа, і коли в комірці тільки текст.

Крок 11

1. Отриманий символ переміщуємо в групу до фонового прямокутника і бічних ліній.

2. Розтягуємо його по висоті комірки, щоб багатостроковий текст відображався правильно.

3. І ставимо прив’язку до лівого краю, до правого краю, до верхнього краю і до нижнього краю.

Крок 12

Перетворюємо групу з коміркою у символ. Наш універсальний символ готовий!

Крок 13

Задаємо всім шарам у символах зрозумілі імена, щоб легко орієнтуватися в налаштуваннях.

Крок 14

1. Зменшуємо ширину комірки до 236px і за допомогою інструменту Make Grid створюємо таблицю з 7 рядків і 5 стовпців.

2. Об’єднуємо всі комірки в групу. Усередині навмисно не об’єднуємо ні в які групи по строках або стовпцях, щоб легко виділяти комірки по стовпцях або по рядках.

Тепер спробуйте змінити розмір групи. Ми отримали гумову таблицю.

Крок 15

Тепер налаштуємо зовнішній вигляд таблиці, як вам захочеться. Додатково створимо символ для заголовків шляхом дубліката символу тексту. І урізноманітнимо таблицю багаторядковим текстом, комірками без іконок і комірками тільки з лівою або правою іконкою.


Тільки що ми разом зробили заготовку, яка прискорить і підвищить зручність створення таблиць у Sketch. Головне – не забувати нею користуватися.

P.S. Мій файл .sketch можна завантажити звідси.


Раніше Telegraf.Design розповідав про дизайн таблиць для постійного використання.

avatar
Сергій Ревва
Product designer
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: