Story: Website design process
When I develop a website, the process of a prototype is essential. I recently use Figma for prototyping, previously I used Adobe XD and Sketch. In 2022, Adobe acquired Figma. I don’t know what will happens between XD and Figma. Anyway, all softwares are great and you can choose the platform based on your situation.
I feel that the process from prototype to development can be improved more. In short, development can be a shortcut if I have a prototype. There are laptop ver, tablet ver, and mobile ver of a website on the Figma artboard. Currently, I need to make them on Webflow from scratch. There are templates and components, but I haven’t used them often yet.
I found a new course at Webflow University, Figma to Webflow. I didn’t see it when I took a test for Webflow expert partner. It takes around 6 hours. You can complete it in a day.
What is Webflow?
🌎 Webflow: The Web Development Platform Of The Future
Webflow is created for a designer who is not good at programming. Once you master Webflow, you can develop an interactive website yourself.
Create a CMS Collections layout
©Webflow
The description said, Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow. I may skip Cinema 4D part, but I am going to take look videos.
Intro to Figma (Part 2 of 7) — Webflow University
©Webflow
What I learned:
– Paste without formatting
Looking at the process is good, but I did not learn a lot from the video. I don’t think that people collaborate with others like this video. You can find a YouTube channel by Figma and it is more condensed using many functions of Figma.
Figma 101 For Freelance Web/Graphic Designer
Figma 201 For Freelance Web/Graphic Designer
Build your Figma design in Webflow — Figma to Webflow (Part 5 of 7)
©Webflow
What I learned:
– Select body ⇢ global setting
-Body ⇢ section ⇢ container* ⇢ elements
*I personally use block rather than container elements. Many tutorials add container/block after adding elements and I don’t like it. It makes a user confused.
– CH=character
Reference: Control width of text elements by character count using “ch” unit
– EM – relative to the font size of the parent element, REM – relative to the font size of the body element
Reference: Input values and units
*In the video, the instructor used px, but the typography units are deep.
– Navbar element*
*I also make navbar by block elements.
– Maximum width
– Negative margin
– Position & Z-index
– Combo class
– Command + E
– Command + drag grid element into the grid
– Accessibility
– Section ID
– Section ID
– Position sticky
– Current state
It was a very long video… Looking at the development process is a good comparison with my own process. There is nothing correct or wrong, but let’s keep it efficient. You should understand everything that he is talking about.
Figma to Webflow 2021 – Advanced Follow Along Tutorial
©Timothy Ricks
Looking at the development process of other designer is interesting. How to develop is up to you. He is an advanced Webflow developer and knows code well(not no-code ). May not be easy to follow his way.
Relume
I heard Relume somewhere on YouTube. Relume is a library of Webflow components. Looks a lot, but I don’t have a plan to subscribe to it right now.
Wizardry 2.0
©Timothy Ricks
He is a top-tier Webflow developer. He knows code and Webflow wizard.
Wanted to see Figma to Webflow usage more
It was not many tips for Figma to Webflow during the course. I understand that this is Webflow-focused content, but I wanted to see Figma more. Anyway, I could remind Webflow knowledge once again through the course.
In the last video, the instructor mentions references. I heard about Client-First a week ago. I need to know about it next.
