стрелочные указатели для Sketch - 1
Стрелки масштабируются, но углы не искажаются

Это урок по созданию масштабируемых динамических стрелочных указателей для UX схем. На пост я вдохновился шаблоном User Flow Diagram Template от Jarosław Ceborski — увидел, что там создали и подумал, что было бы неплохо разобрать, как им это удалось.

Скачайте мой Sketch-файл для наглядности.

Задача

стрелочные указатели для Sketch - 2

Обычная линия с закругленными углами и стрелка дают искажение в углах и на кончике, когда вы ее растягиваете.

Решение

Используйте символы и опцию закругления углов, чтобы масштабировать без искажений.

стрелочные указатели для Sketch - 3
Рисунок 1
стрелочные указатели для Sketch - 4
Рисунок 2
стрелочные указатели для Sketch - 5
Рисунок 3
  1. Нарисуйте линию, используя инструмент Vector
  2. Присоедините точки к сетке, чтобы они были выровнены
  3. Выберите два угла и задайте параметру curving значение Straight, а также с помощью слайдера Corners задайте нужное закругление (см. Рис. 4)
  4. Сделайте линию символом
  5. Добавьте стрелку и сделайте так, чтобы она выступала за пределы символа, чтобы линия выровнялась с центром стрелки, а верхняя половина стрелки была за границами символа (Рис.2, центр)
  6. С помощью опции ресайза задайте Pin to Corner для стрелки (Рис. 5). Линия пусть остается по умолчанию в Stretch.
  7. Теперь можете дублировать, растягивать, переворачивать символ, как вам угодно.
стрелочные указатели для Sketch - 6
Рисунок 4: Настройки для двух точек в шаге 3 (см. выше)
стрелочные указатели для Sketch - 7
Рисунок 5: Прикрепите стрелку к углу

Бонус

Этот прием работает для единичных стрелок, но вы можете использовать вложенные символы Sketch и для других типов (например, простые, одноугольные, U-образные стрелки), а также для различных форм острия стрелки (круглые, ромбовидные и т.д.)

Как здесь!

стрелочные указатели для Sketch - 8
Примеры: Все эти стрелки используют один и тот же символ, с разными линиями и верхушками.

Я оформил все в файле Sketch, там вы найдете один символ с вложенными стилями для четырех типов линий и восьми типов верхушек стрел.