Figma expert to create code generation ready design
Budget: $250 – $750 USD
Hello. The job title is very specific, clear and exact. Figma EXPERT to prepare code generation ready design. If you are not sure what that means, please check it up before you apply. Thank you.
We have a large Figma design for 4 related projects. The designer we had before was not an expert and it needs to be cleaned up. In some cases, it may even be easier to start from the beginning. Time to complete 1-2 weeks.
You must know the proper way and best practices to develop well-organized, easy to read, error-free designs that automatic code generation tools can use to produce the code from the designs. Use these or similar Figma plugins:
- shortcuts to speed up the process.
- plugins to help clean up the design - layer names, organize layers, and check for errors.
- Inspect tool to inspect the properties of layers and components to fix errors.
- Auto Layout to create and maintain consistent spacing and alignment.
- Styleguide to create and manage reusable styles.
- Variants Organizer to to create, organize and manage different variants of components.
- Inspect to view the CSS properties of the elements.
The goal is to make the Figma design as clear, concise, and organized as possible.
* Use consistent convention and descriptive names for the pages, frames, layers, and components.
* Group related elements together.
* Create components for reusable elements and use them consistently throughout the design to make it more organized and easier to read.
* Use nested components to create more complex components.
* Use comments to explain the design.
* Use styles to define the appearance of the elements to make it more consistent and easier to update.
* Create reusable styles for common elements.
* Use nested styles to create more complex styles.
* Use a grid layout to organize the design to make it more flexible and responsive.
* Use consistent spacing and alignment throughout the design.
* Use constraints to keep the elements in place to prevent the layout from breaking when we make changes to the design.
Show the flow of screens and effects of actions in valid and error-free Figma design, so that code generation tools can understand the logic and functionality of the application.
- Use the grid, alignment tools, and spacing to create a consistent visual rhythm and layout for the screens².
- Use prototype connections to link the screens and define the interactions and transitions between them³ such as Navigate to, Back, Set variable, Conditional, Scroll to, Open link, Open overlay, Close overlay, and Swap overlay.
- Use the Autoflow plugin to connect the screens and show the user journeys and scenarios⁴.
- Screens Flow Example template by Dmitriy Markov to organize art boards/frames/screens in the right way, connect mockups and tell a better story².
(1) How Do You Show Flow in Figma? - WebsiteBuilderInsider.com. https://www.websitebuilderinsider.com/how-do-you-show-flow-in-figma/.
(2) View prototype connections – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/4411431245335-View-prototype-connections.
(3) Best Figma plugins to supercharge your workflow [2022 updated] - UX Planet. https://uxplanet.org/best-figma-plugins-to-supercharge-your-workflow-2022-updated-e163125297d3.
(4) Screens Flow Example | Figma Community. https://www.figma.com/community/file/920253259279592999/screens-flow-example.
(5) Prototype actions – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/360040035874-Prototype-actions.
(6) Guide to prototyping in Figma – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma.
(7) Flow Your Screens (UI Flow Kit) | Figma Community. https://www.figma.com/community/file/929927411252967380/flow-your-screens-ui-flow-kit.
(8) UI flows for Figma | Figma Community. https://www.figma.com/community/plugin/1237560897507427410/ui-flows-for-figma.
We will use:
* prototyping,
* auto flow (arrows/lines/connections to show connections),
* stacked screens
* comments
to show the flow, actions, effects and data transfers (API calls) of Figma screens
We may also need:
* flow chart and
* decision table
to complement where necessary. Please look into how to use these.
Finally, we will have the description of the business logic to fill in any remaining gaps
We have a large Figma design for 4 related projects. The designer we had before was not an expert and it needs to be cleaned up. In some cases, it may even be easier to start from the beginning. Time to complete 1-2 weeks.
You must know the proper way and best practices to develop well-organized, easy to read, error-free designs that automatic code generation tools can use to produce the code from the designs. Use these or similar Figma plugins:
- shortcuts to speed up the process.
- plugins to help clean up the design - layer names, organize layers, and check for errors.
- Inspect tool to inspect the properties of layers and components to fix errors.
- Auto Layout to create and maintain consistent spacing and alignment.
- Styleguide to create and manage reusable styles.
- Variants Organizer to to create, organize and manage different variants of components.
- Inspect to view the CSS properties of the elements.
The goal is to make the Figma design as clear, concise, and organized as possible.
* Use consistent convention and descriptive names for the pages, frames, layers, and components.
* Group related elements together.
* Create components for reusable elements and use them consistently throughout the design to make it more organized and easier to read.
* Use nested components to create more complex components.
* Use comments to explain the design.
* Use styles to define the appearance of the elements to make it more consistent and easier to update.
* Create reusable styles for common elements.
* Use nested styles to create more complex styles.
* Use a grid layout to organize the design to make it more flexible and responsive.
* Use consistent spacing and alignment throughout the design.
* Use constraints to keep the elements in place to prevent the layout from breaking when we make changes to the design.
Show the flow of screens and effects of actions in valid and error-free Figma design, so that code generation tools can understand the logic and functionality of the application.
- Use the grid, alignment tools, and spacing to create a consistent visual rhythm and layout for the screens².
- Use prototype connections to link the screens and define the interactions and transitions between them³ such as Navigate to, Back, Set variable, Conditional, Scroll to, Open link, Open overlay, Close overlay, and Swap overlay.
- Use the Autoflow plugin to connect the screens and show the user journeys and scenarios⁴.
- Screens Flow Example template by Dmitriy Markov to organize art boards/frames/screens in the right way, connect mockups and tell a better story².
(1) How Do You Show Flow in Figma? - WebsiteBuilderInsider.com. https://www.websitebuilderinsider.com/how-do-you-show-flow-in-figma/.
(2) View prototype connections – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/4411431245335-View-prototype-connections.
(3) Best Figma plugins to supercharge your workflow [2022 updated] - UX Planet. https://uxplanet.org/best-figma-plugins-to-supercharge-your-workflow-2022-updated-e163125297d3.
(4) Screens Flow Example | Figma Community. https://www.figma.com/community/file/920253259279592999/screens-flow-example.
(5) Prototype actions – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/360040035874-Prototype-actions.
(6) Guide to prototyping in Figma – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma.
(7) Flow Your Screens (UI Flow Kit) | Figma Community. https://www.figma.com/community/file/929927411252967380/flow-your-screens-ui-flow-kit.
(8) UI flows for Figma | Figma Community. https://www.figma.com/community/plugin/1237560897507427410/ui-flows-for-figma.
We will use:
* prototyping,
* auto flow (arrows/lines/connections to show connections),
* stacked screens
* comments
to show the flow, actions, effects and data transfers (API calls) of Figma screens
We may also need:
* flow chart and
* decision table
to complement where necessary. Please look into how to use these.
Finally, we will have the description of the business logic to fill in any remaining gaps