Здоровий глузд: дописи з тегом figma

Розмір макетів під друк у Figma

Wed, 17 Apr 2024 15:44:43 +0200

Метод підійде не тільки для Фігми, але і до будь-яких екранних редакторів, які не прив’язані до фізичних розмірів (міліметрів, дюймів тощо).

Дисклеймер: винесемо за дужки передачу кольору. Для друку потрібна колірна модель CMYK, а «екранні» редактори заточені лише під роботу з екраном і працюють у RGB/HSB/HSL/Lab та інших адитивних колірних моделях. Але це не завжди буває критично: або можна перевести у CMYK картинку пізніше, або ж при використанні цифрового друку колір буде конвертувати вже сама машина/принтер або друкарі.

При роботі у графічних редакторах ви в процесі роботи вказуєте саме потрібний фізичний розмір вашого макета. Але зображення на комп’ютері зберігаються і виводяться на екран у віртуальних пікселях — квадратних кольорових точках, які відтворюються фізичними пікселями екрана.

Тому далі виникає таке поняття, як роздільна здатність (DPI) — кількість точок фарби на лінію довжиною 1 дюйм (25,4 мм). І коли маємо фіксовану кількість пікселів в картинці, то фізично ми її можемо стиснути до меншого розміру і тоді кількість пікселів на дюйм збільшиться. Або ж розтягнути і кількість пікселів на дюйм, навпаки, зменшиться.

Тож для того, щоб створити картинку для друку у Фігмі (чи іншому редакторі), потрібно задати достатній розмір у пікселях. Його можна порахувати виходячи з потрібного фізичного розміру картинки за формулою:

ширина (мм) * роздільна здатність (DPI, точок на дюйм) / 25,4 (міліметрів у дюймі) = ширина (px, округлити до більшого цілого)
висота (мм) * роздільна здатність (DPI, точок на дюйм) / 25,4 (міліметрів у дюймі) = висота (px, округлити до більшого цілого)

Важливе уточнення: розмір картинки має бути у цілих пікселях, бо у комп’ютерах не передбачені ніякі долі пікселів, лише цілі. Тож розрахунок може дати дробні значення, які потрібно округлити до більшого цілого.

Наприклад, для друку у книжку потрібно зробити картинки. Зазвичай мінімальний потрібний DPI — 300. Якщо маємо формат сторінки книжки 205×290 мм. Тож гарна картинка на всю сторінку має бути 2422×3426 px (відповідно, на розворот має бути вдвічі більша ширина).

Розрахунок:

ширина = 205 мм * 300 DPI / 25,4 = 2 421,2598425197 px = 2422 px
висота = 290 мм * 300 DPI / 25,4 = 3 425,1968503937 px = 3426 px

Допоміжним інструментом буде цей калькулятор роздільної здатності — Pixelcalculator.

У яких сценаріях це може бути корисно: ілюстрації для друкованих видань, макети наружної реклами (в якій DPI можуть варіюватись від 56, 72 до 300) тощо.

Розрахунок масштабу картинок

Ще один метод застосування розрахунків не тільки для Фігми — можливість порахувати необхідний DPI для підготовки вихідних картинок, якщо масштаб макету відрізняється.

Наприклад, вам потрібно зробити білборд 5700×2800 мм, а Ілюстратор донедавна не підтримував дуже великі артборди, тож макет робить, наприклад, у масштабі 1:20 — 285×140 мм. Щоб на виході отримати TIF реального розміру до потрібно вказати при експорті збільшений DPI.

1) Рахуємо розмір потрібної для друку картинки:

5700 * 72 / 25,4 = 16158 px
2800 * 72 / 25,4 = 7938 px

2) Рахуємо тепер у зворотному напрямку, який DPI потрібно вказати при експорті:

16158 px * 25,4 / 285 mm = 1440 DPI
7938 px * 25,4 / 140 mm = 1440 DPI

Плагіни для Фігми

На додачу хочу згадати декілька плагінів для Фігми, які допомагають створити артборди різних друкованих розмірів. Єдиний нюанс: майже всі плагіни рахують надточні розміри з долями пікселя, які варто буде округлити до цілого.

Print for Figma: плагін, що допомагає створити артборди, які б відповідали фізичним аркушам, а також автор розробляє експорт у CMYK.
Unit converter: простий калькулятор для переводу міліметрів у пікселі та навпаки.
DPI2Pixel: створює артборд по заданих у міліметрах розмірах.

Додаємо у Google Sheets посилання на всі файли у теці Google Drive

Mon, 25 Dec 2023 12:40:44 +0200

Досліджував автоматизацію у Фігмі (напишу окремо). В ній для автоматизованого додавання картинок, потрібно давати на них прямі посилання. Можна завантажувати файли на FTP або копіювати напряму з сайтів. Але часто це не дуже зручно і якщо ви працюєте з Google Drive та тримаєте там робочі файли, то буває потрібно отримати прямі посилання на картинки у Драйві.

