Figma — это инструмент для создания дизайна, который очень любят веб-разработчики. Одна из причин, почему Figma так популярна — это горячие клавиши. Они помогают работать быстрее и проще. Давайте рассмотрим самые важные из них.

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Фигма с интерфейсом до нажатия Ctrl + \
Фигма с интерфейсом до нажатия Ctrl + \
Фигма после нажатия Ctrl + \
Фигма после нажатия Ctrl + \

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.

А если не пользуетесь — попробуйте.

Горячие клавиши для работы с инструментами

Перемещение объектов (V)

Эта комбинация клавиш активирует инструмент для перемещения объектов. Он нужен, чтобы перетаскивать элементы по экрану.

Как работает: жмёте V и двигаете выделенный объект стрелками.

Где найти в интерфейсе: стрелка на верхней панели.

Создание фреймов (F)

Эта комбинация клавиш активирует инструмент для создания фреймов. Кадры в Figma — это как слои в фотошопе. Они помогают организовать ваш дизайн и делают его более структурированным.

Где найти в интерфейсе: решётка на верхней панели.

Добавление текста (T)

Эта комбинация клавиш активирует инструмент для добавления текста. Он нужен, чтобы написать что-то на вашем дизайне.

Как работает: рисуете рамку для текста, пишете текст.

Где найти в интерфейсе: буква Т на верхней панели.

Горячие клавиши для работы с текстом

Это стандартные горячие клавиши, с которыми вы работаете и в других программах — например, Word или Гугл-документах.

Сделать текст полужирным (Ctrl + B или ⌘ + B для Mac)

Эта комбинация клавиш делает выделенный текст жирным. Это удобно, когда вы хотите выделить что-то важное в тексте.

Как работает: выделяете нужный текст, жмёте Ctrl + B.

Где найти в интерфейсе: в правой панели.

Сделать текст курсивом (Ctrl + I или ⌘ + I для Mac)

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

Как работает: выделяете нужный текст, жмёте Ctrl + I.

Где найти в интерфейсе: в правой панели.

Горячие клавиши для работы со слоями

Выделить все на экране (Ctrl + A или ⌘ + A для Mac)

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

Как работает: жмёте Ctrl + A, видите что-то такое:

Сгруппировать объекты (Ctrl + G или ⌘ + G для Mac)

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

Как работает: выделяете нужные объекты, жмёте Ctrl + G. В меню слева появляется группа выделенных объектов. Сравните с предыдущим скриншотом.

Дополнительные горячие клавиши

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

Копирование (Ctrl + C или ⌘ + C для Mac) и вставка (Ctrl + V или ⌘ + V для Mac)

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

Как работает: вы уже и сами знаете.

Изменение размера текста (Ctrl + Shift + </> или ⌘ + Shift + </> для Mac)

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

Кстати, < и > это не стрелки влево и вправо, а символы, которые вы используете при вводе тегов (на русской клавиатуре на клавишах Б и Ю).

Где найти в интерфейсе: в правой панели.

Обратить выделение (Ctrl + Shift + A или ⌘ + Shift + A для Mac)

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

Дублирование выбора на месте (Ctrl + D или ⌘ + D для Mac)

Эта комбинация клавиш позволяет быстро создать копию выбранного объекта прямо на его месте. Это удобно, когда вам нужно создать несколько одинаковых элементов.

Переименование (Ctrl + R или ⌘ + R для Mac)

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

Где найти в интерфейсе: правый клик по объекту.

Быстрый экспорт (Ctrl + Shift + E или ⌘ + Shift + E для Mac)

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

Где найти в интерфейсе: в самом низу правой панели.

Материалы по теме


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

Читать дальше
Софт
  • 10 августа 2023
Старт в Figma для верстальщика

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

Читать дальше
Софт
  • 2 августа 2023
Инструменты для работы со шрифтами

Инструменты для работы со шрифтами

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

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

Читать дальше
Софт
  • 29 июня 2023
10 лучших тем для VS Code

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

Читать дальше
Софт
  • 11 июня 2023
10 полезных плагинов VS Code для вёрстки

10 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Его удобно использовать, и у него есть множество полезных расширений, с помощью которых легко оптимизировать работу. Такие плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы.

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

Читать дальше
Софт
  • 9 июня 2023
17 полезных плагинов JavaScript в VS Code

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

Читать дальше
Софт
  • 6 июня 2023
Подборка микроанимаций для фронтенда с CodePen в 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

Читать дальше
Софт
  • 12 апреля 2023
Как собрать проект на Webpack

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

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

Читать дальше
Софт
  • 7 апреля 2023
Как скопировать файлы в каталог сборки

Как скопировать файлы в каталог сборки

Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование специального плагина CopyWebpackPlugin. Рассмотрим подробнее, как это делать.

Плагин CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию.

Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // ваша конфигурация Webpack здесь
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets'),
          to: path.resolve(__dirname, 'dist/assets')
        }
      ]
    })
  ]
};

В плагине содержится массив объектов patterns. Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

💫 Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns.

Каждый объект-шаблон содержит свойство from, оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  //ваша конфигурация Webpack здесь

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/images', to: 'dist/images' },
        { from: 'src/index.html', to: 'dist' },
      ],
    }),
  ],
};

В примере первый объект-шаблон копирует каталог images из src в dist/images, а второй — копирует файл index.html из src в dist.

Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

Для более детальной настройки копирования файлов существуют другие опции, доступные в CopyWebpackPlugin, их подробное описание можно прочитать в документации.

Другие способы

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

Лоадерfile-loader позволяет копировать статические файлы в указанную папку при сборке проекта.

Чтобы использовать file-loader, установите его с помощью npm:

npm install file-loader --save-dev

Затем добавьте его в конфигурационный файл webpack.config.js:

module.exports = {
  // ... ваша конфигурация webpack ...

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
    ],
  },
};

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадерurl-loader работает аналогично file-loader, но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev

Затем добавить в конфигурационный файл webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images. Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

Софт
  • 30 марта 2023