Artem Antonyan

Antonyan Artem

UX/UI Designer

Hand Drawn Wireframes

How amazing it will be if we can create fully editable hand-drawn wireframes on a fly, right inside our favorite tools like Sketch, XD or Figma?⁣⁣⁣⁣
⁣⁣⁣⁣
Let’s do it in 6 easy steps -⁣⁣⁣⁣
1️⃣ Use Oval, Rectangle, or Pen tool to draw a Shape.⁣⁣⁣⁣
Set Fill’s alpha to “0” and make the oval completely transparent.⁣⁣⁣⁣
⁣⁣⁣⁣
2️⃣ Select Oval and Choose the desired value for the Stroke thickness and set its position to Outside.⁣⁣⁣⁣
⁣⁣⁣⁣
3️⃣ Make the oval completely transparent by setting its Fill’s alpha to “0” ⁣⁣⁣⁣
⁣⁣⁣⁣
4️⃣ “Double Click” on Path to activate the edit mode and use the “Pen” tool to add more anchor points to the shape. ⁣⁣⁣⁣
⁣⁣⁣⁣
5️⃣ Select each anchor point and move it slightly to Left, Right, Top or Bottom.⁣⁣⁣⁣
⁣⁣⁣⁣
6️⃣ Repeat the same steps to create all the basic elements. Save each element as a symbol and use it later.⁣⁣⁣⁣

Яндекс.Метрика