Також буває необхідно скопіювати багато прямих посилань на файли, наприклад, щоб вставити їх у брендбук або відправити клієнту.

Тож я створив простий гугл-скрипт для використання Google Sheets. Працює так:

Додаєте до вашої таблиці скрипт через Extensions/Apps Script, вставляєте код, запускаєте та даєте всі доступи до вашого облікового запису, оновлюєте сторінку з таблицею.
У комірку A1 вставляєте посилання на теку у Драйві (вона може бути як публічною, так і ні), треба взяти посилання з вікна Share, яке містить в собі …/folder/….
У меню з’явиться новий пункт Links to files, в якому можна вибрати один з варіантів.
Скрипт створить заголовки колонок і вставить всі дані у рядки нижче.

Скрипт виводить такі колонки:
- Name — повна назва файлу
- Type — розширення файлу, знаходить по назві файлу

Date — дата та час зміни файлу
Size, KB — розмір у КБ
- URL — посилання на файл (якщо вся тека доступна для перегляду не тільки вам, то всі файли в ній теж будуть доступні)
- URL Download — інший формат прямого посилання на файли, який можна використати, наприклад, щоб вставити картинку у таблицю функцією =IMAGE().

Я зробив кілька варіантів функцій у скрипті:

Вивід всіх файлів по черзі у певній теці.
Вивід окремих типів файлів (картинки, відео, документи тощо).
І окремою опцією вивід всіх файлів у тій теці та у всіх підтеках (додається ще колонка Folder з назвою теки).

Завантажити скрипт або переглянути на Github Gist.

₴

Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: 4441114450427339 або через сайт.

Автоматизація дизайну з ChatGPT. Частина 2: скрипти для InDesign, Figma, Google Docs, Automator

Fri, 24 Mar 2023 22:37:31 +0200

Продовжую експерименти написання простих скриптів з допомогою ChatGPT. Тут перша частина зі скриптами для Adobe Illustrator.

1. Заміна шрифтів у InDesign

Перше, що захотілося зробити, це перенести скрипт з Ілюстратора в Індизайн (хоч скрипти й схожі, але у програм всередині різна специфіка).

Тож спочатку я спробував подібними до попередніх запитами згенерувати скрипт. Але з 5-6 спроб робочого коду не вийшло. Тому далі я знайшов у спільноті Адоб шматок коду схожий на те, що мені треба.

Але для його використання для різних накреслень і шрифтів не вистачало масиву значень на початку та циклу його виконання. Тому я скопіював код і попросив ChatGPT додати мені ці модулі. І за кілька уточнень вийшло робоче рішення.

Далі зробив ще одну версію, попросивши додати виклик модального вікна, в яке можна ввести руками потрібні назви шрифтів. І він мені це теж зробив:

Створення скрипту заміни шрифту в InDesign

Завантажити скрипти:

Версія, яка заміняє усі шрифти у всіх фреймах;
Версія, яка заміняє шрифт лише у виділеному тексті;
Версія, заміняє шрифт або у виділених фреймах, або в усіх;
Версія з двома вікнами введення назви старого і нового шрифтів;
Версія з одним вікном, в якому можна ввести кілька шрифтів.

1.2. Заміна стилів у InDesign

Окрім зміни шрифтів, попросив придумати скрипт, для заміни одних стилів на інші та ще попросив додати вікно, в якому ці назви можна ввести. Отримав такий скрипт.

Скрипт для InDesign, який заміняє один стиль на інший

А далі попросив замість полів для введення тексту зробити спадні списки зі всіма наявними стилями у документі. Але скрипт сходу не запрацював, але його можна об’єднати з попередніми.

2. Збереження Google Docs у тій самій теці на Драйві

У мене є потреба періодично зберігати поруч з Гугл Документом також і PDF, який я потім можу відправити. При збереженні через меню документів сам документ у мене завантажується у Downloads, як і решта файлів. Але потім мені потрібно знову завантажувати PDF у ту саму теку на драйв. Не складно, але це витрата часу.

Шукав приклади скриптів, які б могли зберігати PDF у ту саму теку, але робочих не знайшов. І от попросив ChatGPT запропонувати мені такий скрипт. І з першого разу отримав робочий варіант:

function onOpen() {
  var ui = DocumentApp.getUi();
  ui.createAddonMenu()
      .addItem(’Convert to PDF’, ’convertDocToPDF’)
      .addToUi();
}

function convertDocToPDF() {
  var docFile = DocumentApp.getActiveDocument().getId();
  var doc = DriveApp.getFileById(docFile);
  var pdfFile = DriveApp.createFile(doc.getAs(’application/pdf’)).setName(doc.getName() + «.pdf»);
  var parentFolder = doc.getParents().next();
  pdfFile.makeCopy(parentFolder);
  pdfFile.setTrashed(true);
}

