Часть 1: Итерация

На прошлой неделе мы видели, как нарисовать фигуру с помощью скрипта. Это заняло больше времени, чем использование пользовательского интерфейса, поэтому вы можете задаться вопросом… почему? Ответ вы найдете в этой статье: итерация. Несмотря на то, что figma отлично подходит для реализации повторяющихся действий, их создание сценариев, безусловно, является лучшим вариантом, чтобы заработать время, если вы хотите реализовать сложные формы или автоматизировать свой рабочий процесс.

Сегодня мы научимся создавать сотню обведенных кругов в мгновение ока (или даже больше, вы ограничены только своим процессором). Мы их аранжируем и создадим интересную композицию.

Эта статья является частью серии под названием «Креативное кодирование с помощью figma». Мы настоятельно рекомендуем вам читать серию с самого начала, так как часть кода повторно используется из одной статьи в другую. Предыдущую статью можно найти здесь, а введение — здесь.

Создание формы

Для этого давайте создадим функцию createEllipses, которая принимает в качестве аргумента количество эллипсов, которые мы хотим создать:

function createEllipses(number) {}

Зацикливание

Мы собираемся воспроизвести то, что мы видели в примере с квадратом, чтобы перебрать массив с помощью функции диапазона. Добавьте эту строку в свою вновь созданную функцию следующим образом:

function createEllipses(number) {
  range(1, number).map(i => {}
}

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

function createEllipses(number) { 
  range(1, number).map(i => {
    Ellipse({ 
      strokes: [ { type: “SOLID”, color: BLACK } ],
      fills: []
    })
  })
}

Здесь мы не увидим никаких различий, потому что эти круги имеют одинаковые размеры и координаты. Мы должны использовать параметр i, чтобы немного встряхнуть то, что здесь происходит. Добавьте эти строки, чтобы увеличить диаметр круга на 35 пикселей с каждой итерацией:

function createEllipses( number ) {
  range(1, number).map(i => {
    Ellipse({
      width: 100 + (i * 35)
      height: 100 + (i * 35),
      strokes: [ { type: "SOLID", color: BLACK } ],
      fills: []
    })
  })
}

Если вы запустите скрипт сейчас, вы можете быть удивлены (и довольны?) результатом. Обязательно вызовите функцию, добавив эту строку в конец скрипта перед его запуском:

createEllipses(100) // create 100 ellipses

Здесь круги «растут», но не двигаются. Чтобы сделать их концентрическими, мы должны настраивать координаты нашего круга на каждой итерации. Добавьте эти параметры в функцию Ellipse:

x: (i * - 35/2)
y: (i * - 35/2)

Теперь поговорим! Вот мой результат:

Если вы заблудились, просто скопируйте/вставьте окончательный код в scripter:

function createEllipses( number ) {
  range(1, number).map(i => {
    Ellipse({
      x: (i * - 35/2),
      y: (i * - 35/2),
      width: 100 + (i * 35),
      height: 100 + (i * 35),
      strokes: [ { type: "SOLID", color: BLACK } ],
      fills: []
    })
  })
}
createEllipses(100) // create 100 ellipses

Игра с ударами

Теперь нам нужен еще более интересный результат. Допустим, мы начнем с того, что поиграем с шириной обводки.

Для этого есть параметр, и он называется strokeWeight. Мы хотим начать с тонкого штриха и постепенно увеличивать его толщину. Мы собираемся использовать нашу переменную i следующим образом:

strokeWeight: 0.15*i

Мы говорим: «Начните с обводки толщиной 0,15 пикселя и добавляйте 0,15 пикселя каждый раз, когда вы создаете круг». Давайте запустим это.

Игра с цветами

Чтобы играть с цветами, нам сначала нужно понять, как цвета работают в скриптере. Возьмем эту строку:

strokes: [{ type: "SOLID", color: BLACK }]

В скриптере по его фиолетовому цвету видно, что BLACK — это существующая переменная, доступная через API Figma. Если вы перейдете к ссылке (⌥ + щелчок), вы увидите, что BLACK на самом деле является результатом функции RGBA, выполненной с 0, 0, 0 в качестве параметров, что означает r: 0, g: 0, a: 0 (красный, синий и зеленый).

Если это не звонит в колокол, рекомендую взять 5s и прочитать эту статью о цветах rgb в css.

Обычно каждый параметр (красный, синий и зеленый) находится в диапазоне от 0 до 255. В скриптере он вычисляется от 0 до 1: это означает, что если у вас есть значение 180 для красного цвета, это будет 180/255 = 0,7.

В заключение, эта строка кода выше эквивалентна:

strokes: [{ type: "SOLID", color: RGB(0, 0, 0) }] 
// black = rgb(0, 0, 0)

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

strokes: [{ 
  type: "SOLID", color: RGB((i/number), 0, (1-(i/number)))
}]

Таким образом, красный цвет будет увеличиваться с i, а синий будет уменьшаться по мере достижения конца цикла. Если вы запустите скрипт:

Вот окончательный код для достижения того, что вы видите выше:

function createEllipses( number ) {
  range(1, number).map(i => {
    Ellipse({
      width: 100 + (i * 35),
      height: 100 + (i * 35),
      x: (i * - 35/2),
      y: (i * - 35/2),
      strokes: [{
        type: "SOLID",
        color: RGB((i/number), 0, (1-(i/number)))
      }],
      fills: [],
      strokeWeight: 0.15*i
    })
  })
}
createEllipses(100)

Я надеюсь, вам понравилось то, что вы узнали сегодня, и помните: вы можете свободно играть с этим фрагментом кода, чтобы добиться сногсшибательных результатов. Буду рад видеть ваши арты в комментариях!

Я с нетерпением жду встречи с вами на следующей неделе, мы собираемся сойти с ума, закодировав известную математическую форму в Figma.

Получайте удовольствие от кодирования ❤️