0
Welcome Guest! Login
0 items Join Now

Best Workflow for Web Designers using Figma with RT Templates

Last Post
Search Topic

  • Best Workflow for Web Designers using Figma with RT Templates

    Posted 9 months 4 hours ago
    • Hi everyone,

      Although Rocket Theme makes beautiful designs, i usually try to make a unique design and then adapt the most similar template (or use one that has the particles i need).

      I understand that these templates are built also for the average user that will just change colors and text in gantry configuration pannels and not much else so RT developed this system of containers inside containers with fixed margins and paddings and fluid horizontal paddings for the sections.

      My problem is that when i'm designing in Figma, i use a 12 column vertical grid and an 8pt horizontal lines and when placing the various elements, i'm not accounting for the gantry containers margin and paddings. When coding element placemente is always different from the design because of those default paddings.

      What is your approach to not having too much work in adpating a template to meet your custom design?

      Do you make your design using not only the 12 column and include the gantry margins and paddings or when coding css, you get rid of the deafult margin and paddings by resetting them to 0 and then change them case by case?

      I would like to develop a sistem that's easy to apply when i'm changing the template to meet my design.

      Thanks for sharing your ideas
    #1458095
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22234
    • Thanks: 3219
    • messin' with stuff

    Re: Best Workflow for Web Designers using Figma with RT Templates

    Posted 8 months 2 weeks ago
    • I try to pick templates that have the general geometry (including margins and paddings) that I'm going for. I use the "no margin all" and "no padding all" particle variations all the time. I generally have an area in my custom.scss file that I title "theme overrides" where I have global CSS overrides for pieces of the theme I want to change. Rarely, but still on occasion, I'll change certain values in the core SCSS files (typography.scss, configuration.scss, buttons.scss, etc) as needed.

      Gantry's grid system only has 1 breakpoint that matters... the mobile only breakpoint where things get stacked into 1 column... on occassion I want the desktop or tablet breakpoint to show 2 columns instead of 4 or 3 columns instead of 6... I'll use the breakpoint mixins in a custom.scss file to target a custom-class.g-block.size-25 to be 50% instead of 25% for example to get better responsive columns at different breakpoints. Or more often I find myself wanting 2 columns for certain things on mobile so I'll do something like:
      @include breakpoint(mobile-only) {
  custom-class.g-block{
    width: 50%;
  }
}

      docs.gantry.org/gantry5/tutorials/media-...queries-on-your-site
    • Last Edit: 8 months 2 weeks ago by Matt.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1458141

  • Re: Best Workflow for Web Designers using Figma with RT Templates

    Posted 8 months 2 weeks ago
    #1458191

Time to create page: 0.049 seconds