0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>25 сен 2024</li>
2
<ul><li>25 сен 2024</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, за что дизайнеры любят Figma и почему ей стоит пользоваться.</p>
4
</ul><p>Рассказываем, за что дизайнеры любят Figma и почему ей стоит пользоваться.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.</p>
6
<p>Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.</p>
7
<p>Figma - графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров.</p>
7
<p>Figma - графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров.</p>
8
<p>Рассказываем, в чём особенности Figma и почему вам стоит начать изучать её прямо сейчас.</p>
8
<p>Рассказываем, в чём особенности Figma и почему вам стоит начать изучать её прямо сейчас.</p>
9
<p>Все файлы Figma хранятся не у вас на компьютере, а в облаке. Поэтому вам не придётся переживать за их сохранность и каждый раз искать черновики макета с названием "финал52" в "Новой папке 28". Все изменения в Figma сохраняются автоматически.</p>
9
<p>Все файлы Figma хранятся не у вас на компьютере, а в облаке. Поэтому вам не придётся переживать за их сохранность и каждый раз искать черновики макета с названием "финал52" в "Новой папке 28". Все изменения в Figma сохраняются автоматически.</p>
10
<p>Облачное хранение позволяет использовать Figma как копилку для красивых картинок. Но имейте в виду, что чем больше изображений в файле, тем дольше придётся ждать их окончательной загрузки.</p>
10
<p>Облачное хранение позволяет использовать Figma как копилку для красивых картинок. Но имейте в виду, что чем больше изображений в файле, тем дольше придётся ждать их окончательной загрузки.</p>
11
<p>Удобный инструмент внутри Figma, который похож на арт-борды в Photoshop. Фрейм - это отдельное полотно, внутри которого дизайнеры проектируют экраны приложений.</p>
11
<p>Удобный инструмент внутри Figma, который похож на арт-борды в Photoshop. Фрейм - это отдельное полотно, внутри которого дизайнеры проектируют экраны приложений.</p>
12
<p>Чтобы вам не приходилось каждый раз выверять высоту и ширину фреймов, разработчики предусмотрели несколько стандартных размеров под разные устройства: все виды iPhone и самые популярные смартфоны с Android.</p>
12
<p>Чтобы вам не приходилось каждый раз выверять высоту и ширину фреймов, разработчики предусмотрели несколько стандартных размеров под разные устройства: все виды iPhone и самые популярные смартфоны с Android.</p>
13
<p>Эти элементы позволят вам стандартизировать абсолютно всё, что есть у вас в макете. С помощью компонентов можно задать общий стиль и в случае необходимости быстро изменить его.</p>
13
<p>Эти элементы позволят вам стандартизировать абсолютно всё, что есть у вас в макете. С помощью компонентов можно задать общий стиль и в случае необходимости быстро изменить его.</p>
14
<p>Например, вы закончили разработку 50 макетов, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. В Photoshop на эту задачу придётся потратить целый день, а в Figma, благодаря компонентам, - всего пару секунд.</p>
14
<p>Например, вы закончили разработку 50 макетов, заказчик попросил вас поменять пункт меню в шапке и прислать все макеты на утверждение. В Photoshop на эту задачу придётся потратить целый день, а в Figma, благодаря компонентам, - всего пару секунд.</p>
15
<p>До Figma нескольким дизайнерам было сложно работать над одним проектом и передавать макеты разработчикам. Скидывать локальные файлы друг другу неудобно, а тот же Photoshop может отказаться открывать макет без нужных шрифтов. В Figma этих проблем нет, так как файлы находятся в облаке и все изменения автоматически сохраняются в нём.</p>
15
<p>До Figma нескольким дизайнерам было сложно работать над одним проектом и передавать макеты разработчикам. Скидывать локальные файлы друг другу неудобно, а тот же Photoshop может отказаться открывать макет без нужных шрифтов. В Figma этих проблем нет, так как файлы находятся в облаке и все изменения автоматически сохраняются в нём.</p>
16
<p>Если у вас бесплатный аккаунт, то вы можете открыть доступ только на просмотр. С подпиской - поделиться доступом на редактирование.</p>
16
<p>Если у вас бесплатный аккаунт, то вы можете открыть доступ только на просмотр. С подпиской - поделиться доступом на редактирование.</p>
17
<p>Если вы уже когда-то пробовали Figma и у вас остались старые черновики, их нужно будет вручную перенести в команду. Вот как это сделать:</p>
17
<p>Если вы уже когда-то пробовали Figma и у вас остались старые черновики, их нужно будет вручную перенести в команду. Вот как это сделать:</p>
18
<p>1. После регистрации в Figma вас попросят сделать команду. Её будет видно на главной странице в приложении или на сайте.</p>
18
<p>1. После регистрации в Figma вас попросят сделать команду. Её будет видно на главной странице в приложении или на сайте.</p>
19
<p>2. На правой панели в главном меню перейдите в Drafts to move и выберите любой макет на появившейся странице.</p>
19
<p>2. На правой панели в главном меню перейдите в Drafts to move и выберите любой макет на появившейся странице.</p>
20
<p>3. Как только вы кликнете по любому черновику, внизу появится всплывающее окно - нажмите на нём Move file и затем выберите вашу команду.</p>
20
<p>3. Как только вы кликнете по любому черновику, внизу появится всплывающее окно - нажмите на нём Move file и затем выберите вашу команду.</p>
21
<p>4. На правой панели нажмите Drafts, перейдите в свой макет и нажмите кнопку Share - появится окно, в котором вы сможете настроить доступ к документу и скопировать ссылку.</p>
21
<p>4. На правой панели нажмите Drafts, перейдите в свой макет и нажмите кнопку Share - появится окно, в котором вы сможете настроить доступ к документу и скопировать ссылку.</p>
22
<p><strong>В Skillbox есть курс, на котором учат работать в Figma</strong></p>
22
<p><strong>В Skillbox есть курс, на котором учат работать в Figma</strong></p>
23
<p>Это курс "<a>Figma с нуля до PRO</a>". Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне и научитесь:</p>
23
<p>Это курс "<a>Figma с нуля до PRO</a>". Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне и научитесь:</p>
24
<ul><li>разрабатывать адаптивные макеты;</li>
24
<ul><li>разрабатывать адаптивные макеты;</li>
25
<li>делать интерактивные прототипы и анимацию;</li>
25
<li>делать интерактивные прототипы и анимацию;</li>
26
<li>создавать компоненты и библиотеки стилей;</li>
26
<li>создавать компоненты и библиотеки стилей;</li>
27
<li>готовить макеты для передачи в разработку.</li>
27
<li>готовить макеты для передачи в разработку.</li>
28
</ul><p>Figma можно пользоваться бесплатно, но с ограничениями для командной работы и продвинутых функций:</p>
28
</ul><p>Figma можно пользоваться бесплатно, но с ограничениями для командной работы и продвинутых функций:</p>
29
<ul><li>Ваши личные файлы можете редактировать только вы. При этом личных файлов может быть сколько угодно.</li>
29
<ul><li>Ваши личные файлы можете редактировать только вы. При этом личных файлов может быть сколько угодно.</li>
30
<li>История версий хранится 30 дней.</li>
30
<li>История версий хранится 30 дней.</li>
31
<li>Прототипирование с переменными, режим разработчика и некоторые другие функции недоступны в бесплатной версии.</li>
31
<li>Прототипирование с переменными, режим разработчика и некоторые другие функции недоступны в бесплатной версии.</li>
32
</ul><p><strong>С чего начать изучать Figma</strong></p>
32
</ul><p><strong>С чего начать изучать Figma</strong></p>
33
<p><a>Самоучитель по Figma</a></p>
33
<p><a>Самоучитель по Figma</a></p>
34
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
34
<p>Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.</p>
35
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>
35
<a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>