Також ChatGPT описав інструкцію, як цей скрипт опублікувати, щоб він працював не тільки у конкретному документі, але це виявилось не так просто, як зробити скрипт 😅.

3. Транслітерація тексту в Figma

Колись для транслітерації назв зробили разом з програмістами простий сайт з простим JS, якій заміняв літери на інші за певними правилами. Потім з цього створили скрипти для AI та ID. А потім я стикнувся з такою з задачею у Фігмі, але робочих рішень не знайшов. Щось покрутив, але кинув, бо моїх знань було недостатньо.

І от спробував згодувати цю задачу ChatGPT. Взяв увесь наявний скрипт, як приклад, і попросив придумати, як з цього скрипту зробити скрипт для Фігми. Спочатку запропонований код транслітерував всі тексти на сторінці. Через уточнення він це робив для виділеного тексту, а якщо не виділений, то вже для всього.

І у першому варіанті цей код навіть працює, транслітерує, лишилось тільки допиляти для виключень і різних випадків. Далі вже можна туди додати якийсь інтерфейс за потреби. Тест вважаю вдалим.

Код транслітерації для Фігми від ChatGPT

4. Створення регулярних виразів для GREP / RegEx

Про грепи (або регулярні вирази, або regex) розповідав у лекції і все хотів написати детальну статтю зі всіма посиланнями, які назбирав, але все не знаходив час. GREP дуже потужна штука, але в неї був дуже високий поріг входу, щоб розуміти як будувати потрібні правильні вирази.

І от тепер з ChatGPT цей поріг можна вважати зниженим, бо він дуже гарно конструює навіть складні вирази.

Наприклад, давайте в Індизайні після всіх прийменників додамо нерозривні пробіли у всьому тексті через GREP-стилі. Для цього потрібно знайти у тексті всі прийменники. Тож створюємо стиль для символів без перенесень (no break) та питаємо у ChatGPT список всіх прийменників у вигляді регулярного виразу.

Він розуміє українську і віддає згенерований вираз вже у потрібній формі. Єдине що цей regex не зовсім підійде у Індизайн, тому уточнюємо що це має бути саме GREP для Індизайну і отримуємо робочий запит.

Так само можна конструювати грепи, які знаходять прізвища та ініціали, одиниці вимірювання, дати та місяці, номери телефонів у різних видах тощо. Далі потім знайдені дані (одразу всі, в усьому тексті) можна або переформатовувати або задавати їм потрібний стиль.

Приклади різних регулярних виразів

Регулярні вирази — дуже технічно-орієнтований інструмент. Тому тепер до цього інструменту є людино-орієнтований інтерфейс, який трансформує ваш запит у зрозумілу машині форму.

GREP заміни кириличних лапок латинськими

5.1 Зібрати відео зі скріншотів (з використанням ffmpeg)

Також в лекції згадував, що також у автоматизації дуже допомагають різні консольні команди (cli, command line interface), які заточені на певні дії. З ними така сама ситуація — щоб ними користуватись, потрібно розбиратись в прикладах та документації, що теж техно-орієнтованість.

Тому тут можна теж ChatGPT використовувати, як посередника для пошуку потрібної команди з потрібними параметрами. Наприклад, маємо купу скріншотів зроблених автоматично з різницею у 4-5 секунд, з яких хочемо зробити скрінкаст.

Для роботи з відео є потужна програма ffmpeg, яка працює з командного рядка. Тож попросив ChatGPT запропонувати команду для ffmpeg, яка б об’єднала картинки у відео. З першого разу отримуємо варіант, який на 100% працює та робить відео з заданою кількістю кадрів, які можна скоригувати.

