Анастасия Свеженцева

Чтобы вставить свою google-карту в Figma можно использовать плагин Map Maker.

Как добавить карту по шагам:

1. Выберите прямоугольник в который хотите вставить карту
   
2. Запустите плагин Map Maker
   
3. Введите в плагине название города и отрегулируйте Zoom Level карты
   
4. Нажмите кнопку Make Map
   

Изменить стиль кнопки после клика по ней в прототипе Figma можно с помощью настройки Open Overlay:

1. Разместим кнопку для состояния «‎после клика» на отдельном артборде, в моем примере это залитая цветом кнопка. Артборды с состояниями элементов можно располагать над соответствующим артбордом, где они должны появляться, чтобы не мешать экранам основного сценария.
   
2. На артборде с дизайном для кнопки добавляем интерактивность по клику(On Click) и выбираем опцию Open Overlay, чтобы поверх дизайна появлялся артборд с залитой кнопкой: On Click → Open Overlay → Frame 2
   
3. В настройках Overlay выбираем тип позиционирования появления элемента – Manual(ручная настройка), сдвигаем кнопку пока она не займет нужное место после появления на артборде.
   
4. Теперь настраиваем обратный переход в прототипе: по клику на залитую кнопку (она вынесена отдельно в артборде) переходим на основной артборд с дизайном. On Click → Navigate To → Frame 1
   
5. Нажимаем плей и смотрим как работает прототип
   

Панель управления в Figma можно увеличить с помощью горячих клавиш.

Windows:

• Увеличить панель управления в Figma: Ctrl + Alt + =
  
• Уменьшить: Ctrl + Alt + -
  
• Установить по умолчанию: Ctrl + Alt + 0
  

macOS:

• Увеличить панель управления в Figma: Option - Command - =
  
• Make Smaller: Option - Command - -
  
• Установить по умолчанию: Option - Command - 0
  

Сделать текст по кругу в Figma можно с помощью плагина Figma To Path, вот как это делать:

1. Рисуете круг или окружность
   
2. Выделяете текст и окружность, в плагине высветится надпись: "curve and text selected", нажимаете в плагине кнопку Link, для того, чтобы связать текст и окружность
   
3. Плагин создаст копию надписи и расположит буквы по окружности, дальше настраиваете параметры в плагине, такие как выравнивание по центру или по краю, направление текста по окружности/reverse
   
4. Выделите первоначальный текст который вы линковали и настройте на панели свойств по вкладке Text расстояние между буквами/Letter Spacing. Если текст короткий, то можно увеличить расстояние между буквами, чтобы текст занял всю длину окружности. Так же можно настроить размер текста и его толщину.
   

Важная особенность: если окно плагина открыто, вы можете переписывать или редактировать любые параметры исходного текст и текст по кругу тоже будет моментально меняться.

Создание круговых диаграмм в Figma по шагам:

1. Создаем круг/Ellipse и наводим на него курсор, справа появится точка старта разрыва инструмента Arc для изменения длины окружности.
   
2. Потяните за эту точку и задайте нужную длину окружности, что удобно, она считается в процентах, поэтому если нужен кусок диаграммы в 40% вы выставляете это же значение при изменении длины
   
3. Чтобы сделать отверстие в центре круга, потяните за точку в центре круга/параметр Ratio изменяет толщину отверстия в круге
   
4. Чтобы повернуть окружность, потяните за точку старта/Start, его направляющая отмечена дополнительной точкой внутри, и измените угол поворота окружности
   

Вот еще вариант: можно использовать шаблон с неоновым эффектом Neon effect (Community). В шаблоне прилагается инструкция.

1. Дублируете себе файл figma с шаблоном Neon effect (Community)
   
2. Свой текст превращаете в векторную фигуру с помощью функции Flatten, убираете заливку/Fill и ставите строк/Stroke
   
3. Выбираете полученную векторную фигуру и нажимаете Enter, так вы переходите в редактирование точек фигуры, выделаете все точки и копируете
   
4. Заходите в шаблон Neon effect (Community) во вторую страницу Neon, находите мастер компонент. Выбираете фигуру из шаблона в компоненте и нажимаете Enter. В режиме редактирования выделаете все точки, удаляете их и вставляете точки своей фигуры.
   
5. Возвращаетесь в первую страницу Cover и смотрите результат
   

Добавить тень к тексту вы можете с помощью эффекта Drop Shadow на панели справа:

Чтобы клиент мог оценить дизайн лучше скидывать ему ссылку на просмотр прототипа.
Отправляем клиенту ссылку на макет по шагам:

1. Включить предпросмотр/present в правом верхнем углу
   
2. В режиме предпросмотра нажать кнопку Поделиться прототипом/Share Prototype
   
3. Выбрать настройки шаринга: Anyone with the link – can view
   
4. Нажать на кнопку Copy link – появится снизу сообщение что ссылка скопирована. Эту ссылку отправляете клиенту.
   
5. Перейдя по ссылке в браузере клиент увидит ваш дизайн.
   

В Figma сейчас разбивают текстовый блок на две части, чтобы добиться эффекта обтекания текстом.

Принцип такой: Сначала убираем заливку/ fill, затем добавляем обводку/ stroke. Получается прозрачная контурная кнопка

Есть несколько способов как выделить несколько объектов в Figma:

1. просто выделить область на макете, где находятся несколько слоев
   
2. зажимаем клавишу shift и выделяем нужные объекты на макете по одному
   
3. зажимаем ctrl и выделяем в списке слоев нужные слои по одному
   
4. зажимаем shift и выделяем в списке слоев несколько слоев подряд
   

Принцип такой: объединяем несколько слоев в группу, горячие клавиши Ctrl+G, группу
уже экспортируем, картинка в итоге получается одна

Добрый день. В Figma есть функция Scale (Горячая клавиша K) на панели инструментов в Move Tool, с ней можно увеличивать текст просто потянув за одну из сторон.

Принцип такой: обводим предмет пером, затем отключаем обводку/stroke у фигуры и включаем заливку/fill. После этого вектор перемещаем под изображение, выделяем оба слоя и включаем маску.

Добрый день. Чтобы экспортировать изображение для Retina, его нужно сохранить в увеличенном вдвое размере(2x), чтобы, к примеру, картинка с разрешением 200x200px стала 400x400px. Эти увеличенные изображения затем отображаются в первоначальном размере, что позволяет добиться четкой, чистой графики на экранах с высокой плотностью пикселей.