{"id":14286,"url":"\/distributions\/14286\/click?bit=1&hash=d1e315456c2550b969eff5276b8894057db7c9f3635d69a38d108a0d3b909097","hash":"d1e315456c2550b969eff5276b8894057db7c9f3635d69a38d108a0d3b909097","title":"\u041f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0434 \u043a\u0440\u0443\u043f\u043d\u0435\u0439\u0448\u0438\u043c\u0438 \u0418\u0422-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u044b","buttonText":"","imageUuid":""}

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

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

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

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

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

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

Все горячие клавиши на русском по ссылке 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
Комментарии
-3 комментариев
Раскрывать всегда