Что важно знать для уверенной работы в фигма?

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

1. Основные инструменты
Это база. Важно понимать как рационально пользоваться возможностями программы. Изучите каждую кнопку на панели инструментов. Узнайте как сделать пятиугольник и чем отличается инструмент Move (v) от Scale (k).

Главная панель инструментов Figma
Главная панель инструментов Figma

2. Горячие клавиши

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

Все горячие клавиши на русском по <a href="https://www.figma.com/community/file/898099991611761079" rel="nofollow noreferrer noopener" target="_blank"><i>ссылке</i></a> 
Все горячие клавиши на русском по ссылке 

3. Компоненты и стили

Главное правило IT гласит: не повторяй себя. Если элемент повторяется больше двух раз, сделайте из него шаблон. В чем польза? Внося правки в главный компонент или стиль (текста, цвета, эффекта, etc) будут изменяться все элементы, имеющие эту настройку

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

4. Автолэйаут

Это новая функция в Фигме, позволяющая адаптировать элемент под любые размеры макетов. Представьте, что у вас есть календарь и вам нужно сделать его шире на 30 px. Автоскейл позволяет сделать это одним движением, а не через настройки отдельных элементов
Скриншоты из макета под видео о создании календаря через компоненты и статьи о библиотеках

5. Научитесь упорядочивать элементы

Это важно как минимум с иконками. Упорядочивание позволит быстро их заменять при необходимости. Для этого нужно упаковать иконку в компонент и прописать "путь" к ней вида Block name / icon_name (хотя в прочем какого хотите вида)

Скриншот из обучающего видео от Дмитрия Варфоломеева
Скриншот из обучающего видео от Дмитрия Варфоломеева

Порядок в слоях также необходим. Объединяйте элементы в группы (или фреймы), делите макеты по страницам (например, страница для мудборда, еще одна под UI-kit и третья под разработку), давайте корректное название группам и шейпам

Варфреймы одного из заказчиков были оформлены так
Варфреймы одного из заказчиков были оформлены так

6. Прототипирование

Самая интересная и объемная (на мой взгляд) тема в изучении фигмы. Прототипирование позволяет анимировать макет. Почему это важно? Верстальщики должны понимать какую анимацию вы планируете на сайте. Как должна крутиться галерея и откуда выскакивают звездочки. Прототипирование как раз это и показывает

Гифка взята из вводной статьи Skillbox об основных функциях прототипирования

Думаю, путь к сеньору лежит через глубинное изучение каждой из этих тем. Штож... Я в пути.

Рекомендую прочитать статьи-источники. Есть дополнения или замечания? Пиши в комментарии

22
Начать дискуссию