ffmpeg -framerate 30 -pattern_type glob -i ’/path/to/folder/*.jpg’ -c:v libx264 -pix_fmt yuv420p /path/to/output.mp4

Таким чином не потрібні ніякі додаткові програми, для створення відео з картинок: за допомогою Автоматора робимо скріншоти, а через ffmpeg отримуємо відео.

Збір відео з окремих картинок

5.2 Компресія відео (з використанням ffmpeg)

Так само можна пошукати запити і на інші задачі з відео, наприклад, перезберегти з певною компресією чи зміною розміру, або прискоренням.

Раніше я шукав налаштування команд на Stackoverflow, а зараз швидше спитати у ChatGPT. Приклади запитів.

Компресія відео з ffmpeg

6. Зміна в наявному скрипті для Автоматора (Apple Script)

До попереднього пункту: для створення скрінкасту у мене був скрипт, який робив скріншот екрану і клав у потрібну теку в Дропбоксі, а потім зі скріншотів збиралося відео.

Зараз Дропбокс змінив і виходить старий скрипт некоректно працює. Йти шукати у документації до AppleScript як змінити шлях було б довго. Тому скопіював наявний скрипт і попросив замінити шлях збереження скріншотів у теку /Desktop.

7. Збереження в TIFF у Adobe Illustrator

Ще попросив зробити скрипт для швидкого збереження артборду у TIFF з заданим DPI. Отримав отакий варіант, який видавав помилку. Знайшов у спільноті Адоба відповідь зі схожою частиною, та побачив що один з параметрів замість IBM має називатись IBMPC, замінив, запрацювало. Тобто весь скрипт робочий, але помилка була в одному з параметрів. Завантажити скрипт.

Збереження артбоду в TIFF 300dpi

8. OSM Overpass Query

Деякі системи хоч і доступні всім, але поріг входу в них занадто високий. Але ChatGPT і тут зможе допомогти його подолати.

У OpenStreetMap (карта/база даних, які відкриті для всіх) зберігається величезна база геоданих, доступ до яких не суперпростий. І в OSM є мова запитів Overpass, яка дозволяє вивантажувати / запитувати якусь певну частину тих даних. Так от Overpass супер-неінтуітивна мова, і тут Chat GPT допомагає перекласти запит з людської на машинну.

twitter.com/lemonodor/status/1636849040548675584

P.S.

І це я скористався лише безкоштовною версією ChatGPT (модель GPT 3.5), і вже відчув, що стаю продуктивнішим ніби маю ще один механізований маніпулятор на додачу до рук, який розуміє що я хочу зробити та робить це швидше,

Тепер спробую модель Codex (Github Copilot), яка створювалась як раз для написання коду, а також GPT4. Напишу потім, що з цього вийшло.

Також хотів проілюструвати цю думку згенерувавши картинку людини з ще оною механізованою рукою, накшталт, технодесандників з Вархаммеру, але з 20 спроб у Midjourney v4 мого задуму не вийшло ¯\_(ツ)_/¯

Якщо у вас приклади вашого повторюваного дизайн-процесу, який ви повторюєте щоразу і витрачаєте свій час, напишіть на пошту або у телеграм.

₴

Adobe купила Figma за $20 млрд

Thu, 15 Sep 2022 23:25:00 +0200

Чогось через цю новину всі дизайнери шуткують, що тепер і Фігма почне вилітати, як всі програми Адоб. Хоча насправді може ця співпраця тісніше інтегрує Фігму в усю екосистему Адоба і можна буде швидко переносити та підключати psd чи ai файли у Фігму, користуватись всіма шрифтами з бібліотеки чи адобівським фотостоком. Або у Фігмі зроблять нормальну роботу з друком та CMYK, що дозволить робити там крім інтерфейсів і багато друкованих макетів.

Я не бачу, щоб всі масово пересіли з Фотошопу, наприклад, на Pixelmator, хоча той працює набагато швидше і має більше фіч. Або перейшли на трійку програм Affinity, хоча ніби вони як раз вже альтернатива PS, AI та ID. Все ж зв’язана екосистема вирішує, хоча монополія веде до стагнації і занепаду, а нові зручні інструменти не з’являються.

Так само я колись працював у Corel Draw більше ніж 8 років і досі вважаю його кращим редактором для роботи з вектором. Проте я з нього вимушено перейшов на AI в першу чергу через роботу команди, в якій всі були на Адоб, а в другу через те що купив Мак, а на нього Корелу тоді не було. З того часу мої постійні інструменти це AI та ID, зі всіма їх недоліками та іноді корявими інтерфейсами.

Лінійні схеми у Фігмі

Mon, 06 Dec 2021 12:55:55 +0200

Ілюстратор та ІнДизайн дуже потужні продукти, але іноді здаються такими, що застрягли у минулому і дуже повільно розвиваються. Іноді в них не вистачає гнучкості, яка є у нових редакторах типу Фігми.

Ось є задача: намалювати у громадському транспорті лінійні схеми із зупинками. Одразу думаю, «як можна зробити 100500 лінійних схем».

Згадав, що у Фігмі є компоненти та в теорії можна створити універсальний компонент, в який можна підставляти назви зупинок та пересадок.

На додачу є плагіни, за допомогою яких можна підставляти у компоненти дані з JSON, CSV або напряму з Гугл-таблиць.

Не зрозумів тільки, як налаштувати що розмір фрейму підлаштовувався під довжину всталеного тексту.

😑 Але у цього способу є великий мінус — Figma розроблена для екранів, а не для друку, і макет буде в RGB, тобто для друку не підготовлений. Плюс при зберіганні у ПДФ та відкритті файлу в AI, нічого не відображаться, хоча контури у файлі присутні.